两者定义

1.cookie：Cookie技术是客户端的解决方案，Cookie就是由服务器发给客户端的特殊信息，而这些信息以文本文件的方式存放在客户端，然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。让我们说得更具体一些：当用户使用浏览器访问一个支持Cookie的网站的时候，用户会提供包括用户名在内的个人信息并且提交至服务器；接着，服务器在向客户端回传相应的超文本的同时也会发回这些个人信息，当然这些信息并不是存放在HTTP响应体（Response Body）中的，而是存放于HTTP响应头（Response Header）；当客户端浏览器接收到来自服务器的响应之后，浏览器会将这些信息存放在一个统一的位置。

如果你把Cookies看成为http协议的一个扩展的话，其实本质上cookies就是http的一个扩展。有两个http头部是专门负责设置以及发送cookie的,它们分别是Set-Cookie以及Cookie。当服务器返回给客户端一个http响应信息时，其中如果包含Set-Cookie这个头部时，意思就是指示客户端建立一个cookie，并且在后续的http请求中自动发送这个cookie到服务器端，直到这个cookie过期。如果cookie的生存时间是整个会话期间的话，那么浏览器会将cookie保存在内存中，浏览器关闭时就会自动清除这个cookie。另外一种情况就是保存在客户端的硬盘中，浏览器关闭的话，该cookie也不会被清除，下次打开浏览器访问对应网站时，这个cookie就会自动再次发送到服务器端。一个cookie的设置以及发送过程分为以下四步：

1. 客户端发送一个http请求到服务器端(Http Request)
2. 服务器端发送一个http响应到客户端，其中包含Set-Cookie头部(Http Response+ Set-Cookie)
3. 客户端发送一个http请求到服务器端，其中包含Cookie头部 (Http Request+Cookie)
4. 服务器端发送一个http响应到客户端(Http Response)

其中cookie包含以下字段：

注意：Cookie中保存中文只能编码。一般使用UTF-8编码即可。不推荐使用GBK等中文编码，因为浏览器不一定支持，而且JavaScript也不支持GBK编码。

我们可以看看百度的cookie

2.Session :除了使用Cookie，Web应用程序中还经常使用Session来记录客户端状态。Session是服务器端使用的一种记录客户端状态的机制，使用上比Cookie简单一些，相应的也增加了服务器的存储压力。

Session技术则是服务端的解决方案，它是通过服务器来保持状态的。由于Session这个词汇包含的语义很多，因此需要在这里明确一下 Session的含义。首先，我们通常都会把Session翻译成会话，因此我们可以把客户端浏览器与服务器之间一系列交互的动作称为一个 Session。从这个语义出发，我们会提到Session持续的时间，会提到在Session过程中进行了什么操作等等；其次，Session指的是服务器端为客户端所开辟的存储空间，在其中保存的信息就是用于保持状态。从这个语义出发，我们则会提到往Session中存放什么内容，如何根据键值从 Session中获取匹配的内容等。

要使用Session，第一步当然是创建Session了。那么Session在何时创建呢？当然还是在服务器端程序运行的过程中创建的，不同语言实现的应用程序有不同创建Session的方法，Session对应的类为javax.servlet.http.HttpSession类。在Java中是通过调用HttpServletRequest的getSession方法（使用true作为参数）创建的。在创建了Session的同时，服务器会为该Session生成唯一的Session id，而这个Session id在随后的请求中会被用来重新获得已经创建的Session；在Session被创建之后，就可以调用Session相关的方法往Session中增加内容了，而这些内容只会保存在服务器中，发到客户端的只有Session id；当客户端再次发送请求的时候，会将这个Session id带上，服务器接受到请求之后就会依据Session id找到相应的Session，从而再次使用之。正式这样一个过程，用户的状态也就得以保持了。

我们来看看session的内容：

cookie和session的区别

1. Cookie数据保存在客户端，Session保存在服务器
2. 服务端保存状态机制需要在客户端做标记，所以session可能借助cookie机制，比如服务器返回的sessionId存放的容器就是cookie（注意：有些资料说ASP解决这个问题，当禁掉cookie，服务端的session任然可以正常使用，ASP没试验过，但是对于网络上很多用php和jsp编写的网站，我发现禁掉cookie，网站的session都无法正常的访问）
3. Cookie通常用于客户端保存用户的登录状态
4. 单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能超过3K

