2023學(xué)年完整公開(kāi)課版Ajax服務(wù)器交互

《物聯(lián)網(wǎng)Web前端開(kāi)發(fā)基礎(chǔ)》課程

Ajax服務(wù)器交互【任務(wù)8-2】Ajax技術(shù)需求分析在傳統(tǒng)網(wǎng)站中，網(wǎng)頁(yè)無(wú)法實(shí)現(xiàn)局部更新，當(dāng)用戶(hù)刷新頁(yè)面，頁(yè)面會(huì)更新整個(gè)頁(yè)面的數(shù)據(jù)，在網(wǎng)速慢的情況下，如果網(wǎng)頁(yè)非常大，用戶(hù)體驗(yàn)非常不好?！救蝿?wù)8-2】Ajax技術(shù)下面將帶領(lǐng)讀者認(rèn)識(shí)Ajax。需求分析為了提高用戶(hù)體驗(yàn)，瀏覽器引入了Ajax技術(shù)，通過(guò)Ajax技術(shù)可以實(shí)現(xiàn)網(wǎng)頁(yè)的局部更新?！救蝿?wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——Ajax與傳統(tǒng)網(wǎng)頁(yè)的區(qū)別傳統(tǒng)網(wǎng)頁(yè)工作流程：【任務(wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——Ajax與傳統(tǒng)網(wǎng)頁(yè)的區(qū)別Ajax網(wǎng)頁(yè)工作流程：【任務(wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——Ajax與傳統(tǒng)網(wǎng)頁(yè)的區(qū)別Ajax技術(shù)的優(yōu)勢(shì)：減輕服務(wù)器的負(fù)擔(dān)節(jié)省寬帶用戶(hù)體驗(yàn)更好【任務(wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——?jiǎng)?chuàng)建Ajax對(duì)象通過(guò)XMLHttpRequest構(gòu)造函數(shù)創(chuàng)建Ajax對(duì)象：varxhr=newXMLHttpRequest();【任務(wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——Ajax對(duì)象常用的方法Ajax對(duì)象有3個(gè)常用的方法：open()send()setRequestHeader()【任務(wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——Ajax對(duì)象常用的方法open()基本語(yǔ)法格式open('method','URL'[,asyncFlag[,'userName'[,'password']]])method用于指定請(qǐng)求方式，如GET、POST，不區(qū)分大小寫(xiě)；URL表示請(qǐng)求的地址?？蛇x參數(shù)：asyncFlag用于指定請(qǐng)求方式，同步請(qǐng)求為false，默認(rèn)為異步請(qǐng)求true；userName和password表示HTTP認(rèn)證的用戶(hù)名和密碼。【任務(wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——Ajax對(duì)象常用的方法send()基本語(yǔ)法格式send(content)content用于指定要發(fā)送的數(shù)據(jù)，其值可為DOM對(duì)象的實(shí)例、輸入流或字符串，一般與POST請(qǐng)求類(lèi)型配合使用。如果請(qǐng)求聲明為同步，該方法將會(huì)等待請(qǐng)求完成或者超時(shí)才會(huì)返回，否則此方法將立即返回?！救蝿?wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——Ajax對(duì)象常用的方法setRequestHeader()基本語(yǔ)法格式setRequestHeader('haeder','value')header表示請(qǐng)求頭字段value為該字段的值。注意：此方法必須在open()方法后調(diào)用?！救蝿?wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——Ajax對(duì)象發(fā)送請(qǐng)求【任務(wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——同步請(qǐng)求與異步請(qǐng)求open()方法的第3個(gè)參數(shù)用于設(shè)置同步請(qǐng)求和異步請(qǐng)求。兩種方式的區(qū)別在于，是否阻塞代碼的執(zhí)行?！救蝿?wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——同步請(qǐng)求與異步請(qǐng)求默認(rèn)的異步方式是非阻塞的，瀏覽器端的JavaScript程序不用等待Web服務(wù)器響應(yīng)，可以繼續(xù)處理其他事情?！救蝿?wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——同步請(qǐng)求與異步請(qǐng)求同步方式是阻塞的，當(dāng)Ajax對(duì)象向Web服務(wù)器發(fā)送請(qǐng)求后，會(huì)等待Web服務(wù)器響應(yīng)的數(shù)據(jù)接收完成，再繼續(xù)執(zhí)行后面的代碼?！救蝿?wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——同步請(qǐng)求與異步請(qǐng)求由于同步請(qǐng)求的Ajax導(dǎo)致程序阻塞，會(huì)對(duì)用戶(hù)體驗(yàn)造成不利影響，所以通常情況下不推薦使用同步請(qǐng)求。【任務(wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——處理服務(wù)器返回的信息readyState屬性用于獲取Ajax的當(dāng)前狀態(tài)，狀態(tài)值有5種形式。狀態(tài)值說(shuō)明解釋0未發(fā)送對(duì)象已創(chuàng)建，尚未調(diào)用open()方法1已打開(kāi)open()方法已調(diào)用，此時(shí)可以調(diào)用send()方法發(fā)起請(qǐng)求2收到響應(yīng)頭send()方法已調(diào)用，響應(yīng)頭也已經(jīng)被接收3數(shù)據(jù)接收中響應(yīng)體部分正在被接收。responseText將會(huì)在載入的過(guò)程中擁有部分響應(yīng)數(shù)據(jù)4完成數(shù)據(jù)接收完畢。此時(shí)可以通過(guò)responseText獲取完整的響應(yīng)【任務(wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——處理服務(wù)器返回的信息onreadystatechange屬性用于感知readyState屬性狀態(tài)的改變，每當(dāng)readyState的值發(fā)生改變時(shí)，就會(huì)調(diào)用此事件?！救蝿?wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——處理服務(wù)器返回的信息當(dāng)調(diào)用open()和send()方法后，readyState屬性的值會(huì)發(fā)送變化，每次變化都會(huì)觸發(fā)onreadystatechange事件?！救蝿?wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——處理服務(wù)器返回的信息status屬性用于返回當(dāng)前請(qǐng)求的HTTP狀態(tài)碼，值為數(shù)值類(lèi)型。例如，請(qǐng)求成功時(shí)的狀態(tài)碼為200。statusText屬性值功能類(lèi)似，它返回字符型結(jié)果，包含了描述短語(yǔ)，如“200OK”?！救蝿?wù)8-2】Ajax技術(shù)知識(shí)儲(chǔ)備——處理服務(wù)器返回的信息當(dāng)請(qǐng)求服務(wù)器成功且數(shù)據(jù)接收完成時(shí)，可以使用Ajax對(duì)象提供的相關(guān)屬性，獲取服務(wù)器的響應(yīng)信息。屬性名說(shuō)明responseText將響應(yīng)信息作為字符串返回responseXML將響應(yīng)信息格式化為XM