WEB前端第六十課——原生Ajax與HTTP協議

1.Ajax簡述

　　全名：Asynchronous JavaScript and xml，

　　　　是指圍繞「由js向服務器發起http請求」這個功能而開發的一整套完整的方法。

　　　　所以，引入jQuery封裝好的Ajax會浪費不少資源，實際利用到的功能只是不多一部分，

　　　　而原生ajax則能夠根據實際需求編寫代碼，減小內存耗用。

　　原生Ajax模塊在處理網絡請求時，包括如下四步驟：

　　　　⑴ 建立「xhr」對象

　　　　⑵ 構建「xhr」屬性和方法

　　　　⑶ 經過「xhr」對象發出HTTP請求

　　　　⑷ 經過「xhr」對象的方法接收服務器回傳的數據

　　說明：

　　　　Ajax能夠發出同步請求，也能夠發出異步請求。

　　　　但多數狀況下指的是異步請求，由於同步的Ajax請求對瀏覽器會產生「阻塞效應」。

2.xhr對象

　　在Ajax中對整個請求從建立到發送，有着一整套嚴格的流程標準。

　　須要至少如下幾個步驟：

　　　　⑴ 經過 XMLHttpRequest 類建立 xhr 對象；

　　　　⑵ 爲 xhr 對象添加屬性和回調方法；

　　　　⑶ xhr 對象執行 open() 方法，設置請求發送的目標url地址；

　　　　⑷ xhr 對象執行 send() 方法，發出請求。

　　語法：var xhr = new XMLHttpRequest();

　　說明：

　　　　XMLHttpRequest 對象用於在「瀏覽器」與「服務器」之間傳送數據。

3.xhr對象經常使用屬性和方法

　　⑴ onreadystatechange 屬性

　　　　該屬性指向一個回調函數，當頁面加載狀態發生改變時，readyState屬性值就會隨即發生變化，

　　　　此時，readystatechange屬性所對應的回調函數就會自動被調用。

　　　　語法：xhr.onreadystatechange = function(){}

　　⑵ readyState 屬性

　　　　該屬性爲只讀屬性，用一個整數和對應的常量來表示XMLHttpRequest請求當前所處的狀態。

　　　　通常只會用在 onreadystatechange 事件的回調函數中，

　　　　經過判斷 readyState屬性的值，進而執行不一樣狀態對應的函數。

　　　　語法：xhr.onreadystatechange = function(){

　　　　　　　　　if(xhr.readystate==n){

　　　　　　　　　　　//執行相應的函數

　　　　　　　　　}

　　　　　　　}

　　　　readyState屬性值說明：

　　　　　　0 值，對應常量「UNSENT」，

　　　　　　　　表示XMLHttpRequest實例已經生成，可是 open() 方法尚未被調用；

　　　　　　1 值，對應常量「OPEND」，

　　　　　　　　表示 send() 方法還沒被調用，仍可使用 setRequestHeader() 設定HTTP請求頭；

　　　　　　2 值，對應常量「HEADERS_RECEIVED」

　　　　　　　　表示 send() 方法已經執行，而且頭信息和狀態碼已經收到；

　　　　　　3 值，對應常量「LOADING」，

　　　　　　　　表示正在接收服務器傳來的body部分的數據，若是 responseType的屬性

　　　　　　　　是 text 或者 空字符串，responseText 就會包含已經收到的部分信息；

　　　　　　4 值，對應常量「DONE」，

　　　　　　　　表示服務器數據已經徹底接收，或者本次接收已經失敗了。

　　⑶ status 屬性

　　　　表示本次請求所獲得的的HTTP狀態碼，是一個整數。

　　　　語法：if(xhr.readyState==4){

　　　　　　　　　if(xhr.status==200){

　　　　　　　　　　　//請求通訊成功

　　　　　　　　　}

　　　　　　　}

　　　　說明：

　　　　　　該屬性爲只讀屬性；

　　　　　　該屬性有如下幾種可能值：

　　　　　　　　200，OK，訪問正常；　　//通常狀況下做爲通訊成功的標誌。

　　　　　　　　301，Moved Permanently，永久移動；

　　　　　　　　302，Move Temporarily，暫時移動；

　　　　　　　　304，Not Modified，未修改；

　　　　　　　　307，Temporary Redirect，暫時重定向；

　　　　　　　　401，Unauthorized，未受權；

　　　　　　　　403，Forbidden，禁止訪問；

　　　　　　　　404，Not Found，未發現指定網址；

　　　　　　　　500，Internal Server Error，服務器發生錯誤。

　　⑷ statusText 屬性

　　　　表示服務器發送的狀態提示，是一個只讀字符串。

　　　　語法：xhr.shtatusText;

　　　　說明：該屬性不一樣於 status，屬性值爲返回狀態碼所對應的狀態信息，如「OK」。

　　⑸ responseText 屬性

　　　　用於獲取從服務器接收到的 字符串 內容，該屬性爲只讀。

　　　　若是本次請求沒有成功或者數據不完整，則屬性值等於 null；

　　　　若是服務器返回的數據格式是 JSON，則可使用 responseText屬性進行數據解析。

　　　　語法：xhr.responseText;

　　　　說明：

　　　　　　後臺返回數據時，使用 echo json_encode();進行編碼；

　　　　　　前臺接收數據時，直接接收到的返回結果爲字符串，使用 JSON.parse();進行解析。

　　⑹ open() 方法

　　　　表示要將請求發往目標地址，但只是設置而不是發送。

　　　　語法：xhr.open('請求類型','目標url地址',是否異步);

　　　　說明：

　　　　　　第一個參數「請求類型」用於設置 get 或 post 請求；

　　　　　　第二個參數「url地址」用於設置請求要發送到的地址連接；

　　　　　　第三個參數爲布爾值，用於設置是否異步發送，默認false表示同步發送

　　⑺ setRequestHeader() 方法

　　　　用於設置HTTP頭信息。

　　　　語法：xhr.setRequestHeader('key','value');

　　　　說明：

　　　　　　本方法必須在 open() 以後、send() 以前被調用；

　　　　　　該方法用於設置在請求發送時，一併被髮出的一些補充信息。

　　⑻ send() 方法

　　　　用於實際發出HTTP請求。

　　　　語法：xhr.send(formData);

　　　　說明：

　　　　　　send() 方法的參數是表單數據，爲post請求準備；

　　　　　　若是請求類型是 get請求，則參數直接寫 null 便可。

4.Ajax請求代碼示例

<script>
    var uName = document.querySelector('.userName').value;
    var uCode = document.querySelector('.userCode').value;
    var xhr=new XMLHttpRequest();   //建立對象，準備發送Ajax請求
    xhr.onreadystatechange=function () {    //監聽後臺接收請求狀態的變化
        if (xhr.readyState==4){             //判斷當前請求進行到何種狀態，屬性值 4 表示後臺已經接收到前臺請求
            if (xhr.status==200){           //判斷前臺是否準確接收到後臺反饋的數據，屬性值 200 表示通訊成功
                console.log(xhr.responseText);  //獲取後臺反饋的完整數據，json串
                console.log(typeof xhr.responseText);   //返回結果爲 string 類型
                console.log(JSON.parse(xhr.responseText));   //將返回結果轉換爲對象
            }
        }
    }
    xhr.open('get','xhr.php?name=uName&code=uCode',true);
    xhr.send(null);
</script>