Ajax探讨

Ajax是一种技术方案，并不是什么新技术，Ajax请求使用XmlHttpRequest对象发送，

XmlHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。

最早，微软在IE 5引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax操作因此得以诞生。

XmlHttpRequest Level1主要属性

　　* xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。

　　* xhr.status：服务器返回的状态码，等于200表示一切正常。

　　* xhr.responseText：服务器返回的文本数据

　　* xhr.responseXML：服务器返回的XML格式的数据

　　* xhr.statusText：服务器返回的状态文本。

主要缺点

• 受同源策略的限制，不能发送跨域请求；
• 不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
• 在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

XmlHttpRequest Level2主要属性

在Level1的基础上增加以下内容

* xhr.timeout： 设置HTTP请求的时限，最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求

配套的回调函数 xhr.ontimeout = function(event){alert(‘请求超时！‘);}

* var formData = new FormData();formData.append(‘username‘, ‘张三‘);xhr.send(formData); 新加formData对象，可以直接传formData

* formData.append(‘files[]‘, files[i]);  xhr.send(formData); 上传文件

* xhr.open(‘GET‘, ‘http://other.server/and/path/to/script‘); 跨域资源共享CORS（IE9以上的支持）

* 接收二进制数据，参见阮老师的这篇文章

* 进度信息,包括上传的进度信息和下载的进度信息

xhr.onprogress = updateProgress; 下载

xhr.upload.onprogress = updateProgress;上传

function updateProgress(event) {

　　　　if (event.lengthComputable) {

　　　　　　var percentComplete = event.loaded / event.total;

　　　　}

}

　　* load事件：传输成功完成。

　　* abort事件：传输被用户取消。

　　* error事件：传输中出现错误。

　　* loadstart事件：传输开始。

　　* loadEnd事件：传输结束，但是不知道成功还是失败。

Level2新功能

• 可以发送跨域请求，在服务端允许的情况下；
• 支持发送和接收二进制数据；
• 新增formData对象，支持发送表单数据；
• 发送和获取数据时，可以获取进度信息；
• 可以设置请求的超时时间；

xmlHttpRequest的使用

1、设置requestheadervar client = new XMLHttpRequest();

client.open(‘GET‘, ‘demo.cgi‘);
client.setRequestHeader(‘X-Test‘, ‘one‘);//必须在open之后，send之前，第一个参数不区分大小写，Content-Type/content-Type/content-type
client.setRequestHeader(‘X-Test‘, ‘two‘); //最终的值不会采用覆盖override的方式，而是采用追加append的方式,最终request header中"X-Test"为: one, twoclient.send();

2、获取ResponseHeader

getAllResponseHeadersgetResponseHeader(header) //只能拿到限制以外（即被视为safe）的header字段，而不是全部字段

3、设定response数据类型

level1  overrideMimeTypelevel2  xhr.responseType

4、获取response数据

xhr.response  ""xhr.responseText  ""xhr.responseXML   null

5、追踪状态

利用onreadystatechange事件

6、设置超时时间

xhr.timeout