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

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

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

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

我在當前html文件下偽造了一個hello.json的文檔，作為服務器資源。

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

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

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

采用同步的方式，也能獲得數(shù)據(jù)，但是時間比較長，差不多22ms（個人電腦上的數(shù)據(jù)，并非實驗數(shù)據(jù)），效率不高。
把參數(shù)三把false改成true，就可以變異步。xhrsend之后立刻就執(zhí)行返回數(shù)據(jù)的操作，導致沒有數(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對象的一個屬性，表示響應的HTTP狀態(tài)碼。
該狀態(tài)碼用于表示特定 HTTP 請求是否已成功完成，這個狀態(tài)碼是服務器發(fā)給瀏覽器的

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

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

HEAD：實體標頭位于消息正文中。

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

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

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

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

var xhr= new XMLHttpRequest()
xhr.timeout=13
// 注意timeout時間要根據(jù)收到j(luò)son文件響應時間來設(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是定義一個事件，當ajax連接失?。g覽器發(fā)送ajax請求根本沒有連接到服務器）瀏覽器自己輸出error。status是請求鏈接到服務器，服務器響應錯誤后服務器返回瀏覽器的狀態(tài)碼。詳情可以查看這個鏈接
坑2：XMLHttpRequest提供了timeout的屬性，為了防止請求過了很久還沒有成功，白白占用的網(wǎng)絡(luò)資源。timeout是指響應時間，開始請求到接收到響應（開始處理）的時間，單位為ms。
比如我設(shè)置timeout時間為5ms

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

timeout對應console臺，應該是以下紅框的總時間。

timing時間各個時間解析

XMLHttpRequest 的一個屬性，用來表示當前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) {
      //如果是上傳文件，可以獲取上傳進度
  }

  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("服務器異常")
    }
})