JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）課件第09章 Ajax應(yīng)用

9.2Ajax應(yīng)用分析現(xiàn)在很多互聯(lián)網(wǎng)公司都利用Ajax技術(shù)開(kāi)發(fā)出了功能強(qiáng)大的Web應(yīng)用，其中Google公司的Gmail電子郵件應(yīng)用就出色的示范了Ajax技術(shù)的威力。在Gmail應(yīng)用中，電子郵件草稿在點(diǎn)擊保存按鈕之后，會(huì)被發(fā)送給服務(wù)器保存起來(lái)，而這個(gè)過(guò)程并不會(huì)刷新整個(gè)頁(yè)面，如圖所示。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）19.3Ajax過(guò)程解析9.3.1Ajax的請(qǐng)求/響應(yīng)過(guò)程9.3.2失敗的Ajax請(qǐng)求25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）29.3.1Ajax的請(qǐng)求/響應(yīng)過(guò)程在傳統(tǒng)的頁(yè)面請(qǐng)求過(guò)程中，瀏覽器發(fā)出對(duì)數(shù)據(jù)的請(qǐng)求，然后等待服務(wù)器發(fā)回響應(yīng)，響應(yīng)接受完成后瀏覽器渲染頁(yè)面。而在頁(yè)面中使用Ajax技術(shù)后，可以大大減少客戶(hù)端與服務(wù)器端之間的數(shù)據(jù)傳輸量，對(duì)數(shù)據(jù)的請(qǐng)求也可以異步發(fā)出，在整個(gè)Ajax服務(wù)器訪問(wèn)過(guò)程中，用戶(hù)不必等待服務(wù)器響應(yīng)和頁(yè)面刷新，而且服務(wù)器響應(yīng)接收后只需要改變當(dāng)前文檔對(duì)象，不需要影響整個(gè)頁(yè)面（包括圖片和CSS等資源）。也就是說(shuō)可以實(shí)現(xiàn)訪問(wèn)服務(wù)器接受響應(yīng)并更新頁(yè)面DOM的內(nèi)容而無(wú)需刷新整個(gè)頁(yè)面。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）39.3.2失敗的Ajax請(qǐng)求Ajax服務(wù)器訪問(wèn)相對(duì)于傳統(tǒng)的非Ajax服務(wù)器訪問(wèn)方式來(lái)說(shuō)是一種異步數(shù)據(jù)訪問(wèn)過(guò)程，在異步環(huán)境下往往需要考慮更多的異常情況，這些異常情況包括：請(qǐng)求超時(shí)會(huì)發(fā)生什么事？應(yīng)該等待多長(zhǎng)時(shí)間？要是服務(wù)器響應(yīng)的數(shù)據(jù)格式不正確，該如何處理？如果用戶(hù)同時(shí)發(fā)出了多個(gè)請(qǐng)求該如何處理？這些異常情況都是在開(kāi)發(fā)一個(gè)使用Ajax技術(shù)的頁(yè)面時(shí)必須處理的問(wèn)題25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）49.4Ajax數(shù)據(jù)格式9.4.1XML9.4.2JSON25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）59.4.1XMLXMLHttpRequest對(duì)象最初在設(shè)計(jì)時(shí)就是用來(lái)返回XML格式的結(jié)果的。它有一個(gè)responseXML屬性，該屬性返回的XML屬性會(huì)被自動(dòng)解析成一個(gè)可以定位的XMl格式的DOM對(duì)象，讓我們可以通過(guò)DOM方法在其中定位節(jié)點(diǎn)和獲取數(shù)據(jù)。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）69.4.2JSON如果我們利用字符串格式的服務(wù)器響應(yīng)傳輸一段JavaScript語(yǔ)言代碼，然后用eval()函數(shù)執(zhí)行，代碼如下所示：eval(transport.responseText);這樣的話(huà)我們將可以把服務(wù)器響應(yīng)作為一段插入頁(yè)面的JavaScript代碼來(lái)執(zhí)行了?，F(xiàn)在，這種技巧已經(jīng)演變成為了一種非常優(yōu)秀的Ajax數(shù)據(jù)傳輸方式，那就是JSON（JavaScriptObjectNotation，JavaScript對(duì)象表示法）。JSON格式表示的數(shù)據(jù)對(duì)象實(shí)際上就是JavaScript語(yǔ)言中的字面量對(duì)象，但是只允許包含以下幾種類(lèi)型：字符串、數(shù)值、數(shù)組和其他字面量對(duì)象，并且鍵和字符串類(lèi)型的值都必須用雙引號(hào)括起來(lái)。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）79.5創(chuàng)建Ajax應(yīng)用對(duì)象在前面幾節(jié)中已經(jīng)初步建立了應(yīng)用Ajax技術(shù)訪問(wèn)服務(wù)器獲取數(shù)據(jù)的頁(yè)面，但是頁(yè)面中的JavaScript代碼并沒(méi)有組織的很好，尤其是在實(shí)現(xiàn)Ajax技術(shù)的時(shí)候很繁瑣，而且代碼也不具備可重用性。本節(jié)的目的就是要建立一個(gè)對(duì)象，封裝實(shí)現(xiàn)Ajax頁(yè)面所需的全部功能，以便在實(shí)際項(xiàng)目中使用。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）89.6Ajax異常處理9.6.1訪問(wèn)超時(shí)9.6.2HTTP狀態(tài)代碼9.6.3多從請(qǐng)求9.6.4意外數(shù)據(jù)25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）99.6.1訪問(wèn)超時(shí)在Ajax服務(wù)器請(qǐng)求發(fā)送出去之后，發(fā)出請(qǐng)求的頁(yè)面會(huì)一直等待服務(wù)器響應(yīng)，直到服務(wù)器關(guān)閉連接。如果遇到一些特殊情況，比如服務(wù)器繁忙無(wú)法及時(shí)響應(yīng)、Internet連接不通暢或服務(wù)器關(guān)閉等，用戶(hù)就會(huì)覺(jué)得等待時(shí)間太長(zhǎng)，從而開(kāi)始懷疑是否頁(yè)面本身有錯(cuò)誤。為了應(yīng)對(duì)這一情況，比較成熟的做法是讓頁(yè)面等待一段時(shí)間后讓調(diào)用超時(shí)，并處理超時(shí)錯(cuò)誤。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）109.6.2HTTP狀態(tài)代碼Web服務(wù)器在接收到任何一種訪問(wèn)請(qǐng)求時(shí)都會(huì)返回一個(gè)響應(yīng)。在響應(yīng)里面會(huì)包含一個(gè)狀態(tài)代碼，代碼表示了一些與服務(wù)器響應(yīng)相關(guān)的信息。一個(gè)正確的服務(wù)器響應(yīng)往往會(huì)包含的狀態(tài)代碼為200。在200區(qū)間內(nèi)的狀態(tài)代碼都表示成功。300區(qū)間內(nèi)的代碼表示服務(wù)器重定向。400區(qū)間是請(qǐng)求錯(cuò)誤，這也是我們?cè)跒g覽器中常見(jiàn)的400錯(cuò)誤，可能是請(qǐng)求沒(méi)有正確發(fā)送，也有可能是頁(yè)面不存在。最后500區(qū)間表示服務(wù)器本身出錯(cuò)。對(duì)于Ajax請(qǐng)求來(lái)說(shuō)，只有得到200區(qū)間內(nèi)的相應(yīng)代碼才能說(shuō)是正確的服務(wù)器響應(yīng)。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）119.6.3多從請(qǐng)求所謂多重請(qǐng)求，指的是一個(gè)頁(yè)面在發(fā)出一個(gè)Ajax請(qǐng)求后在服務(wù)器沒(méi)有發(fā)回響應(yīng)前又向該服務(wù)器發(fā)出一個(gè)同樣的Ajax請(qǐng)求。在Ajax網(wǎng)站應(yīng)用中，多重請(qǐng)求會(huì)經(jīng)常發(fā)生，所以我們?cè)诰帉?xiě)Ajax頁(yè)面時(shí)必須考慮到多重請(qǐng)求的情況。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）129.6.4意外數(shù)據(jù)對(duì)于使用了Ajax技術(shù)的頁(yè)面來(lái)說(shuō)，還有一個(gè)需要注意的問(wèn)題，也就是對(duì)服務(wù)器發(fā)回的響應(yīng)的數(shù)據(jù)格式的檢查。服務(wù)器返回的數(shù)據(jù)不一定總是正確的。如果打算以特定的格式返回?cái)?shù)據(jù)，比如XML或JSON，應(yīng)該在服務(wù)器端設(shè)置一種特殊的數(shù)據(jù)，讓它在結(jié)果里能返回某種錯(cuò)誤代碼。然后讓客戶(hù)端在處理服務(wù)器發(fā)回的結(jié)果之前，先檢查錯(cuò)誤代碼，如果服務(wù)器返回的不是想要的內(nèi)容，客戶(hù)端也要能處理這種異常情況。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）139.7利用JavaScript庫(kù)實(shí)現(xiàn)Ajax應(yīng)用9.7.1jQuery9.7.2ExtJS25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）149.7.1jQueryjQuery庫(kù)是圍繞DOM操作來(lái)設(shè)計(jì)的，它在處理Ajax的方式上也是如此。首先在jQuery庫(kù)中提供了一個(gè)最便捷的Ajax調(diào)用函數(shù)，也就是load()函數(shù)，該函數(shù)可以用在利用jQuery庫(kù)獲取的DOM對(duì)象上，比如：$("#content").load("a.htm");上述代碼首先通過(guò)$函數(shù)獲取頁(yè)面中ID為content的元素，然后它向指定的URL發(fā)出Ajax請(qǐng)求，并用相應(yīng)的結(jié)果替換掉content元素中的內(nèi)容。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）159.7.2ExtJSExtJS是一個(gè)非常優(yōu)秀的JavaScript庫(kù)，可以用來(lái)開(kāi)發(fā)富有華麗外觀的富客戶(hù)端應(yīng)用，能使Web應(yīng)用更加具有活力。ExtJS庫(kù)的設(shè)計(jì)目的與jQuery庫(kù)不一樣，它更注重于為頁(yè)面提供各種外觀組件而不是簡(jiǎn)化JavaScript編碼，所以ExtJS庫(kù)并沒(méi)有向jQuery庫(kù)那樣提供很多用于簡(jiǎn)化Ajax應(yīng)用的對(duì)象，而是提供了一個(gè)功能完整的全局函數(shù)Ext.Ajax.request()就像jQuery庫(kù)中提供的ajax()函數(shù)一樣，該函數(shù)通過(guò)指定的輸入?yún)?shù)可以實(shí)現(xiàn)任何類(lèi)型的Ajax請(qǐng)求發(fā)送和解析任何類(lèi)型的服務(wù)器響應(yīng)數(shù)據(jù)。25十二月2023JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）16

本章小結(jié)本章主要說(shuō)明了什么是Ajax，并且比較了它和傳統(tǒng)頁(yè)面調(diào)用的差異。介紹了Ajax中使用的各種數(shù)據(jù)交換格式，以及它們各自適合的場(chǎng)景。本章還逐步講解了如何自己設(shè)計(jì)一個(gè)Ajax對(duì)象，并且演示了如何為各種意外情況規(guī)劃和擴(kuò)展Ajax對(duì)象。最后重點(diǎn)講解了兩個(gè)典型的JavaS