摘要：本文主要是我學(xué)習(xí)的筆記，不涉及到原理，只是記錄如何使用。成功的含義取決于方法資源已被提取并在消息正文中傳輸。是請求鏈接到服務(wù)器，服務(wù)器響應(yīng)錯誤后服務(wù)器返回瀏覽器的狀態(tài)碼。是指響應(yīng)時間，開始請求到接收到響應(yīng)開始處理的時間，單位為。

本文主要是我學(xué)習(xí)ajax的筆記，不涉及到原理，只是記錄如何使用。如果有錯歡迎各位大佬指出。提前先轉(zhuǎn)一篇寫的非常全面的博客你真的會使用XMLHttpRequest嗎？

1、ajax是Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。它依賴的是現(xiàn)有的CSS/HTML/Javascript，ajax依靠瀏覽器提供的XMLHttpRequest對象讓瀏覽器發(fā)出HTTP請求與接收HTTP響應(yīng)，實(shí)現(xiàn)在頁面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互

2、依靠對象
XMLHttpRequest對象
fetch對象 （兼容性較弱）

我在當(dāng)前html文件下偽造了一個hello.json的文檔，作為服務(wù)器資源。

控制臺報錯，顯示用file協(xié)議是不支持的，跨源請求僅支持http, data, chrome, chrome-extension, https協(xié)議方案

所以我們打開終端gitbash，切換到html當(dāng)前文件下，輸入http-server打開本地服務(wù)器

打開服務(wù)器后，返回兩個地址，125的地址是本地局域網(wǎng)環(huán)境的 ip，127的ip是本機(jī) ip。
這兩個地址的區(qū)別，可以點(diǎn)擊這個鏈接查看
復(fù)制這個IP地址到瀏覽器上，打開對應(yīng)的html文件，得到了對應(yīng)的ajax數(shù)據(jù)

采用同步的方式，也能獲得數(shù)據(jù)，但是時間比較長，差不多22ms（個人電腦上的數(shù)據(jù)，并非實(shí)驗(yàn)數(shù)據(jù)），效率不高。
把參數(shù)三把false改成true，就可以變異步。xhrsend之后立刻就執(zhí)行返回數(shù)據(jù)的操作，導(dǎo)致沒有數(shù)據(jù)返回。
如果需要采用異步的方式獲取ajax數(shù)據(jù)，就需要綁定load事件，等加載后再執(zhí)行var data= xhr.responseText，才返回數(shù)據(jù)

異步綁定數(shù)據(jù)，需要綁定load事件

 var xhr =new XMLHttpRequest()
//     xhr.open("GET","hello.json",true)
//     xhr.send()
//     xhr.addEventListener("load",function(){
//     var data= xhr.responseText
//     console.log(data)
//     console.log(xhr.status)
//     })  

status是XMLHttpRequest對象的一個屬性，表示響應(yīng)的HTTP狀態(tài)碼。
該狀態(tài)碼用于表示特定 HTTP 請求是否已成功完成，這個狀態(tài)碼是服務(wù)器發(fā)給瀏覽器的

這篇博客（Ajax關(guān)于readyState（狀態(tài)值）和status（狀態(tài)碼）的研究） 上寫status其余狀態(tài)碼比較詳細(xì)
也可以查閱mdn，我這里只是挑出幾個常用的狀態(tài)碼
3.1) 200 請求成功。成功的含義取決于HTTP方法：

GET：資源已被提取并在消息正文中傳輸。

HEAD：實(shí)體標(biāo)頭位于消息正文中。

POST：描述動作結(jié)果的資源在消息體中傳輸。

TRACE：消息正文包含服務(wù)器收到的請求消息

3.2)404 Not Found
請求失敗，被廣泛應(yīng)用于當(dāng)服務(wù)器不想揭示到底為何請求被拒絕或者沒有其他適合的響應(yīng)可用的情況下。

3.3)304 Not Modified(未改變)
如果客戶端發(fā)送了一個帶條件的 GET 請求且該請求已被允許，而文檔的內(nèi)容（自上次訪問以來或者根據(jù)請求的條件）并沒有改變，則服務(wù)器應(yīng)當(dāng)返回這個狀態(tài)碼
未改變說明無需再次傳輸請求的內(nèi)容，也就是說可以使用緩存的內(nèi)容。

