凡是和後臺有過資料互動的小夥伴肯定都接觸過 ajax. 我們可以通過 ajax 來實現頁面的無重新整理請求資料，這樣就能在保證良好使用者體驗的同時，將更多的內容展示給使用者
ajax 在我們的開發工作中已經司空見慣，幾乎所有我們頻繁使用的庫和框架都提供了經過完善封裝後的 ajax 方法，如 jQuery、zepto、angular 等等，這使得我們的資料請求變得異常簡潔明瞭

但是這也帶來了很明顯的缺陷，就是我們知道如何去使用封裝後的 ajax，卻不會通過原生的 js 來 ajax，更甚者（如只用過 jQuery 的小夥伴）會將 ajax 與$.ajax()等同

而這個問題也是面試中常常出現的一題，所以這次就來親手實現一下原生 js 的 ajax

XMLHttpRequest物件

我們常用的 ajax 就是通過 XMLHttpRequest 物件實現的，這個物件有很多的屬性和事件，在使用之前，我們需要先將它例項化

const xhr = new XMLHttpRequest()

例項化後，我們就可以通過 xhr 來發起一個請求

// xhr 具有一個 open 方法，這個方法的作用類似於初始化，並不會發起真正的請求
// open 方法具有 5 個引數，但是常用的是前 3 個
// method： 請求方式 —— get / post
// url：請求的地址
// async：是否非同步請求，預設為 true（非同步）
xhr.open(method, url, async)

// send 方法傳送請求，並接受一個可選引數
// 當請求方式為 post 時，可以將請求體的引數傳入
// 當請求方式為 get 時，可以不傳或傳入 null
// 不管是 get 還是 post，引數都需要通過 encodeURIComponent 編碼後拼接
xhr.send(data)


 

在通過send方法傳送請求後，xhr 物件在收到響應資料時會自動填充到其對應的屬性中，xhr 具有以下常用屬性：

responseText： 請求返回的資料內容
responseXML： 如果響應內容是"text/xml"“application/xml”，這個屬性將儲存響應資料的 XML DOM文件
status： 響應的HTTP狀態，如 200 304 404 等
statusText： HTTP狀態說明
readyStatus： 請求/響應過程的當前活動階段
timeout： 設定請求超時時間

上面寫了那麼多，我們並沒有發現收到資料時的回撥方法，那麼該怎麼在收到資料時進行處理呢？這個問題的重點需要放在readyStatus這個屬性上

readyStatus的值會隨著請求各階段的變化而改變，其一共有 5 個值：

xhr.readyStatus==0 尚未呼叫 open 方法
xhr.readyStatus==1 已呼叫 open 但還未傳送請求（未呼叫 send）
xhr.readyStatus==2 已傳送請求（已呼叫 send）
xhr.readyStatus==3 已接收到請求返回的資料
在通過send方法傳送請求後，xhr 物件在收到響應資料時會自動填充到其對應的屬性中，xhr 具有以下常用屬性：

responseText： 請求返回的資料內容
responseXML： 如果響應內容是"text/xml"“application/xml”，這個屬性將儲存響應資料的 XML DOM文件
status： 響應的HTTP狀態，如 200 304 404 等
statusText： HTTP狀態說明
readyStatus： 請求/響應過程的當前活動階段
timeout： 設定請求超時時間

上面寫了那麼多，我們並沒有發現收到資料時的回撥方法，那麼該怎麼在收到資料時進行處理呢？這個問題的重點需要放在readyStatus這個屬性上

xhr.readyStatus==0 尚未呼叫 open 方法
xhr.readyStatus==1 已呼叫 open 但還未傳送請求（未呼叫 send）
xhr.readyStatus==2 已傳送請求（已呼叫 send）
xhr.readyStatus==3 已接收到請求返回的資料
xhr.readyStatus==4 請求已完成

當readyStatus的狀態發生改變時，會觸發 xhr 的事件onreadystatechange，於是我們就可以在這個方法中，對接收到的資料進行處理

xhr.onreadystatechange = () => {
    if (xhr.readyStatus === 4) {
        // HTTP 狀態在 200-300 之間表示請求成功
        // HTTP 狀態為 304 表示請求內容未發生改變，可直接從快取中讀取
        if (xhr.status >= 200 && 
            xhr.status < 300 || 
            xhr.status == 304) {
            console.log('請求成功', xhr.responseText)
        }
    }
}

當網路不佳時，我們需要給請求設定一個超時時間

// 超時時間單位為毫秒
xhr.timeout = 1000

// 當請求超時時，會觸發 ontimeout 方法
xhr.ontimeout = () => console.log(‘請求超時’)

以上就是 XMLHttpRequest 物件的基礎內容，它還有很多其他的屬性和時間，如onerror onabort onload等等，同時 ajax 的跨域、相容 IE 瀏覽器等問題我們也並沒有提到。對這些感興趣的小夥伴可以自己 Google 一下，或者等以後有機會，我們再一起來學習這些內容

下面奉上自己封裝的一個極簡 ajax 請求方法，在生產專案中不能使用，但是對於臨時測試請求個本地檔案什麼的還是沒什麼問題的，該 ajax 方法通過 Promise 方式實現回撥

function ajax (options) {
        let url = options.url
        const method = options.method.toLocaleLowerCase() || 'get'
        const async = options.async != false // default is true
        const data = options.data
        const xhr = new XMLHttpRequest()

        if (options.timeout && options.timeout > 0) {
            xhr.timeout = options.timeout
        }

        return new Promise ( (resolve, reject) => {
            xhr.ontimeout = () => reject && reject('請求超時')
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        resolve && resolve(xhr.responseText)
                    } else {
                        reject && reject()
                    }
                }
            }
            xhr.onerror = err => reject && reject(err)

            let paramArr = []
            let encodeData
            if (data instanceof Object) {
                for (let key in data) {
                    // 引數拼接需要通過 encodeURIComponent 進行編碼
                    paramArr.push( encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) )
                }
                encodeData = paramArr.join('&')
            }

            if (method === 'get') {
                  // 檢測 url 中是否已存在 ? 及其位置
                const index = url.indexOf('?')
                if (index === -1) url += '?'
                else if (index !== url.length -1) url += '&'
                  // 拼接 url
                url += encodeData
            }

            xhr.open(method, url, async)
            if (method === 'get') xhr.send(null)
            else {
                // post 方式需要設定請求頭
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
                xhr.send(encodeData)
            }
        } )

使用方式

ajax({
    url: 'your request url',
    method: 'get',
    async: true,
    timeout: 1000,
    data: {
        test: 1,
        aaa: 2
    }
}).then(
    res => console.log('請求成功: ' + res),
    err => console.log('請求失敗: ' + err)
)

如果你依然在程式設計的世界裡迷茫，不知道自己的未來規劃，可以加入web前端學習交流群：731771211

裡面可以與大神一起交流並走出迷茫。小白可進群免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行！群裡不停更新最新的教程和學習方法（進群送web前端系統學習路線，詳細的前端專案實戰教學視訊），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

點選：加入