柚子快報激活碼778899分享：前端 Ajax詳解

http://yzkb.51969.com/

目錄

1.什么是Ajax?2.XMLHttpRequest 對象2.1 XMLHttpRequest對象的屬性2.2 XMLHttpRequest對象的方法

3.Ajax實例3.1 傳統(tǒng)的XHR請求模式3.2 Promise處理ajax請求

1.什么是Ajax?

Ajax 的全稱是 Asynchronous Javascript And XML（異步 JavaScript 和 XML）。通俗的理解：在網(wǎng)頁中利用 XMLHttpRequest 對象和服務(wù)器進行數(shù)據(jù)交互的方式，就是Ajax。

Ajax可以實現(xiàn)網(wǎng)頁與服務(wù)器之間的數(shù)據(jù)交互

AJAX不是編程語言，是一種無需重新載入整個頁面，能夠更新部分網(wǎng)頁的技術(shù)。

Ajax與使用Form表單和后端進行數(shù)據(jù)交互的方式比較，具有以下優(yōu)點:

異步提交: 提交完認為不需要原地等待，立馬就做其他事局部刷新: 不在局限于整個頁面的刷新，而是在于局部的某一個頁面的小塊刷新

同步和異步：

同步交互: 客戶端發(fā)出一個請求后，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個請求。異步交互: 客戶端發(fā)出一個請求后，無需要等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個請求。

2.XMLHttpRequest 對象

XMLHttpRequest 是 AJAX 的基礎(chǔ),XMLHttpRequest API是Ajax的核心

XMLHttpRequest 用于在后臺與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新

理解XHRHttpRequest

使用 XMLHttpRequest (XHR)對象可以與服務(wù)器交互, 也就是發(fā)送 ajax 請求 前端可以獲取到數(shù)據(jù)，而無需讓整個的頁面刷新。 這使得 Web 頁面可以只更新頁面的局部，而不影響用戶的操作

區(qū)別一般 http 請求與 ajax 請求

ajax 請求是一種特別的 http 請求 對服務(wù)器端來說, 沒有任何區(qū)別, 區(qū)別在瀏覽器端 瀏覽器端發(fā)請求: 只有 XHR 或 fetch 發(fā)出的才是 ajax 請求, 其它所有的都是非 ajax 請求

瀏覽器端接收到響應(yīng) 一般請求: 瀏覽器一般會直接顯示響應(yīng)體數(shù)據(jù), 也就是我們常說的刷新/跳轉(zhuǎn)頁面 ajax 請求: 瀏覽器不會對界面進行任何更新操作, 只是調(diào)用監(jiān)視的回調(diào)函數(shù)并傳入響應(yīng)相關(guān)數(shù)據(jù)

2.1 XMLHttpRequest對象的屬性

XMLHttpRequest對象的常見屬性如下：

onReadyStateChange - 定義了當(dāng) readyState 屬性發(fā)生改變時所調(diào)用的函數(shù).readyState - 表示請求的狀態(tài)。范圍值從0到4。

0 - 服務(wù)器連接已建立，未調(diào)用open()。1 - 服務(wù)器連接已建立，調(diào)用open()但不調(diào)用send()。2 - 請求已接收, 調(diào)用send()，并且標(biāo)題和狀態(tài)可用。3 - 請求處理中。responseText保存數(shù)據(jù)。4 - 請求已完成，且響應(yīng)已就緒。 status - HTTp狀態(tài)碼

200: “OK”404: “Page not found”，未找到頁面如需完整列表，請訪問 Http 消息參考手冊 statusText - 返回狀態(tài)文本（例如 “OK” 或 “Not Found”）reponseText - 以文本形式返回響應(yīng)。responseXML - 以XML形式返回響應(yīng)。

2.2 XMLHttpRequest對象的方法

XMLHttpRequest對象的重要方法如下：

方法描述void open(method, URL, async)規(guī)定請求的類型、URL 以及是否異步處理請求void send(string)將請求發(fā)送到服務(wù)器，string：僅用于 POST 請求setRequestHeader(header,value)添加請求標(biāo)頭

3.Ajax實例

實現(xiàn)步驟 想要實現(xiàn)ajax需要四個步驟

創(chuàng)建xhr對象配置請求信息監(jiān)聽狀態(tài)變化發(fā)送請求

3.1 傳統(tǒng)的XHR請求模式

// ajax的基本請求步驟

// 1.創(chuàng)建對象

const xhr = new XMLHttpRequest();

// 2.初始化

xhr.open('Get', 'http....');

// 發(fā)送請求

xhr.send();

// 處理響應(yīng)回調(diào)

xhr.onreadystatechange = function(){

console.log(`xhr`, xhr)

// 返回狀態(tài)碼

if(xhr.readyState === 4){

// 判斷響應(yīng)狀態(tài)碼為2xx

if(xhr.status >= 200 && xhr.status <= 300){

// 控制臺輸出響應(yīng)體

console.log(`xhr.response`, xhr.response)

}else{

// 輸出響應(yīng)狀態(tài)碼

console.log(`xhr.status`, xhr.status)

}

}

}

3.2 Promise處理ajax請求

// Promise處理ajax請求

const p = new Promise((resolve, reject) => {

// ajax的基本請求步驟

// 1.創(chuàng)建對象

const xhr = new XMLHttpRequest();

// 2.初始化

xhr.open('Get', 'http....');

// 發(fā)送請求

xhr.send();

// 處理響應(yīng)回調(diào)

xhr.onreadystatechange = function(){

console.log(`xhr`, xhr)

// 返回狀態(tài)碼

if(xhr.readyState === 4){

// 判斷響應(yīng)狀態(tài)碼為2xx

if(xhr.status >= 200 && xhr.status <= 300){

// 控制臺輸出響應(yīng)體

// console.log(`xhr.response`, xhr.response)

resolve(xhr.response)

}else{

// 輸出響應(yīng)狀態(tài)碼

// console.log(`xhr.status`, xhr.status)

reject(xhr.status)

}

}

}

});

// 調(diào)用then方法

p.then(value => {

console.log(value);

},reason => {

console.warn(reason)

})

柚子快報激活碼778899分享：前端 Ajax詳解

http://yzkb.51969.com/

推薦文章