一、ajax与XMLHttpRequset关系
ajax:与服务器进行异步交互的技术，是一种技术方案，其中最核心的依赖是浏览器提供的的XMLHttpRequest对象，是这个对象使得浏览器可以发出http请求和 接收http响应。
XMLHttpRequest:是一个浏览器接口，使得js可以进行http(s)通信。XMLHttpRequest标准分为level1 和 level2
二、回顾下老版本XMLHttpRequest对象
1、XMLHttpRequest对象的属性
xhr.onreadystatechange //请求状态变化的事件触发器
xhr.readyState //表示XMLHttpRequest对象的状态，0：未初始化，对象已创建，未调用open()
// 1:open()方法已调用，未调用send()方法
//2:send()方法已调用，未开始接收数据
//3:正在接收数据，未接收完成
//4:数据接收完毕
xhr.status //服务器返回的状态码
xhr.responseText //服务器返回的文本数据
xhr.responseXML //服务器响应的xml数据
xhr.statusText //服务器返回的状态文本
2、XMLHttpRequest对象的方法
xhr.open('GET',data,func,true) //制定和服务器进行交互的http方法，url地址，及其他信息
xhr.send() //向服务器发送请求
xhr.setRequestHeader() //设置http请求头信息，需要在open()后调用
xhr.getResponseHeader(header) //获取响应头信息中制定键名header对应的值
xhr.getAllResponseHeaders() //获取所以响应头信息
xhr.abort() //停止当前http请求
3、应用实例
//创建一个XMLHttpRequest对象实例
var xhr = new XMLHttpRequest();
//向服务器发送一个http请求
//参数 true 表示异步操作，false表示同步
xhr.open('GET','test.php',true);
xhr.send();
//接着等待接收服务器的回应，这时需要监控XMLHttpRequest对象的状态变化，指定回调函数
xhr.onreadystatechange = function () {
// readyState 表示XMLHttpRequest对象的状态，4表示数据已经接收完毕
// status 表示服务器返回的状态码
if(xhr.readyState == 4 && xhr.status == 200){
// 服务器返回的文本数据
alert(xhr.responseText);
}else{
// 服务器返回的状态文本
alert(xhr.statusText);
}
};
4、老版本XMLHttpRequest对象的缺点：
1、只支持文本数据是传输，无法读取和上传二进制文件
2、传输和接收数据时，没有进度信息，只有提示有没有完成
3、受‘同源策略’ 限制，不能进行跨域访问
三、新版本XMLHttpRequest对象的新功能
1、可以设置http请求的时限
2、可以使用formData对象管理表单数据
3、可以上传文件
4、可以跨域请求
5、可以获取服务器端二进制数据
6、可以获取数据传输的进度信息
1、http请求时限
有时ajax请求很慢，无法预知要花多少时间，如果网速慢的话，用户则会等很久
使用timeOut属性，可以设置请求时限
//将等待时间设为3000毫秒，过了这个时限，则停止http请求
xhr.timeout = 3000;
//与之对应的还有timeout回调函数
xhr.ontimeout = function (event) {
alert('请求超时');
}
目前，Opera、Firefox和IE 10支持该属性，IE 8和IE 9的这个属性属于XDomainRequest对象，而Chrome和Safari还不支持。
2、formData对象
ajax操作往往用来传递表单数据，为了方便表单处理，h5新增了一个formData对象，可以模拟表单
//实例化一个formData对象
var formData = new formData();
//添加表单项
formData.append('userid','11');
formData.append('username','echo');
//提交表单，与网页提交表单的效果完全一样
xhr.send(formData);
3、上传文件
//假定files是一个"选择文件"的表单元素（input[type="file"]），我们将它装入FormData对象。
var formData = new FormData();
for (var i = 0; i < files.length;i++) {
formData.append('files[]', files[i]);
}
xhr.send(formData);
4、跨域资源共享（CORS）
//使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。
// 如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。
xhr.open('GET', 'http://other.server/and/path/to/script');
//目前，除了IE 8和IE 9，主流浏览器都支持CORS，IE 10也将支持这个功能