关于跨域（补充并添加comet和web sockets知识）

Ajax，即Asynchronous Javascript+XML的核心是XMLHttpRequest对象，能够向服务器请求额外的数据而无需卸载页面，会带来更好的用户体验。

一、关于XMLHttpRequest对象

xhr.open()方法接收三个参数，

第一个参数请求的方式（post、get）

第二个参数请求的url，只能在同一个域中使用相同的端口和协议的url发送请求

第三个参数表示是否异步的布尔值，true表示异步，false表示不异步

xhr.open('get','example.txt',false);

xhr.send()方法接受一个参数，即要作为请求主体发送的数据，调用send后请求就会被发配到服务器去。浏览器就受到响应后，响应的数据会自动填充xhr对象的属性

如果不需要通过请求主体发送数据，则必须传入null

xhr.send(null);

xhr.responseText：作为响应主体被返回的文本，无论内容的类型是什么，响应的主体内容都会保存到这个属性中

xhr.responseXML：如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的xml DOM文档。对于非XML数据而言，此属性的值为null

xhr.status：响应的HTTP状态

xhr.statusText：HTTP状态说明，

xhr.readyState：请求、响应过程的当前活动阶段

0：表示未初始化，未open

1：表示启动，未send

2：发送，send了，但未接收到响应

3：接收，接收到部分响应

4：完成，接收到全部响应，而且已经可以在客户端使用

只要readyState值有一个值变成另一个值，都会触发onreadystatechange事件

xhr.abort()方法：在接收到响应之前还可以调用这个函数来取消异步请求

在接收到响应的第一步，是检查status属性，304状态码表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本

二、关于HTTP头部信息

每一个HTTP请求和响应都会带来相应的头部信息

在发送这个xhr请求的同时，还会发送一些头部信息：

Accept：浏览器能够处理的内容类型

Accept-Charset：浏览器能够显示的字符集

Accept-Encoding：浏览器能够处理的压缩编码

Accept-Language：浏览器当前设置的语言

Connecttion：浏览器与服务器之间连接的类型

cookie：当前页面设置的任何cookie

Host：发出请求的页面所在的域

Referer：发出请求的页面的URI

User-Agent：浏览器的用户代理字符串

可以自定义请求头信息：setRequestHeader()接收两个参数，第一头部字段的名称和第二头部字段的值。必须在open之后，send之前调用

相应的使用getRequestHeader()可以得到相应的头部信息

三、get和post请求

get请求，通常向服务器查询某些信息，必要时，将查询字符串参数的名称和值追加到URL的末尾，以便发送给服务器

对于xhr，位于open()方法中的URL末尾的查询字符串必须经过正确的编码才行

参数的编码可以使用encodeURICoponent()

post请求，通常用于向服务器发送应该被保存的数据，将数据作为请求的主体提交。可以包含的数据比较多，而且格式不限

模仿表单提交，设置Content-Type

xhr.setRequestHeader("Content-Type",''application/x-www-form-urlencoded');

get请求速度比post快，post能发送的数据更多一些

二、关于XMLHttpRequest2级

1）FormData对象，为序列化表单以及创建与表单格式相同的数据提供方便

var data= new Formata();

data.append('name',lili");

或者

xhr.send(new FormData(document.form[0]));

2）超时设定

xhr的timeout属性，表示请求在等待响应多少毫秒之后就终止

3）overrideMimeType()

用于重写xhr响应的MIME类型，必须在send前调用，才能保证重写的MIME类型

4）进度事件

loadstart：在接收到响应数据的第一个字节时触发

progress：在接收响应期间持续不断地触发

error：在请求发生错误时触发

abort：在因为调用abort函数，终止连接时触发

load：在接收到完整的响应数据时触发

loadend：在通信完成，或者触发error、abort、load事件后触发

三、跨域资源共享

默认情况下，xhr对象只能访问与包含它的页面位于同一个域中的资源

1）cors：基本思想，就是使用自定的HTTP头部让浏览器进行沟通，从而决定请求或者响应是该成功，还是应该失败

origin：http://www.nczonline.net

如果服务器接收请求，就在Access-Control-Allow-Origin头部中回发相同的源信息。注意，请求和响应都不包含cookie信息

2）图像ping

与服务器进行简单、单向的跨域通信的一种方式。浏览器得不到任何具体的数据，通过监听load和error事件，它能知道响应是什么时候接收到的

只发送get请求

无法访问服务器响应的文本

只能是浏览器与服务器的单向通信

var img= new Image();

img.load = img.onerror = function(){

    alert("Done")

}

img.src="http://www.example.com/test?name=lili";

3）jsonp

由两部分组成：回调函数和数据

动态创建script

var script = document.createElement("script");

script.src= "http://a.net/json/callback=handleResponse";

document.body.insertBefore(script,document.body.firstChild);

function handleResponse(response){

alert(response.city);

}

能够访问响应文本，支持在浏览器与服务器之间双向通信

缺点：

JSONP是从其他域中加载代码执行，如果其他域不安全，可能夹杂一些恶意代码

要确定JSONP请求是否失败不容易，h5给script添加了onerror事件处理程序

4）comet

是服务器向页面推送数据的技术，方式有长轮询和HTTP流

短轮询，浏览器发送请求，服务器立即发送响应，无论数据是否有效

长轮询，浏览器发送请求，等待发送响应。浏览器定时向服务器发送请求，看有没有更新的数据

流在整个生命周期只使用一个HTTP链接，而服务器保持连接打开，然后周期性地向浏览器发送数据

5）sse

服务器发送事件，用于创建到服务器的单向链接，服务器通过这个链接可以发送任意数量的数据。支持长短轮询，HTTP流，而且能够在断开链接时，自动确定何时重新连接。

var  sourse = new EventSource("my.php");

sourse.onmessage = function(event){

var data = event.data;

}

source.close();

6）web sockets

在单独的持久连接上提供全双工，双向通信

连接过程：

在js中创了web socket之后，会有一个HTTP请求发送服务器以发起连接。在取得服务器响应后，建立连接会使用HTTP升级从HTTP协议交换web socket协议

ws://或者wss://

使用自定义的协议，能够在客户端和服务器之间发送非常少量的数据，而不必担心HTTP那样字节级的开销。由于传送的数据包非常小，所以非常使用于移动应用

var scoket = new WebScocket('ws://a.com/b.php');

socket.send("lili");

socket.onmessage = function(event){

var data = event.data;

}

socket.close()

缺点：

制定协议的时间

必须给web socket构造函数传入绝对URL

只能传送纯文本