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, two
client.send();
2、获取ResponseHeader
getAllResponseHeaders
getResponseHeader(header) //只能拿到限制以外（即被视为safe）的header字段，而不是全部字段
3、设定response数据类型
level1 overrideMimeType
level2 xhr.responseType
4、获取response数据
xhr.response ""
xhr.responseText ""
xhr.responseXML null
5、追踪状态
利用onreadystatechange事件
0 |
UNSENT (初始状态，未打开) |
此时xhr对象被成功构造，open()方法还未被调用 |
1 |
OPENED (已打开，未发送) |
open()方法已被成功调用，send()方法还未被调用。注意：只有xhr处于OPENED状态，才能调用xhr.setRequestHeader()和xhr.send(),否则会报错 |
2 |
HEADERS_RECEIVED(已获取响应头) |
send()方法已经被调用, 响应头和响应状态已经返回 |
3 |
LOADING (正在下载响应体) |
响应体(response entity body)正在下载中，此状态下通过xhr.response可能已经有了响应数据 |
4 |
DONE (整个数据传输过程结束) |
整个数据传输过程结束，不管本次请求是成功还是失败 |
6、设置超时时间
xhr.timeout7、获取上传下载进度
8、可以发送的数据类型
-
ArrayBuffer -
Blob -
Document -
DOMString -
FormData -
null
-
如果
data是Document类型，同时也是HTML Document类型，则content-type默认值为text/html;charset=UTF-8;否则为application/xml;charset=UTF-8； -
如果
data是DOMString类型，content-type默认值为text/plain;charset=UTF-8； -
如果
data是FormData类型，content-type默认值为multipart/form-data; boundary=[xxx] -
如果
data是其他类型，则不会设置content-type的默认值
9、关于xhr.withCredentials
withCredentials默认为false，跨域时默认不能携带认证信息，例如Cookie，若需要，则设置为true，同时服务端Access-Control-Allow-Credentials要设置为true
Access-Control-Allow-Origin设置为请求页面的域名，不能写*
10、
onreadystatechange |
每当xhr.readyState改变时触发；但xhr.readyState由非0值变为0时不触发。 |
onloadstart |
调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。 |
onprogress |
xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每50ms触发一次。 |
onload |
当请求成功完成时触发，此时xhr.readystate=4 |
onloadend |
当请求结束（包括请求成功和请求失败）时触发 |
onabort |
当调用xhr.abort()后触发 |
ontimeout |
xhr.timeout不等于0，由请求开始即onloadstart开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件。 |
onerror |
在请求过程中，若发生Network error则会触发此事件（若发生Network error时，上传还没有结束，则会先触发xhr.upload.onerror，再触发xhr.onerror；若发生Network error时，上传已经结束，则只会触发xhr.onerror）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是4xx时，并不属于Network error，所以不会触发onerror事件，而是会触发onload事件。 |
11、事件触发顺序
-
触发
xhr.onreadystatechange(之后每次readyState变化时，都会触发一次) -
触发
xhr.onloadstart
//上传阶段开始： -
触发
xhr.upload.onloadstart -
触发
xhr.upload.onprogress -
触发
xhr.upload.onload -
触发
xhr.upload.onloadend
//上传结束，下载阶段开始： -
触发
xhr.onprogress -
触发
xhr.onload -
触发
xhr.onloadend