XMLHttpRequest level2介绍

1、xmlHttpRequest level1:

xmlHttpRequest是一个浏览器脚本语言，用来给server发送http或者https请求来加载，出于安全考虑，这个只能用于同域访问(还有其他的缺点，比如说不能读取或者上传二进制文件，传送和发送数据时没有进度信息)。Xmlhttprequest概念的形成是源于微软的outlook web access，后来使用这样的概念形成了msxml库，这就是为什么在以前的IE版本中通过依赖msxml库的控件的形式创建一个XMLhttprequest对象，这个对象在1999年3月份由IE5引入，2006年10月在IE7中正式支持xmlhttprequest对象。

随着jquery，dojo库（框架）的兴起，原生的xmlhttprequest对象更是慢慢地淡出了人们地视线，他们这些库都是将xmlhttprequest进行了封装，暴露出更加好用的方法。2008年2月，W3C推出了xmlhttprequest level2的草案，增加了很多新的特性，今天我们将详细地介绍下这些特性。

首先，我们先回归一下在最初的版本中是怎么使用xmlhttprequest对象的。IE5和IE6是怎么创建的：

var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
其他的浏览器则通过 var xhr = new XMLHttpRequest()创建。

发送请求 ：

xhr.open(“GET”,”test1.txt”,true);//启动一个请求准备发送
xhr.send(); //发送请求
接下来就是等待服务器的响应，这期间会有几个状态的变化，每个readyState的变化都会触发下面的方法：

xhr.onreadystatechange = function(){
　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
　　　　　　alert( xhr.responseText );
　　　　} else {
　　　　　　alert( xhr.statusText );
　　　　}
　};
补充一点内容：

readyState的几个状态值(http的状态请查看《http权威指南》)：

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
xhr返回的数据类型：

xhr.responseText：返回的文本数据
xhr.responseXML：返回XML格式的数据
xhr.statusText：返回状态文本。
2、xmlHttpRequest level2

（后文说之的xhr对象之的是level2的）

(1)FormData

web中频繁使用的就是表单数据的序列化了，Level2为此定义了一个FormData,可以通过给这个对象设置的属性，

var formData = new FormData();
formData.append(‘username’, ‘张三’);
formData.append(‘id’, 123456);
也可以使用表单数据预制FormData

var formData = new FormData(document.form[0]);
有了formDat后，就可以传给xhr的send方法。使用FormData的方便之处就是不必明确地在xhr对象上设置头部，即如下：

xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
注：xhr level1模拟提交表单数据时要加上上述语句，因为post和web表单提交是不同的内容。

(2)timeout

timeout属性最初是在IE8中引入的，后来也被w3c收入到了Level2的规范中，代码片段如下：

xhr.open(“GET”,”test1.txt”,true)
xhr.timeout = 1000;//1秒后请求失效
xhr.ontimeout = function(){
}

(3)接受二进制数据

方法一:

改写数据的MIMEType，将服务器返回的二进制数据伪装成文本数据，并且告诉浏览器这是用户自定义的字符集,然后，

用responseText属性接收服务器返回的二进制数据。

xhr.overrideMimeType("text/plain; charset=x-user-defined");
var binStr = xhr.responseText;

这时，浏览器把它当做文本数据，所以还必须再一个个字节地还原成二进制数据

for (var i = 0, len = binStr.length; i < len; ++i) {

　　　　var c = binStr.charCodeAt(i);
　　　　var byte = c & 0xff;
　　}

方法二：

使用新增的responseType属性。如果服务器返回文本数据，这个属性的值是”TEXT”，这是默认值。较新的浏览器还支持其他值，也就是说，可以接收其他格式的数据。你可以把responseType设为 blob，表示服务器传回的是二进制对象

var xhr = new XMLHttpRequest();

　　xhr.open(‘GET’, ‘/path/to/image.png’);
　　xhr.responseType = ‘blob’;
接收数据的时候，用浏览器自带的Blob对象即可。

var blob = new Blob([xhr.response], {type: 'image/png'});

你还可以将responseType设为arraybuffer，把二进制数据装在一个数组里。

var xhr = new XMLHttpRequest();

　　xhr.open(‘GET’, ‘/path/to/image.png’);
　　xhr.responseType = “arraybuffer”;
接收数据的时候，需要遍历这个数组。

var arrayBuffer = xhr.response;

　　if (arrayBuffer) {
　　　　var byteArray = new Uint8Array(arrayBuffer);
　　　　for (var i = 0; i < byteArray.byteLength; i++) {
　　　　　　// do something
　　　　}
　　}

(4)进度信息

xhr level2对象在传送数据的时候，有一个progress对象，用来返回进度信息，分为上传还下载两种情况，下载的progress事件属于

xmlhttprequest对象，上传的属于xmlhttprequest.upload对象

xhr.onprogress = updateProgress;
　xhr.upload.onprogress = updateProgress;
function updateProgress(event) {
　　　　if (event.lengthComputable) {
　　　　　　var percentComplete = event.loaded / event.total;
　　　　}
　　}
还有其他的事件类型：

load事件：传输成功完成。

　　abort事件：传输被用户取消。
　　error事件：传输中出现错误。
　　loadstart事件：传输开始。
　　loadEnd事件：传输结束，但是不知道成功还是失败。
(5)CORS

下次介绍

参考内容：

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

https://dev.opera.com/articles/xhr2/

http://cssor.com/cross-origin-resource-sharing.html

https://xhr.spec.whatwg.org/#interface-formdata

http://www.html5rocks.com/en/tutorials/file/xhr2/

http://www.w3school.com.cn/xmldom/dom_http.asp

https://dev.opera.com/articles/dom-access-control-using-cors/

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest