轉載請注明原文地址：http://www.lxweimin.com/p/a18c35587c16
1、Ajax是什么？
是Asynchronous JavaScript and XML的縮寫，一種能夠向服務器請求額外的數據而無須卸載頁面技術，能帶來更好的用戶體驗。（From表單提交請求需要刷新頁面，重新加載內容。）
2、XMLHttpRequest對象（簡稱XHR）
一個可以向服務器發送異步請求和解析服務器響應的API。也就是說，JavaScript代碼不會等到服務器響應之后再執行?？梢允褂肵HR對象取得新數據（服務器的內容響應），然后再通過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()
