神马是XMLHttpRequest呢？
我怀着好奇心查找了一下，w3c上面是这样说的。
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想，因为您能够：
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
w3c上只是大概说明了一下它的左右，但是它的具体使用还不是很了解，然后我就找到 阮老师写的博客，看完受益匪浅啊。
Ajax 和 XMLHttpRequest 的关系？
AJAX代表异步JavaScript和XML。 AJAX是一种新技术，借助XML，HTML，CSS和Java Script创建更好，更快速，更具交互性的Web应用程序。
AJAX基于以下开放标准：
基于浏览器的演示使用HTML和级联样式表（CSS）。
数据以XML格式存储，并从服务器中提取。 幕后数据使用浏览器中的XMLHttpRequest对象进行提取。 JavaScript使一切发生。 可以看出来，ajax是一种技术方案，但是不是一种新的技术。它的依赖就是现有的css／html／js，核心依赖是浏览器提供的 XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
所以，我们使用 XMLHttpRequest对象来发送一个Ajax请求。
XMLHttpRequest Level 2中新增了以下功能：
-
可以发送跨域请求，在服务端允许的情况下；
-
支持发送和接收二进制数据；
-
新增formData对象，支持发送表单数据；
-
发送和获取数据时，可以获取进度信息；
-
可以设置HTTP请求的时限；
兼容性：
-
IE8/IE9、Opera Mini 完全不支持
xhr对象 -
IE10/IE11部分支持，不支持
xhr.responseType为json -
部分浏览器不支持设置请求超时，即无法使用
xhr.timeout -
部分浏览器不支持
xhr.responseType为blob
下面是XMLHttpRequest发送Ajax请求的简单示例代码：
function sendAjax() { //构造表单数据 var formData = new FormData(); formData.append('username', 'johndoe'); // 给后台传的参数 formData.append('id', 123456); //创建xhr对象 var xhr = new XMLHttpRequest(); //设置xhr请求的超时时间 xhr.timeout = 3000; //设置响应返回的数据格式 xhr.responseType = "text"; //创建一个 post 请求，采用异步 xhr.open('POST', '/server', true); //注册相关事件回调处理函数 xhr.onload = function(e) { if(this.status == 200||this.readyState == 4){ // this.status == 200 处理的结果是OK的。 // this.readyState == 4 是表示后台处理完成了。 // xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。 // xhr.status：服务器返回的状态码，等于200表示一切正常。
// xhr.responseText：服务器返回的文本数据
// xhr.responseXML：服务器返回的XML格式的数据
// xhr.statusText：服务器返回的状态文本。
alert(this.responseText); }else{ alert( this.statusText ); } }; xhr.ontimeout = function(e) { ... }; xhr.onerror = function(e) { ... }; xhr.upload.onprogress = function(e) { ... }; //发送数据 xhr.send(formData);} 一. HTTP请求时限
var xhr = new XMLHttpRequest ;
//将最长等待时间设为3000毫秒,过了这个时限，就自动停止HTTP请求。
xhr.timeout = 3000; // 毫秒
xhr.ontimeout = function(event){ // 回调函数
alert(" 请求超时！")
}
二. FormData 对象
html5 新增的一个FormData 对象，可以模拟表单
1 // 首先，新建一个FormData对象。 2 var formData = new FormData(); 3 //然后，为它添加表单项。 4 formData.append('username', '张三'); 5 formData.append('id', 123456); 6 //最后，直接传送这个FormData对象。这与提交网页表单的效果，完全一样。 7 xhr.send(formData); 8 9 //FormData对象也可以用来获取网页表单的值。10 var form = document.getElementById('myform');11 var formData = new FormData(form);12 formData.append('secret', '123456'); // 添加一个表单项13 xhr.open('POST', form.action);14 xhr.send(formData); 三. 上传文件
这个会在下章详细介绍，这块就不多说了！
四. 跨域资源共享（CORS）
这个我还是不很清楚，还没有在项目中遇到，以后再来补充！
五. 接收二进制数据
1 //从服务器取回二进制数据，较新的方法是使用新增的responseType属性。如果服务器返回 //文本数据，这个属性的值是"TEXT"，这是默认值。较新的浏览器还支持其他值，也就说可//以接收其他格式的数据。 2 //你可以把responseType设为blob，表示服务器传回的是二进制对象。 3 4 var xhr = new XMLHttpRequest(); 5 xhr.open('GET', '/path/to/image.png'); 6 xhr.responseType = 'blob'; 7 //接收数据的时候，用浏览器自带的Blob对象即可。 8 var blob = new Blob([xhr.response], {type: 'image/png'}); 9 //注意，是读取xhr.response，而不是xhr.responseText。10 11 //你还可以将responseType设为arraybuffer，把二进制数据装在一个数组里。12 var xhr = new XMLHttpRequest();13 xhr.open('GET', '/path/to/image.png');14 xhr.responseType = "arraybuffer";15 //便利数组16 var arrayBuffer = xhr.response;17 if (arrayBuffer) {18 var byteArray = new Uint8Array(arrayBuffer);19 for (var i = 0; i < byteArray.byteLength; i++) {20 // do something21 }22 }
以上就是XMLHttpRequest对象的一些介绍和用法，还有很多没有整理，欢迎大家吐槽，拍砖！！！