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

在看了一些文章之后，對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);
        })