绘制圆形

arc(x,y,半径,起止弧度,结束弧度,旋转方向)

• x,y : 圆心位置
• 弧度与角度的关系：弧度=角度*Math.PI/180
• 旋转方向：顺时针(默认：false)，逆时针(true)

例子

接下来我们就可以来画一个时钟了，首先表盘一圈是60个刻度，并且时钟的刻度比分钟的刻度长。所以不要一开始就来一个完整的大圆。

1. 清除画布。先用一个循环画60个6°的弧，这样就刚好是一整个圆，生成好了之后覆盖一个白色的圆，这样所有刻度都是分钟的刻度长度
2. 再画12个30°的弧，将之前的时钟刻度覆盖掉，再用一个小一点的白色的圆覆盖，这样时钟分钟的刻度就都画好了
3. 接着获得当地时间，计算弧度，绘制时针，分针，秒针
4. 设置定时器，1秒刷新一次，调用绘制函数

canvas时钟

绘制其他曲线

• arcTo(x1,y1,x2,y2,r) -x1,y1:第一组坐标;x2,y2:第二组坐标;r:半径
• guadraticCurveTo(dx,dy,x1,y1) -贝塞尔曲线:第一组控制点，第二组结束坐标
• bezierCurveTo(dx1,dy2,dx2,dy2,x1,y1) -贝塞尔曲线：第一组控制点，第二组控制点，第三组结束坐标

变换

• translate(x,y)：
  • 偏移：从起始点为基准点，移动到当前坐标位置
• rotate(r):
  • 旋转：以画布起点为旋转中心，参数为弧度
• scale(x,y):
  • 缩放：参数为缩放宽高比例

例子

绘制一个旋转的小方块

var ct = $('mycanvas1');
	var ctx = ct.getContext('2d');
	ctx.translate(100,100);//将画布起点平移到(100,100)处
	var num=0;
	setInterval(function() {
		num++;
		//清除画布，将上次绘制的图形清除掉，由于画布起点变成了(100,100)，因此清除画布时起点应定义为(-100,-100)
		ctx.clearRect(-100,-100,ct.width,ct.height);
		ctx.save();//保存当前的路径，即起点为(100,100)，画布清空的状态
		ctx.rotate(num*Math.PI/180);//以(100,100)为起点旋转
		ctx.translate(-25,-25);//将中心点移到(75,75)
		ctx.fillRect(0,0,50,50);//以(75,75)为起点绘制正方形
		ctx.restore();
	},20);

canvas介绍

canvas是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.它可以用于制作照片集或者制作简单(也可以是不简单)的动画

canvas 最早被Apple引入,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现. 基于Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素. canvas元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中.

canvas标签使用

canvas元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

如何检测浏览器支不支持canvas呢？我们可以这么写:

<canvas id="mycanvas" width="300" height="300">
	your brower doesn't support canvas!
</canvas>

这个时候，如果不支持canvas的浏览器就会忽视canvas标签，显示标签中的内容

要注意的是，如果不声明canvas宽高，默认canvas是300*150大小的

为什么不在样式表中声明宽高：由于canvas默认宽高是300*150的，假如在样式表中设置{width:300px;height:300px},相当于把画布宽高度缩放到300px，这个时候画布中的内容也会等比例进行缩放

绘制环境

现在我们可以获取到canvas绘图对象： getContent(‘2d’):现在只支持2d的场景，那有没有3d呢，有这么个东西(webgl)，不过兼容性不大好

var ctx = $('mycanvas').getContext('2d');

绘制方块

• fillRect(L,T,W,H):绘制填充性方块，默认颜色时黑色
• strokeRect(L,T,W,H):带边框的方块，默认1px黑色边框

ctx.fillRect(50,50,50,50);
ctx.strokeRect(50.5,50.5,50,50);

为什么绘制带边框的方框时设置绘制起点时

设置绘图

• fillStyle: 填充颜色(绘制canvas室友顺序的)
• lineWidth： 线宽度
• strokeStyle： 边框颜色

使用例子：

ctx.fillStyle = 'red';
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2px;
ctx.fillRect(50,50,50,50);
ctx.strokeRect(50.5,50.5,50,50);

