Ajax、XMLHttpRequest對象與HTTP頭部信息


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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 國家電網公司企業標準(Q/GDW)- 面向對象的用電信息數據交換協議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 11,123評論 6 13
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,881評論 18 139
  • Ajax:Asynchronous JavaScript + XML的簡寫。Ajax技術的核心是XMLHttpRe...
    exialym閱讀 889評論 0 8
  • Ajax和XMLHttpRequest 我們通常將Ajax等同于XMLHttpRequest,但細究起來它們兩個是...
    changxiaonan閱讀 2,266評論 0 2
  • ajax作為前端開發必需的基礎能力之一,你可能會使用它,但并不一定懂得其原理,以及更深入的服務器通信相關的知識。在...
    蕭玄辭閱讀 840評論 0 0