Ajax完整詳細(xì)教程(一)
時(shí)間:2023-05-24 04:54:02 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-05-24 04:54:02 來(lái)源:網(wǎng)站運(yùn)營(yíng)
Ajax完整詳細(xì)教程(一):我們將詳細(xì)介紹 XMLHttpRequest 對(duì)象,它是 Ajax 應(yīng)用程序的中心,負(fù)責(zé)處理服務(wù)器端應(yīng)用程序和腳本的請(qǐng)求,并處理從服務(wù)器端組件返回的數(shù)據(jù)。由于所有的 Ajax 應(yīng)用程序都要使用XMLHttpRequest 對(duì)象,因此您可能會(huì)希望熟悉這個(gè)對(duì)象,從而能夠讓 Ajax 執(zhí)行得更好。
感興趣的歡迎私聊了 1.http協(xié)議
1.1 http協(xié)議 ● 超文本傳輸協(xié)議(HTTP,HyperText Transfer Protocal ),
是簡(jiǎn)單、可靠的互聯(lián)網(wǎng)文件傳輸協(xié)議?!吧暇W(wǎng)”這個(gè)事兒的本質(zhì),
就是你輸入網(wǎng)址之后,瀏覽器發(fā)出HTTP請(qǐng)求,請(qǐng)求服務(wù)器上的文件。
服務(wù)器上的文件,再通過(guò)HTTP傳輸?shù)奖镜?,在瀏覽器中進(jìn)行渲染。
● 一次HTTP請(qǐng)求,有上行請(qǐng)求、下行響應(yīng)兩部分。
● 一張網(wǎng)頁(yè),可能產(chǎn)生多個(gè)HTTP的請(qǐng)求。
● 通常,瀏覽器產(chǎn)生HTTP請(qǐng)求,是由于用戶(hù)輸入了新的網(wǎng)址、
或者點(diǎn)擊了超級(jí)鏈接,使頁(yè)面跳轉(zhuǎn),這將導(dǎo)致頁(yè)面的全局刷新。
而Ajax技術(shù),可以使網(wǎng)頁(yè)悄悄地、偷偷地發(fā)起HTTP請(qǐng)求,
請(qǐng)求回來(lái)的數(shù)據(jù)在頁(yè)面局部刷新呈遞。
1.2 ajax實(shí)現(xiàn)原理 原理:
在不刷新頁(yè)面的情況下,瀏覽器悄悄地、異步向服務(wù)器發(fā)出HTTP請(qǐng)求。
服務(wù)器收到請(qǐng)求后,傳回新的格式化數(shù)據(jù)(通常是JSON)。
瀏覽器通過(guò)DOM將新數(shù)據(jù)呈遞顯示,頁(yè)面僅局部刷新。
1.3 ajax步驟 1.創(chuàng)建ajax對(duì)象 XMLHttpRequest() 內(nèi)置對(duì)象 XMLHttpRequest
var xhr=new XMLHttpRequest();
2.準(zhǔn)備請(qǐng)求內(nèi)容
open('請(qǐng)求方式','請(qǐng)求地址','異步')
xhr.open('get','test.txt',true);
3.發(fā)送請(qǐng)求
xhr.send(null);
//xhr.send()
4.監(jiān)聽(tīng)函數(shù)---獲取返回的數(shù)據(jù)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
console.log(xhr.responseText);
}
}
}
1.4 代碼截圖