面試官: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