转载请注明原文地址：http://www.jianshu.com/p/a18c35587c16
1、Ajax是什么？
是Asynchronous JavaScript and XML的缩写，一种能够向服务器请求额外的数据而无须卸载页面技术，能带来更好的用户体验。（From表单提交请求需要刷新页面，重新加载内容。）
2、XMLHttpRequest对象（简称XHR）
一个可以向服务器发送异步请求和解析服务器响应的API。也就是说，JavaScript代码不会等到服务器响应之后再执行。可以使用XHR对象取得新数据（服务器的内容响应），然后再通过DOM将新数据插入到页面中。
(1)创建XHR对象:使用XMLHttpRequest()构造函数
var xhr=new XMLHttpRequest();
兼容： IE7+,Firefox,Opera,Chrome,Safari均支持原生的XHR对象。
(2)XHR对象的用法：
1)一些关于XHR对象的属性，方法和事件：
属性：
responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是“test/xml”或“application/xml”,这个属性将保存着包含着响应数据的XML DOM文档。
status： 响应的HTTP状态。其中200为客户端成功接收到响应（初次加载页面的时候可能出现）；304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本（刷新页面的时候可能出现）。
statusText: HTTP状态的说明。status为200时，statusText为ok。status为304时，statusText为Not Modified
readyState: 该属性表示请求/响应过程的当前活动阶段。该属性的取值如下：
0:未初始化。尚未调用open()方法。
1:启动。已经调用open()方法，但尚未调用send()方法。
2:发送。已经调用send()方法，但尚未接受到响应。
3:接收。已经接受到部分响应数据。
4:完成。已经接收到全部的响应数据。
方法：
.open("method","url",boolean): 参数：method为请求的类型（get，post等），url为路径，boolean为是否异步发送请求。 调用该方法并不会真正发送请求，而只是启动一个请求以备发送。
.send(data):将请求发送到服务器。参数data是作为请求主体发送的数据，若不需要传数据，即data为null。服务器在收到响应后，响应的数据会自动填充XHR对象的属性。相关属性有responseText、responseXML、status、statusText、readyStatus
.abort():在接收到响应之前取消异步请求。
.setRequestHeader("name","value"):设置自定义的请求头部信息。
参数:name为自定义的头部字段的名称（不要使用浏览器正常发送的字段名称，并不是所有的浏览器都允许重写默认的头部信息），value为自定义的头部字段的值。
该方法的调用必须在调用open()方法之后且在调用send()方法之前。
xhr.open('method','url',boolean);
xhr.setRequestHeader('myHeader','myValue');
xhr.send(null);
.getResponseHeader('name'): 获取相应的响应头部信息。
参数：name为头部字段名称。返回一个对应的值的字符串。
xhr.getResponseHeader('Content-Type'); //'text/html'
.getAllResponseHeaders():返回一个包含所有头部信息（key-value）的长字符串。
xhr.getAllResponseHeaders(); //'Content-Type: text/html'
事件：
readystatechange(): readyState属性的值改变的会触发该事件。必须在open()方法前指定该事件处理程序以确保跨浏览器兼容性。
(3)发送Ajax一般过程:
1)创建XHR实例对象(xhr)
指定onreadystatechange事件处理程序
（两判断：①先判断xhr.readyState（if语句） ②再判断xhr.status(if-else语句)）。
2)为发送请求做准备(xhr.open(parame))
3)正式发送请求(xhr.send(parame/null))
关键代码：
//1、创建XHR对象
var xhr=new XMLHttpRequest();
console.dir(xhr);
//指定readystatechange事件
xhr.onreadystatechange=function(){
for(var i=0;i<=4;i++){
console.log(xhr.readyState);
}
if(xhr.readyState==4){
if (xhr.status>=200&&xhr.status<300||xhr.status==304) {
//服务器传来的数据为JSON
var data=JSON.parse(xhr.responseText);
console.log(data);
}else{
console.log(xhr.status);
}
}
}
//2、为发送请求做准备
xhr.open('method','url',true);
//3、正式发送请求。
xhr.send(null);
3、HTTP头部信息
每个HTTP请求和响应都会带有相应的头部信息，XHR对象也提供了操作这两种头部（请求头部和响应头部）信息的方法。
(1)默认情况下，在发送XHR请求（request）的同时，还会发送下列头部信息：
Accept:浏览器能够显示的字符集。
Accept-Charset:浏览器能够显示的字符集。
Accept-Encoding:浏览器能够处理的压缩编码。
Accept-Language:浏览器当前设置的语言。
Connection: 浏览器与服务器之间的连接类型。
Cookie:当前页面设置的任何cookie
Host:发出请求的页面所在域。
Referer:发出请求的页面的URL.(该单词正确拼法是referrer)
User-Agent:浏览器的用户代理字符串。
不同浏览器实际发送的头部信息会有所不同，但以上列出的基本上是所有浏览器都会发送的。
(2)操作HTTP头部信息的几个方法（具体使用方法查看前面说明）：
.setRequestHeader("name","value")
.getResponseHeader('name')
.getAllResponseHeaders()
网友评论