轉載請注明原文地址: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()