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
本文出自 “Eason's hcc” 博客，请务必保留此出处http://hcc0926.blog.51cto.com/172833/1612929
原文地址：http://hcc0926.blog.51cto.com/172833/1612929
