ajax初探

在看了一些文章以後，對Ajax有了初步的一些瞭解。Ajax的定義不用多說，主要記錄一下Ajax的簡單實現。
第一種方式是經過xhr(XMLHttpRequest)方式來發送Ajax請求。最基礎簡單的步驟是三步：建立一個xhr對象；調用open()方法，調用send()方法。
建立一個xhr對象是再簡單不過的了 var xhr = new XMLHttpRequest();

open()方法是建立一個請求 xhr.open('POST','/serve',true);
open()方法有三個參數，分別是：

• method: 請求的方式，如GET/POST，該參數不區分大小寫；
• url： 請求的地址，該地址能夠是相對的（相對於當前網頁的url路徑），也能夠是絕對的；
• async: 默認值爲true，即爲異步請求，若async=true，則表示爲同步請求。

通常默認使用的是異步請求。同步請求的時候會出現一些限制：

xhr.timeout = 0;
xhr.withCredentails = false;
xhr.responseType = "";

不知足以上任意一個限制，就會拋出錯誤。

xhr.timeout 設置請求超時時間，若是值爲0，說明不限時，在這樣的狀況下，若是服務器一直沒有響應，會出現頁面堵塞的狀況，會影響用戶的其它交互。因此應該儘可能避免使用同步請求。

xhr.withCredentails 跨域請求設置 默認值爲false。跨域請求的時候須要手動設置爲true。因此在同步請求的狀況下，是沒法進行跨域的。

xhr.responseType 設置請求返回的數據格式 這個屬性是在xhr標準2中才有的，在標準1裏面提供的是 overrideMimeType()方法。
overrideMimeType()方法的做用是重寫response的content-type。好比說，Server端給客戶端返回了一份document或xml文檔，但但願的是經過 xhr.response拿到的是一個DOM對象，那麼就能夠經過xhr.overrideMimeType('text/xml;charest = utf-8')來實現。
responseType用來指定xhr.response的數據類型，默認的xhr.response的數據類型是String字符串。不一樣的responseType的值對應不一樣的數據類型，如"text"對應String字符串；"document"對應Document對象；"json"對應JavaScript對象；"blob"對應Blob對象；"arrayBuffer"對應ArrayBuffer對象。
雖然在標準2中，2種方式都存在，且均可以設置響應返回的數據格式，但明顯xhr.responseType功能強大不少，也方便使用，能作到xhr.overrideMimeType()所作到的。

除了上面提到的xhr.response，xhr提供了另外2種屬性來獲取請求返回的數據：xhr.responseText;xhr.responseXML。

• xhr.response
  默認值是空字符串""；
  只有請求完成時，該屬性纔會有正確的值；
  若是請求沒完成，該屬性的值多是""或null。（具體的值跟responseType的值有關，若是responseType的值爲""或"text",屬性的值爲""；不然值爲null）
• xhr.responseText
  默認值是空字符串""；
  只有當responseType爲""或"text"時,才能調用該屬性，不然會拋出錯誤；
  只有請求成功時，纔有正確值，不然值爲空字符串""
• xhr.responseXML
  默認值爲null;
  只有當responseType爲""、"text"、"document"時,才能調用該屬性，不然會拋出錯誤；
  只有請求成功並返回數據被正確解析時，纔有正確值，不然值爲null

send()方法是發送數據 xhr.send(data);
send()方法的參數data有6種類型：ArrayBuffer；Blob；Document；DOMString；FormData；null。 若是是GET請求，通常不傳參數或者傳null參數。若是是在斷網狀況下，該方法會拋出錯誤，因此調用該方法的時候，須要用try-catch來捕獲異常。

try{
    xhr,send(data);
}catch(e){
  //...
};

請求發送以後還要處理請求返回的數據，能夠調用onload()方法或者onreadystatechange()方法。readyState這個屬性能夠追蹤Ajax請求的當前狀態，這個屬性是可讀屬性，總共有5種不一樣的值（0-4），分別對應xhr的不一樣階段，如3表示LOADING（正在下載響應體）。每次xhr.readyState的值發生變化的時候，都會觸發xhr.onreadystatechange()事件。

完整例子以下：

var xhr = new XMLHttpRequest();
        xhr.responseType = 'json';
        xhr.open('GET', 'https://cnodejs.org/api/v1/topics', true);
        xhr.onload = function () {
            //若是請求成功
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304)             
            {
                var res = this.response;
                console.log(res);
                //do successCallback
            }
        }
        xhr.send();

第二種方式是經過fetch來發送Ajax請求
經過fetch獲取後臺數據的代碼很簡單，它會返回一個Promise對象，有多個參數。

• url 請求的地址，該參數爲必選。
• method 表示請求的方式，GET或者是POST。
• body POST請求的參數，須要放在body裏面，而GET請求的參數能夠直接放在URL中
• headers 設置請求的頭信息，可在裏面放指定的提交方式、指定的獲取類型等信息

默認狀況下，fetch不會從服務端發送或接收任何cookies。
若是要發送cookies，必須發送憑據頭。

fetch('https://cnodejs.org/api/v1/topics',{
            method: 'GET',
            credentials: 'include',
        })
        .then((res)=>{
            return res.json()
        })
        .then((res)=>{
            console.log(res);
        })

完整例子以下：

fetch('https://cnodejs.org/api/v1/topics',{
            method: 'GET',
            headers: new Headers({
                'Accept': 'application/json'
            })
        })
        .then((res)=>{
            return res.json()
        })
        .then((res)=>{
            console.log(res);
        })