摘要：在看了一些文章之后，對有了初步的一些了解。所以應(yīng)該盡量避免使用同步請求。所以在同步請求的情況下，是無法進(jìn)行跨域的。默認(rèn)值是空字符串只有請求完成時(shí)，該屬性才會有正確的值如果請求沒完成，該屬性的值可能是或。表示請求的方式，或者是。

在看了一些文章之后，對Ajax有了初步的一些了解。Ajax的定義不用多說，主要記錄一下Ajax的簡單實(shí)現(xiàn)。
第一種方式是通過xhr(XMLHttpRequest)方式來發(fā)送Ajax請求。最基礎(chǔ)簡單的步驟是三步：創(chuàng)建一個(gè)xhr對象；調(diào)用open()方法，調(diào)用send()方法。
創(chuàng)建一個(gè)xhr對象是再簡單不過的了 var xhr = new XMLHttpRequest();

open()方法是創(chuàng)建一個(gè)請求 xhr.open("POST","/serve",true);
open()方法有三個(gè)參數(shù)，分別是：

method: 請求的方式，如GET/POST，該參數(shù)不區(qū)分大小寫；

url： 請求的地址，該地址可以是相對的（相對于當(dāng)前網(wǎng)頁的url路徑），也可以是絕對的；

async: 默認(rèn)值為true，即為異步請求，若async=true，則表示為同步請求。

一般默認(rèn)使用的是異步請求。同步請求的時(shí)候會出現(xiàn)一些限制：

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

不滿足以上任意一個(gè)限制，就會拋出錯(cuò)誤。

xhr.timeout 設(shè)置請求超時(shí)時(shí)間，如果值為0，說明不限時(shí)，在這樣的情況下，如果服務(wù)器一直沒有響應(yīng)，會出現(xiàn)頁面堵塞的情況，會影響用戶的其它交互。所以應(yīng)該盡量避免使用同步請求。

xhr.withCredentails 跨域請求設(shè)置 默認(rèn)值為false。跨域請求的時(shí)候需要手動設(shè)置為true。所以在同步請求的情況下，是無法進(jìn)行跨域的。

xhr.responseType 設(shè)置請求返回的數(shù)據(jù)格式 這個(gè)屬性是在xhr標(biāo)準(zhǔn)2中才有的，在標(biāo)準(zhǔn)1里面提供的是 overrideMimeType()方法。
overrideMimeType()方法的作用是重寫response的content-type。比如說，Server端給客戶端返回了一份document或xml文檔，但希望的是通過 xhr.response拿到的是一個(gè)DOM對象，那么就可以通過xhr.overrideMimeType("text/xml;charest = utf-8")來實(shí)現(xiàn)。
responseType用來指定xhr.response的數(shù)據(jù)類型，默認(rèn)的xhr.response的數(shù)據(jù)類型是String字符串。不同的responseType的值對應(yīng)不同的數(shù)據(jù)類型，如"text"對應(yīng)String字符串；"document"對應(yīng)Document對象；"json"對應(yīng)JavaScript對象；"blob"對應(yīng)Blob對象；"arrayBuffer"對應(yīng)ArrayBuffer對象。
雖然在標(biāo)準(zhǔn)2中，2種方式都存在，且都可以設(shè)置響應(yīng)返回的數(shù)據(jù)格式，但明顯xhr.responseType功能強(qiáng)大很多，也方便使用，能做到xhr.overrideMimeType()所做到的。

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

xhr.response
默認(rèn)值是空字符串""；
只有請求完成時(shí)，該屬性才會有正確的值；
如果請求沒完成，該屬性的值可能是""或null。（具體的值跟responseType的值有關(guān)，如果responseType的值為""或"text",屬性的值為""；否則值為null）

xhr.responseText
默認(rèn)值是空字符串""；
只有當(dāng)responseType為""或"text"時(shí),才能調(diào)用該屬性，否則會拋出錯(cuò)誤；
只有請求成功時(shí)，才有正確值，否則值為空字符串""

xhr.responseXML
默認(rèn)值為null;
只有當(dāng)responseType為""、"text"、"document"時(shí),才能調(diào)用該屬性，否則會拋出錯(cuò)誤；
只有請求成功并返回?cái)?shù)據(jù)被正確解析時(shí)，才有正確值，否則值為null

send()方法是發(fā)送數(shù)據(jù) xhr.send(data);
send()方法的參數(shù)data有6種類型：ArrayBuffer；Blob；Document；DOMString；FormData；null。 如果是GET請求，一般不傳參數(shù)或者傳null參數(shù)。如果是在斷網(wǎng)情況下，該方法會拋出錯(cuò)誤，所以調(diào)用該方法的時(shí)候，需要用try-catch來捕獲異常。

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

請求發(fā)送之后還要處理請求返回的數(shù)據(jù)，可以調(diào)用onload()方法或者onreadystatechange()方法。readyState這個(gè)屬性可以追蹤Ajax請求的當(dāng)前狀態(tài)，這個(gè)屬性是可讀屬性，總共有5種不同的值（0-4），分別對應(yīng)xhr的不同階段，如3表示LOADING（正在下載響應(yīng)體）。每次xhr.readyState的值發(fā)生變化的時(shí)候，都會觸發(fā)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來發(fā)送Ajax請求
通過fetch獲取后臺數(shù)據(jù)的代碼很簡單，它會返回一個(gè)Promise對象，有多個(gè)參數(shù)。

url 請求的地址，該參數(shù)為必選。

method 表示請求的方式，GET或者是POST。

body POST請求的參數(shù)，需要放在body里面，而GET請求的參數(shù)可以直接放在URL中

headers 設(shè)置請求的頭信息，可在里面放指定的提交方式、指定的獲取類型等信息

默認(rèn)情況下，fetch不會從服務(wù)端發(fā)送或接收任何cookies。
如果要發(fā)送cookies，必須發(fā)送憑據(jù)頭。

 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);
        })