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

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

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

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

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

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

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

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

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

異步綁定數據，需要綁定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狀態碼。
該狀態碼用于表示特定 HTTP 請求是否已成功完成，這個狀態碼是服務器發給瀏覽器的

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

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

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

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

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

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

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

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

結果請求超時，返回的是timeout

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

timing時間各個時間解析

XMLHttpRequest 的一個屬性，用來表示當前XMLHttpRequest對象處于什么狀態
有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")
    }}  
}

執行結果
每次readystatechange，都會觸發事件，輸出readystate

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

get方式會把參數拼裝成url后

post會把參數放在xhr.send()內部

var xhr = new XMLHttpRequest()
  xhr.timeout = 3000        //可選，設置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("服務器異常")
    }
})