柚子快報(bào)激活碼778899分享：前端 Ajax詳解

http://yzkb.51969.com/

目錄

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

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

1.什么是Ajax?

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

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

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

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

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

同步和異步：

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

2.XMLHttpRequest 對(duì)象

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

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

理解XHRHttpRequest

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

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

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

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

2.1 XMLHttpRequest對(duì)象的屬性

XMLHttpRequest對(duì)象的常見(jiàn)屬性如下：

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

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

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

2.2 XMLHttpRequest對(duì)象的方法

XMLHttpRequest對(duì)象的重要方法如下：

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

3.Ajax實(shí)例

實(shí)現(xiàn)步驟 想要實(shí)現(xiàn)ajax需要四個(gè)步驟

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

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

// ajax的基本請(qǐng)求步驟

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

const xhr = new XMLHttpRequest();

// 2.初始化

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

// 發(fā)送請(qǐng)求

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){

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

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

}else{

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

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

}

}

}

3.2 Promise處理ajax請(qǐng)求

// Promise處理ajax請(qǐng)求

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

// ajax的基本請(qǐng)求步驟

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

const xhr = new XMLHttpRequest();

// 2.初始化

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

// 發(fā)送請(qǐng)求

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){

// 控制臺(tái)輸出響應(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)

})

柚子快報(bào)激活碼778899分享：前端 Ajax詳解

http://yzkb.51969.com/

推薦文章