1. 首頁 > 生活 > >

ajax的原理以及用法 Ajax的工作原理

小知識



文章插圖
ajax的原理以及用法 Ajax的工作原理

文章插圖

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.statusif (status >= 200 && status < 300) {options.success && options.success(xhr.responseText, xhr.responseXML)} else {options.fail && options.fail(status)}}}}1234567891011121314151617181920212223242526272829303132復制代碼類型：[javascript]使用方式如下
【ajax的原理以及用法 Ajax的工作原理】ajax({type: 'post',dataType: 'json',data: {},url: 'https://xxxx',success: function(text,xml){//請求成功后的回調函數console.log(text)},fail: function(status){////請求失敗后的回調函數console.log(status)}})