2023學年完整公開課版Ajax服務器交互

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

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