面試官：Ajax 原理是什麼？如何實現？

一、是什麼

AJAX全稱 (Async Javascript and XML)

即異步的JavaScript 和XML，是一種創建交互式網頁應用的網頁開發技術，可以在不重新加載整個網頁的情況下，與服務器交換數據，並且更新部分網頁

Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然後用JavaScript來操作DOM而更新頁面

流程圖如下：

下面舉個例子：

領導想找小李彙報一下工作，就委託祕書去叫小李，自己就接着做其他事情，直到祕書告訴他小李已經到了，最後小李跟領導彙報工作

Ajax請求數據流程與 “領導想找小李彙報一下工作” 類似，上述祕書就相當於XMLHttpRequest對象，領導相當於瀏覽器，響應數據相當於小李

瀏覽器可以發送HTTP請求後，接着做其他事情，等收到XHR返回來的數據再進行操作

二、實現過程

實現 Ajax異步交互需要服務器邏輯進行配合，需要完成以下步驟：

• 創建 Ajax的核心對象 XMLHttpRequest對象

• 通過 XMLHttpRequest 對象的 open() 方法與服務端建立連接

• 構建請求所需的數據內容，並通過XMLHttpRequest 對象的 send() 方法發送給服務器端

• 通過 XMLHttpRequest 對象提供的 onreadystatechange 事件監聽服務器端你的通信狀態

• 接受並處理服務端向客戶端響應的數據結果

• 將處理結果更新到 HTML頁面中

創建 XMLHttpRequest 對象

通過XMLHttpRequest() 構造函數用於初始化一個 XMLHttpRequest 實例對象

const xhr = new XMLHttpRequest();

與服務器建立連接

通過 XMLHttpRequest 對象的 open() 方法與服務器建立連接

xhr.open(method, url, [async][, user][, password])

參數說明：

• method：表示當前的請求方式，常見的有GET、POST

• url：服務端地址

• async：布爾值，表示是否異步執行操作，默認爲true

• user: 可選的用戶名用於認證用途；默認爲 `null

• password: 可選的密碼用於認證用途，默認爲 `null

給服務端發送數據

通過 XMLHttpRequest 對象的 send() 方法，將客戶端頁面的數據發送給服務端

xhr.send([body])

body: 在 XHR 請求中要發送的數據體，如果不傳遞數據則爲 null

如果使用GET請求發送數據的時候，需要注意如下：

• 將請求數據添加到open()方法中的url地址中

• 發送請求數據中的send()方法中參數設置爲null

綁定 onreadystatechange 事件

onreadystatechange 事件用於監聽服務器端的通信狀態，主要監聽的屬性爲XMLHttpRequest.readyState ,

關於XMLHttpRequest.readyState屬性有五個狀態，如下圖顯示

只要 readyState屬性值一變化，就會觸發一次 readystatechange 事件

XMLHttpRequest.responseText屬性用於接收服務器端的響應結果

舉個例子：

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
    if(request.readyState === 4){ // 整個請求過程完畢
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText) // 服務端返回的結果
        }else if(request.status >=400){
            console.log("錯誤信息：" + request.status)
        }
    }
}
request.open('POST','http://xxxx')
request.send()

三、封裝

通過上面對XMLHttpRequest對象的瞭解，下面來封裝一個簡單的ajax請求

//封裝一個ajax請求
function ajax(options) {
    //創建XMLHttpRequest對象
    const xhr = new XMLHttpRequest()


    //初始化參數的內容
    options = options || {}
    options.type = (options.type || 'GET').toUpperCase()
    options.dataType = options.dataType || 'json'
    const params = options.data

    //發送請求
    if (options.type === 'GET') {
        xhr.open('GET', options.url + '?' + params, true)
        xhr.send(null)
    } else if (options.type === 'POST') {
        xhr.open('POST', options.url, true)
        xhr.send(params)

    //接收請求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            let status = xhr.status
            if (status >= 200 && status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML)
            } else {
                options.fail && options.fail(status)
            }
        }
    }
}

使用方式如下

ajax({
    type: 'post',
    dataType: 'json',
    data: {},
    url: 'https://xxxx',
    success: function(text,xml){//請求成功後的回調函數
        console.log(text)
    },
    fail: function(status){////請求失敗後的回調函數
        console.log(status)
    }
})

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/TOjrH8JYve1dV4D_XRj8Tw