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

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