边界绘制

• lineJoin ：边界连接点样式 -miter(默认),round(圆角),bevel(斜角)
• lineCap: 端点样式 -butt(默认),round(圆角),square(高度多出宽度一半的值)

ctx.fillStyle = 'red';
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2px;
ctx.lineJoin = 'round';
ctx.fillRect(50,50,50,50);
ctx.strokeRect(50.5,50.5,50,50);

绘制路径

• beginPath: 开始绘制路径
• closePath：结束绘制路径
• moveTo： 移动到坐标
• lineTo： 直线
• stroke：画线
• fill： 填充，默认黑色
• rect： 矩形区域
• clearRect：删除一个画布的矩形区域
• save： 保存路径
• restore： 恢复路径

现在我们来试试画一个三角形：

ctx.beginPath();
ctx.moveTo(100,100);//定点到坐标处
ctx.lineTo(200,200);//画线结束到坐标处
ctx.lineTo(300,200);
ctx.closePath();//图形未闭合时，闭合开始到借书处
ctx.stroke();//绘制直线
ctx.fill();//填充

小例子

鼠标画线，方块自动滑动 canvas画图例子

利用条件注释语句

<!–[if IE]> 此内容只有IE可见 <![endif]–>

• lt 表示less than 当前条件版本以下的版本，不包含当前版本。
• gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。
• te 表示less than or equal 当前版本以下版本，并包含当前版本。

例子：

<!– 默认先调用css.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”css.css” />
<!–[if IE 7]><!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>

IE6 css hack

*html selector{} /*selector表示css选择器*/
selector{_property:value;}
selector{_property/**/:/**/value;}
selector{-property:value;}

IE6 css hack常用习惯是使用下划线

IE7 css hack

*+html selector{} /*selector表示css选择器*/
*:first-child+html selector{}

IE8 css hack

selector{
	property: value; /*W3C MODEL*/
	property: value\0; /*IE 8+*/

}

IE6、IE7、IE8共有的css hack

selector{
	property: value\9; /*IE 9+*/

}

IE6、IE7共有的css hack

Selector { 
	*property: value;
	#property: value;
	+property: value;
}

IE8+ css hack

Selector { property: value\0;}

IE9+ css hack

Selector { property: value\9\0; }/*IE 9+*/

Ajax介绍

Ajax于2005年第一次被提出，他的意思可能是”异步Javascript和XML”。Ajax的基础是：用户在浏览器中动作时，(通过单击一个连接，使用表单等)触发事件。这些触发事件可以由JavaScript异步处理，也就是说，JavaScript可以在后台进行处理，而不强制用户等待事件的响应。JavaScript在ajax中的任务是对服务器端资源发出请求。在ajax这个术语刚刚定义时，请求结果使用XML(可扩展标记语言)格式返回给JavaScript

理解Ajax

从实际JavaScript代码的方面来说，ajax的请求的执行从下面三个步骤开始：

• 创建一个ajax对象
• 发出请求
• 处理服务器相应

创建一个Ajax对象

Ajax处理从一个对象开始，通过该对象进行通信。我们将这个对象称为”Ajax”对象，有些地方称其为”XHR”(XML HTTP REQUEST)对象，XHR是 XML HTTP请求，在Ajax中使用JavaScript和超文本传输协议(HTTP)发起对资源的请求。之前也介绍过，最初返回数据采用XML格式，但现在已经不常用，更常用的是json

XMLHTTPRequest对象存在于所有非IE浏览器和IE7之后的版本，更老的IE版本需要创建ActiveXObject，以MSXML2.XMLHTTP3.0作为参数，我们可以将对象创建放到函数中

function getXMLHTTPRequestObject () {
	var ajax=null;
	if(window.XMLHTTPRequest){
		ajax=new XMLHTTPRequest();
	}else if(window.ActiveXobject){ //older IE
		ajax= new ActiveXObject('MSXML2.XMLHTTP3.0');
	}
	return ajax;
}

指定结果处理器

结果处理器是在Ajax事务相应期间调用的函数，为了将该函数与Ajax调用关联，将函数赋予对象的onreadystatechange属性

ajax.onreadystatechange = handleStateChange;

发出请求

