一(yī)、AJAX是什麽
AJAX全稱(Async Javascript and XML)
即異步的JavaScript 和XML，是一(yī)種創建交互式網頁應用的網頁開(kāi)發技術，可以在不重新加載整個網頁的情況下(xià)，與服務器交換數據，并且更新部分(fēn)網頁
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然後用JavaScript來操作DOM而更新頁面
下(xià)面舉個例子：
領導想找小(xiǎo)李彙報一(yī)下(xià)工(gōng)作，就委托秘書(shū)去(qù)叫小(xiǎo)李，自己就接着做其他事情，直到秘書(shū)告訴他小(xiǎo)李已經到了，最後小(xiǎo)李跟領導彙報工(gōng)作
Ajax請求數據流程與“領導想找小(xiǎo)李彙報一(yī)下(xià)工(gōng)作”類似，上述秘書(shū)就相當于XMLHttpRequest對象，領導相當于浏覽器，響應數據相當于小(xiǎo)李
浏覽器可以發送HTTP請求後，接着做其他事情，等收到XHR返回來的數據再進行操作
二、AJAX實現過程
實現 Ajax異步交互需要服務器邏輯進行配合，需要完成以下(xià)步驟：
創建 Ajax的核心對象 XMLHttpRequest對象
通過 XMLHttpRequest 對象的 open 方法與服務端建立連接
構建請求所需的數據内容，并通過XMLHttpRequest 對象的 send 方法發送給服務器端
通過 XMLHttpRequest 對象提供的 onreadystatechange 事件監聽(tīng)服務器端你的通信狀态
接受并處理服務端向客戶端響應的數據結果
将處理結果更新到 HTML頁面中(zhōng)
創建XMLHttpRequest對象
通過XMLHttpRequest 構造函數用于初始化一(yī)個 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 請求中(zhōng)要發送的數據體(tǐ)，如果不傳遞數據則爲 null
如果使用GET請求發送數據的時候，需要注意如下(xià)：
将請求數據添加到open方法中(zhōng)的url地址中(zhōng)
發送請求數據中(zhōng)的send方法中(zhōng)參數設置爲null
綁定onreadystatechange事件
onreadystatechange 事件用于監聽(tīng)服務器端的通信狀态，主要監聽(tīng)的屬性爲XMLHttpRequest.readyState ,
關于XMLHttpRequest.readyState屬性有五個狀态，如下(xià)圖顯示
隻要 readyState屬性值一(yī)變化，就會觸發一(yī)次 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
三、AJAX封裝
通過上面對XMLHttpRequest對象的了解，下(xià)面來封裝一(yī)個簡單的ajax請求
//封裝一(yī)個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)
}
}
}
}
使用方式如下(xià)
ajax({
type: 'post',
dataType: 'json',
data: {},
url: 'https://xxxx',
success: function(text,xml){//請求成功後的回調函數
console.log(text)
},
fail: function(status){請求失敗後的回調函數
console.log(status)
}
})
--The End--
