如何實作Ajax？它的原理是什么？
Ajax的概念：
? Ajax全稱 Async JavaScript and XML，也就是異步的 JavaScript 和 XML，是一種創建互動式網頁應用的網頁開發技術，可以在不重新加載整個網頁的情況下，與服務器交換資料，并且更新部分網頁，
Ajax的原理：
? 簡單來說，就是通過 XmlHttpRequest 物件向服務器發送異步請求，從服務器獲得資料，然后使用 Javascript 來操作 DOM 從而更新頁面，流程圖如下所示：
實作程序：
實作 Ajax 異步互動需要服務器邏輯進行配合，需要完成一下步驟：
- 創建 Ajax的核心物件 XMLHttpRequest 物件；
- 通過 XMLHttpRequest 物件的 open() 方法與服務器建立連接；
- 構建請求所需的資料內容，并通過 XMLHttpRequest 物件的 send() 方法發送給服務器端；
- 通過 XMLHttpRequest 物件提供的 onreadystatechchange 事件監聽服務器端你的通信狀態接受并處理服務器端向客戶回應的資料結果；
- 將處理結果更新到 HTML 頁面中，
綜合一下就是：
- 創建 XMLHttpRequest 物件，通過 XMLHttpRequest () 建構式，用于初始化一個 XMLHttpRequest 實體物件，
const xhr = new XMLHttpRequest();
- 與服務器建立來連接，通過 XMLHttpRequest 物件的 open() 方法與服務器建立連接，
xhr.open(method,url,[async][, user][, password])
引數詳解：
- method：請求提交的方式，常見的有"GET"和"POST"；
- url：接收請求的服務器地址；
- async：設定請求是否進行異步操作，布林值；
- user：可選引數，發送請求的用戶名，一般用于驗證操作；
- passowrd：可選引數，發送請求的用戶密碼，一般用于驗證操作，
- 給服務端發送資料，通過 XMLHttpRequest 物件的 send() 方法，將客戶端頁面的資料發送給服務端，
xhr.send([body])
- body：在 XHR 請求中要發送的資料體，如果不傳遞資料則為 null ；
- 同時，使用 GET 請求發送資料時，需要注意以下兩點：
- 將請求資料添加到 open() 方法中的 url 地址上；
- 發送請求資料中的 send() 方法中引數設定為 null，
-
系結 onreadstatechange 事件；
- onreadstatechange 事件：用于監聽服務器端的通信狀態，主要監聽的屬性為 XMLHttpRequest .readState；
- XMLHttpRequest .readState 屬性有五種狀態：
值 狀態 描述 0 UNSENT（未打開） open() 方法還未被呼叫 1 OPENED（未發送） send() 方法還未被呼叫 2 HEADERS_RECEIVED（已獲取回應頭） send() 方法已經被呼叫，回應頭和回應狀態已經回傳 3 LOADING（正在下載回應體） 回應體下載中，responseText 中已經獲取了部分資料 4 DONE（請求完成） 整個請求程序完畢 - 只要 readState 屬性值一變化，就會觸發一次 onreadstatechchange 事件；
- XMLHttpRequest .responseText 屬性：用于接收服務器端的回應結果，
了解過后來封裝一個簡單的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: 'GET',
dataType: 'json',
data: {},
url: 'https://',
// 請求成功后的回呼
success: function(text, xml) {
console.log(text);
},
// 請求失敗后的回呼
fail: function(status) {
console.log(status);
}
});
這里是萬物之戀，我們下次再見了！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/355349.html
標籤：其他
上一篇：Threejs系列--7游戲開發加載glb模型之牛刀小試
下一篇：React中的setState