发出Ajax请求时，首先调用对象的open()方法，以请求类型作为第一个参数，服务器资源的URL作为第二个参数，true作为第三个参数，比如

ajax.open('GET','http://www.example.com/a.php',true);

最常用的请求类型是GET和POST，两者异同点如下：

• GET请求是请求任何HTML页面的标准方法，POST请求是表单提交的标准方法
• GET请求用于常见而可重复的请求，比如计入书签，POST请求用于不考虑重复的独特请求，比如更新数据库记录
• GET请求发送数据是带在url后面，用户可见，传输数据量有限制，根据浏览器，大约为2~4KB；POST请求使用send()发送数据，适合大数据量

open()方法的第二个URL参数可以绝对或者相对路径，当中涉及到两个问题，一个是同源策略和js跨域同源策略,第二个问题是Ajax请求必须通过服务器发起才能正常工作，不能本地测试。

open()方法的第三个参数表示请求采用异步还是同步方式，默认值为true–异步方式。异步请求期间，可以执行其他JavaScript代码，同时JavaScript等待服务器响应。如果创建的是一个同步请求，就不需要创建函数来处理readyState的变化

open()方法的第4个和第5个参数是可选的，分别代表用户名和密码。如果资源受到HTTP验证的保护，这两个参数就是必须的

发送数据

1. 将数据作为请求的一部分发送给服务器有两种方法，第一种选择是将数据附加到URL后，数据的结构应该是”名称=值”配对，多个配对之间用&符号分隔。为了保证请求使用的数据安全，将其封装在encodeURIComponent()调用之中:

ajax.open('GET','http://www.example.com/a.php?id='+encodeURIComponent(id),true);

稍微好一点的备选方案是将数据作为send()的唯一参数：

var data = 'email='+encodeURIComponent(email)+'&password='+encodeURIComponent(password);
ajax.open('GET','http://www.example.com/a.php',true);
ajax.send(data);

1. 使用POST请求时，必须为send()提供数据，而不是将其附到URL之后。而且，使用POST时为了增加可靠性，应该向服务器指明发送的内容类别。可以调用setRequestHeader()方法，第一个参数时首标的名称，第二个参数时首标的取值。使用如下：

var data = 'email='+encodeURIComponent(email)+'&password='+encodeURIComponent(password);
ajax.open('POST','http://www.example.com/a.php',true);
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(data);

还有一种方案，使用FormData()对象，这种方法并未得到所有浏览器的支持，要使用前要测试一下可用性。使用如下：

var data = new FormData();
data.append('email',email);
data.append('password',password);
ajax.open('POST','http://www.example.com/a.php',true);
ajax.send(data);

注意：使用这种方法时，数据自动编码，不需要调用encodeURIComponent(),也不需要设置Content-Type

处理服务器请求

readyState属性有5个值，你可以检查readyState属性并相应作出反应，其按照执行的顺序排列：

• 0：未发送
• 1. 打开
• 1. 接收到首标
• 1. 加载中
• 1. 完成

当readyState等于4时，ajax请求已经完成，检查对象的status属性可以完成确认工作，该属性代表服务器对资源请求的相应代码。这些服务器代码包括：

• 200： 正常
• 301： 永久性移动
• 304： 未作修改
• 307： 临时重定向
• 401： 未授权
• 403： 禁止访问
• 404： 未找到
• 500： 服务器内部错误

其实不需要记住或者处理所有的可能性。当状态码为200时，说明资源以及找到并且可以加载。如果状态码为304，说明浏览器有一个可用的缓存版本。其他代码说明出现了问题

if(ajax.readyState == 4){
	if((ajax.status >= 200&&ajax.status < 300)||ajax.status == 304){
		//handle the response
	}
}else{
	//status error!
}

statusText属性代表服务器服务器返回的对应状态码的字符串信息，可以用于任何错误报告当中。

当函数做好准备处理服务器相应时，它可以从下面两个属性之一找到相应数据：responseXML和responseText。前者用在返回数据为XML格式时，后者在返回数据不是XML格式时填充，因此大部分时候都使用这个属性。该属性存储一个字符串，使用方法与其他字符串相同。

释放对象

使用完毕之后(脚本不再使用它)，应该赋null值将其清除：

ajax=null;