var xhr= new XMLHttpRequest()
xhr.timeout=13
// 注意timeout時間要根據(jù)收到j(luò)son文件響應(yīng)時間來設(shè)置，小于這個時間會輸出timeout
xhr.open("GET","hello.json",true)
xhr.send()

xhr.addEventListener("load",function(){
    console.log(xhr.status)
    if((xhr.status>=200 && xhr.status<300)||xhr.status==304){
        console.log(this.responseText)
    }else{
        console.log("fail")
    }
})
xhr.ontimeout=function(e){
    console.log("timeout")
}
xhr.onerror=function(){
    console.log("error")//一般是連接失敗報錯
}

坑1：onerror和status中的錯誤狀態(tài)的區(qū)別
onerror是定義一個事件，當(dāng)ajax連接失?。g覽器發(fā)送ajax請求根本沒有連接到服務(wù)器）瀏覽器自己輸出error。status是請求鏈接到服務(wù)器，服務(wù)器響應(yīng)錯誤后服務(wù)器返回瀏覽器的狀態(tài)碼。詳情可以查看這個鏈接
坑2：XMLHttpRequest提供了timeout的屬性，為了防止請求過了很久還沒有成功，白白占用的網(wǎng)絡(luò)資源。timeout是指響應(yīng)時間，開始請求到接收到響應(yīng)（開始處理）的時間，單位為ms。
比如我設(shè)置timeout時間為5ms

結(jié)果請求超時，返回的是timeout

timeout對應(yīng)console臺，應(yīng)該是以下紅框的總時間。

timing時間各個時間解析

XMLHttpRequest 的一個屬性，用來表示當(dāng)前XMLHttpRequest對象處于什么狀態(tài)
有5個值，mdn的解析

var xhr= new XMLHttpRequest()
xhr.open("GET","hello.json",true)
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
// redyState的s一定要大寫，不然不輸出，但綁定事件的onreadystatechange是小寫
        if((xhr.status>=200 && xhr.status<300 ) ||xhr.status==304){
        console.log(xhr.responseText)
    }else{
        console.log("fail")
    }}  
}

執(zhí)行結(jié)果
每次readystatechange，都會觸發(fā)事件，輸出readystate

redyState的s一定要大寫，不然不輸出，但綁定事件的onreadystatechange是小寫

get方式會把參數(shù)拼裝成url后

post會把參數(shù)放在xhr.send()內(nèi)部

var xhr = new XMLHttpRequest()
  xhr.timeout = 3000        //可選，設(shè)置xhr請求的超時時間
  xhr.open("POST", "/register", true)

  xhr.onload = function(e) { 
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      console.log(this.responseText)
    }
  }
    //可選
  xhr.ontimeout = function(e) { 
        console.log("請求超時")
  }

  //可選
  xhr.onerror = function(e) {
      console.log("連接失敗")
  }
  //可選
  xhr.upload.onprogress = function(e) {
      //如果是上傳文件，可以獲取上傳進(jìn)度
  }

  xhr.send("username=jirengu&password=123456")

function ajax(opts){
    var url = opts.url
    var type = opts.type || "GET"
    var dataType = opts.dataType || "json"
    var onsuccess = opts.onsuccess || function(){}
    var onerror = opts.onerror || function(){}
    var data = opts.data || {}

    var dataStr = []
    for(var key in data){
        dataStr.push(key + "=" + data[key])
    }
    dataStr = dataStr.join("&")

    if(type === "GET"){
        url += "?" + dataStr
    }

    var xhr = new XMLHttpRequest()
    xhr.open(type, url, true)
    xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            if(dataType === "json"){
                onsuccess( JSON.parse(xhr.responseText))
            }else{
                onsuccess( xhr.responseText)
            }
        } else {
            onerror()
        }
    }
    xhr.onerror = onerror
    if(type === "POST"){
        xhr.send(dataStr)
    }else{
        xhr.send()
    }
}

ajax({
    url: "http://api.jirengu.com/weather.php",
    data: {
        city: "北京"
    },
    onsuccess: function(ret){
        console.log(ret)
    },
    onerror: function(){
        console.log("服務(wù)器異常")
    }
})