AJAX全稱(AsyncJavascriptandXML)即異步的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();1複製代碼類型：[javascript]

與服務器建立連接

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

xhr.open(method, url, [async][, user][, password])1複製代碼類型：[javascript]

參數說明：

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

url：服務端地址

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

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

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

給服務端發送數據

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

xhr.send([body])1複製代碼類型：[javascript]

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()123456789101112複製代碼類型：[javascript]

封裝

通過上面對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)
            }
        }
    }
}1234567891011121314151617181920212223242526272829303132複製代碼類型：[javascript]

使用方式如下

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