使用 XMLHttpRequest 實現(xiàn) ajax

function ajax (url, method, body, headers) {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest()
    request.open(method, url) // 初始化一個請求
    for (let key in headers) {
      request.setRequestHeader(key, headers[key]) // 設置HTTP請求頭部的方法，該方法必須在 open()之后，send() 之前調用
    }
    request.onreadystatechange = () => {
      // debugger
      if (request.readyState === 4) {
        if (request.status === 200 || request.status === 304) {
          resolve(request.responseText) // request.responseText 是一個字符串，需要 JSON.parse() 轉換
        } else {
          reject(request)
        }
      }
    }

    request.send(body) // 發(fā)送http請求
  })
}

ajax('./data.json', 'get').then(res => {
  console.log(res)
})

XMLHttpRequest解析

XMLHttpRequest（xhr）對象用于與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定URL，獲取數(shù)據(jù)。運行網頁在不影響用戶操作的情況下，更新頁面的局部內容

構造函數(shù)

XMLHttpRequest()

該構造函數(shù)用于初始化一個 XMLHttpRequest 實例對象。在調用任何其他方法之前，必須先調用該構造函數(shù)，得到一個實例對象。

常用方法

XMLHttpRequest.open()

方法初始化一個請求，在js代碼中使用

xhrReq.open(method, url)
// xhrReq.open(method, url, async, user, password) // async: boolean，默認true，是否執(zhí)行異步操作

XMLHttpRequest.send()

方法用于發(fā)送HTTP請求，接收一個可選的參數(shù)，作為請求主體，如果請求方法是 GET 或 HEAD，則應將請求主體設置為 null

XMLHttpRequest.send(body)

XMLHttpRequest.setRequestHeader()

方法是設置HTTP請求頭部的方法，該方法必須在 open() 方法之后，send() 方法之前調用

xhrReq.setRequestHeader(header, value) // header 屬性的鍵，value 屬性的值

常用屬性

readyState

XMLHttpRequest.readyState 屬性返回一個 XMLHttpRequest 代理當前所處的狀態(tài)，一個XHR代理總是處于下面狀態(tài)中的一個

0  代理被創(chuàng)建，但尚未調用open()方法
1  open() 方法已經被調用
2  send() 方法已經被調用，并且頭部和狀態(tài)已經可獲得
3  下載中，responseText 屬性已經包含部分數(shù)據(jù)
4  下載操作已完成

responseText

XMLHttpRequest.responseText 在一個請求被發(fā)送后，從服務器端返回文本

const resultText = XMLHttpRequest.responseText // 返回純文本的值

當請求狀態(tài) readyState 變?yōu)?，且status值為200時，responseText是全部后端的返回數(shù)據(jù)。

status

只讀屬性 XMLHttpRequest.status 返回了 XMLHttpRequest 響應中的數(shù)字狀態(tài)碼。

如 status 200代表一個成功的請求。

timeout

XMLHttpRequest.timeout代表一個請求在被自動終止前所消耗的毫秒數(shù)。默認值為0，意味著沒有超時。

const xhr = new XMLHttpRequest()
xhr.open('GET', '/server')

xhr.timeout = 2000 // 單位毫秒，超時時間

xhr.onload = function () {
    // 請求完成 ，在此進行處理
}
xhr.ontimeout = function (error) {
    // XMLHttpRequest 超時，在此進行處理
}

xhr.send(null)

withCredentials

XMLHttpRequest.withCredentials 屬性是一個 Boolean 類型，指示了是否該使用類似cookies, authorization headers來創(chuàng)建一個跨站點訪問控制請求。在同一個站點下使用 withCredentials 屬性是無效的。

如果在發(fā)送來自其他域的XMLHttpRequest 請求之前，設置 withCredentials 為true，可以獲得第三方cookies。

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://example.com', true)
xhr.withCredentials = true
xhr.send(body)

常用事件

onreadystateChange

只要 readyState 屬性發(fā)生變化，就會調用相應的處理函數(shù)。

XMLHttpRequest.onreadystateChange = callback

const xhr = new XMLHttpRequest(),
      method = 'GET',
      url = 'http://example.com'
xhr.open(method, url, true)
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}
xhr.send()

// load()
request.onload = (error) => {
    console.log('DONE', xhr.status)
}
// error()
request.onerror = (error) => {
    console.log(error)
}
// timeout()
request.ontimeout = (error) => {
    console.log(error)
}