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

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

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

2、依靠對(duì)象
XMLHttpRequest對(duì)象
fetch對(duì)象 （兼容性較弱）

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

控制臺(tái)報(bào)錯(cuò)，顯示用file協(xié)議是不支持的，跨源請(qǐng)求僅支持http, data, chrome, chrome-extension, https協(xié)議方案

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

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

采用同步的方式，也能獲得數(shù)據(jù)，但是時(shí)間比較長(zhǎng)，差不多22ms（個(gè)人電腦上的數(shù)據(jù)，并非實(shí)驗(yàn)數(shù)據(jù)），效率不高。
把參數(shù)三把false改成true，就可以變異步。xhrsend之后立刻就執(zhí)行返回?cái)?shù)據(jù)的操作，導(dǎo)致沒(méi)有數(shù)據(jù)返回。
如果需要采用異步的方式獲取ajax數(shù)據(jù)，就需要綁定load事件，等加載后再執(zhí)行var data= xhr.responseText，才返回?cái)?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對(duì)象的一個(gè)屬性，表示響應(yīng)的HTTP狀態(tài)碼。
該狀態(tài)碼用于表示特定 HTTP 請(qǐng)求是否已成功完成，這個(gè)狀態(tài)碼是服務(wù)器發(fā)給瀏覽器的

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

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

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

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

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

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

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

var xhr= new XMLHttpRequest()
xhr.timeout=13
// 注意timeout時(shí)間要根據(jù)收到j(luò)son文件響應(yīng)時(shí)間來(lái)設(shè)置，小于這個(gè)時(shí)間會(huì)輸出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")//一般是連接失敗報(bào)錯(cuò)
}

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

結(jié)果請(qǐng)求超時(shí)，返回的是timeout

timeout對(duì)應(yīng)console臺(tái)，應(yīng)該是以下紅框的總時(shí)間。

timing時(shí)間各個(gè)時(shí)間解析

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

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

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

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

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

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

var xhr = new XMLHttpRequest()
  xhr.timeout = 3000        //可選，設(shè)置xhr請(qǐng)求的超時(shí)時(shí)間
  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("請(qǐng)求超時(shí)")
  }

  //可選
  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ù)器異常")
    }
})