JavaScript語言與Ajax應用Ajax應用課件

1、 第9章 Ajax應用9.1 Ajax簡介9.2 Ajax應用分析9.3 Ajax過程解析9.4 Ajax數(shù)據(jù)格式9.5 創(chuàng)建Ajax應用對象9.6 Ajax異常處理9.7 利用JavaScript庫實現(xiàn)Ajax應用18 八月 2022JavaScript語言與Ajax應用（第二版）1第1頁，共19頁。9.1 Ajax簡介Ajxa技術說的是把JavaScript、CSS、DOM和HTML結合起來的一種新的編程思路和方法。我們知道，常規(guī)的Web應用在運行時需要經常性的刷新整個頁面。用戶在頁面上做出一項選擇或者輸入一些數(shù)據(jù)，瀏覽器把這些信息發(fā)送給服務器，服務器根據(jù)用戶的操作返回一個新的頁面，即使用

2、戶只是對服務器做了一次簡單的數(shù)據(jù)訪問，服務器也需要返回一個全新的頁面。Ajax技術等于是在客戶端和服務器端之間加入了一個中間層：JavaScript代碼先把請求從客戶端發(fā)送給中間層，再由這個中間層把請求轉發(fā)給服務器端，服務器端的響應也是先由這個中間層接收，再由這個中間層把響應的結果轉發(fā)給客戶端的JavaScript代碼處理。18 八月 2022JavaScript語言與Ajax應用（第二版）2第2頁，共19頁。9.2 Ajax應用分析現(xiàn)在很多互聯(lián)網公司都利用Ajax技術開發(fā)出了功能強大的Web應用，其中Google公司的Gmail電子郵件應用就出色的示范了Ajax技術的威力。在Gmail應用中

3、，電子郵件草稿在點擊保存按鈕之后，會被發(fā)送給服務器保存起來，而這個過程并不會刷新整個頁面，如圖所示。18 八月 2022JavaScript語言與Ajax應用（第二版）3第3頁，共19頁。9.3 Ajax過程解析9.3.1 Ajax的請求/響應過程9.3.2 失敗的Ajax請求18 八月 2022JavaScript語言與Ajax應用（第二版）4第4頁，共19頁。9.3.1 Ajax的請求/響應過程在傳統(tǒng)的頁面請求過程中，瀏覽器發(fā)出對數(shù)據(jù)的請求，然后等待服務器發(fā)回響應，響應接受完成后瀏覽器渲染頁面。而在頁面中使用Ajax技術后，可以大大減少客戶端與服務器端之間的數(shù)據(jù)傳輸量，對數(shù)據(jù)的請求也可以異

4、步發(fā)出，在整個Ajax服務器訪問過程中，用戶不必等待服務器響應和頁面刷新，而且服務器響應接收后只需要改變當前文檔對象，不需要影響整個頁面（包括圖片和CSS等資源）。也就是說可以實現(xiàn)訪問服務器接受響應并更新頁面DOM的內容而無需刷新整個頁面。18 八月 2022JavaScript語言與Ajax應用（第二版）5第5頁，共19頁。9.3.2 失敗的Ajax請求Ajax服務器訪問相對于傳統(tǒng)的非Ajax服務器訪問方式來說是一種異步數(shù)據(jù)訪問過程，在異步環(huán)境下往往需要考慮更多的異常情況，這些異常情況包括：請求超時會發(fā)生什么事？應該等待多長時間？要是服務器響應的數(shù)據(jù)格式不正確，該如何處理？如果用戶同時發(fā)出了

5、多個請求該如何處理？這些異常情況都是在開發(fā)一個使用Ajax技術的頁面時必須處理的問題18 八月 2022JavaScript語言與Ajax應用（第二版）6第6頁，共19頁。9.4 Ajax數(shù)據(jù)格式9.4.1 XML9.4.2 JSON18 八月 2022JavaScript語言與Ajax應用（第二版）7第7頁，共19頁。9.4.1 XMLXMLHttpRequest對象最初在設計時就是用來返回XML格式的結果的。它有一個responseXML屬性，該屬性返回的XML屬性會被自動解析成一個可以定位的XMl格式的DOM對象，讓我們可以通過DOM方法在其中定位節(jié)點和獲取數(shù)據(jù)。18 八月 2022Ja

6、vaScript語言與Ajax應用（第二版）8第8頁，共19頁。9.4.2 JSON如果我們利用字符串格式的服務器響應傳輸一段JavaScript語言代碼，然后用eval()函數(shù)執(zhí)行，代碼如下所示：eval(transport.responseText);這樣的話我們將可以把服務器響應作為一段插入頁面的JavaScript代碼來執(zhí)行了?，F(xiàn)在，這種技巧已經演變成為了一種非常優(yōu)秀的Ajax數(shù)據(jù)傳輸方式，那就是JSON（JavaScript Object Notation，JavaScript對象表示法）。JSON格式表示的數(shù)據(jù)對象實際上就是JavaScript語言中的字面量對象，但是只允許包含以下

7、幾種類型：字符串、數(shù)值、數(shù)組和其他字面量對象，并且鍵和字符串類型的值都必須用雙引號括起來。18 八月 2022JavaScript語言與Ajax應用（第二版）9第9頁，共19頁。9.5 創(chuàng)建Ajax應用對象在前面幾節(jié)中已經初步建立了應用Ajax技術訪問服務器獲取數(shù)據(jù)的頁面，但是頁面中的JavaScript代碼并沒有組織的很好，尤其是在實現(xiàn)Ajax技術的時候很繁瑣，而且代碼也不具備可重用性。本節(jié)的目的就是要建立一個對象，封裝實現(xiàn)Ajax頁面所需的全部功能，以便在實際項目中使用。18 八月 2022JavaScript語言與Ajax應用（第二版）10第10頁，共19頁。 9.6 Ajax異常處理9

8、.6.1 訪問超時9.6.2 HTTP狀態(tài)代碼9.6.3 多從請求9.6.4 意外數(shù)據(jù)18 八月 2022JavaScript語言與Ajax應用（第二版）11第11頁，共19頁。9.6.1 訪問超時在Ajax服務器請求發(fā)送出去之后，發(fā)出請求的頁面會一直等待服務器響應，直到服務器關閉連接。如果遇到一些特殊情況，比如服務器繁忙無法及時響應、Internet連接不通暢或服務器關閉等，用戶就會覺得等待時間太長，從而開始懷疑是否頁面本身有錯誤。為了應對這一情況，比較成熟的做法是讓頁面等待一段時間后讓調用超時，并處理超時錯誤。18 八月 2022JavaScript語言與Ajax應用（第二版）12第12頁

9、，共19頁。9.6.2 HTTP狀態(tài)代碼Web服務器在接收到任何一種訪問請求時都會返回一個響應。在響應里面會包含一個狀態(tài)代碼，代碼表示了一些與服務器響應相關的信息。一個正確的服務器響應往往會包含的狀態(tài)代碼為200。在200區(qū)間內的狀態(tài)代碼都表示成功。300區(qū)間內的代碼表示服務器重定向。400區(qū)間是請求錯誤，這也是我們在瀏覽器中常見的400錯誤，可能是請求沒有正確發(fā)送，也有可能是頁面不存在。最后500區(qū)間表示服務器本身出錯。對于Ajax請求來說，只有得到200區(qū)間內的相應代碼才能說是正確的服務器響應。18 八月 2022JavaScript語言與Ajax應用（第二版）13第13頁，共19頁。9.

10、6.3 多從請求所謂多重請求，指的是一個頁面在發(fā)出一個Ajax請求后在服務器沒有發(fā)回響應前又向該服務器發(fā)出一個同樣的Ajax請求。在Ajax網站應用中，多重請求會經常發(fā)生，所以我們在編寫Ajax頁面時必須考慮到多重請求的情況。18 八月 2022JavaScript語言與Ajax應用（第二版）14第14頁，共19頁。9.6.4 意外數(shù)據(jù)對于使用了Ajax技術的頁面來說，還有一個需要注意的問題，也就是對服務器發(fā)回的響應的數(shù)據(jù)格式的檢查。服務器返回的數(shù)據(jù)不一定總是正確的。如果打算以特定的格式返回數(shù)據(jù)，比如XML或JSON，應該在服務器端設置一種特殊的數(shù)據(jù)，讓它在結果里能返回某種錯誤代碼。然后讓客戶

11、端在處理服務器發(fā)回的結果之前，先檢查錯誤代碼，如果服務器返回的不是想要的內容，客戶端也要能處理這種異常情況。18 八月 2022JavaScript語言與Ajax應用（第二版）15第15頁，共19頁。9.7 利用JavaScript庫實現(xiàn)Ajax應用9.7.1 jQuery9.7.2 ExtJS18 八月 2022JavaScript語言與Ajax應用（第二版）16第16頁，共19頁。9.7.1 jQueryjQuery庫是圍繞DOM操作來設計的，它在處理Ajax的方式上也是如此。首先在jQuery庫中提供了一個最便捷的Ajax調用函數(shù)，也就是load()函數(shù)，該函數(shù)可以用在利用jQuery庫

12、獲取的DOM對象上，比如：$(#content).load(a.htm);上述代碼首先通過$函數(shù)獲取頁面中ID為content的元素，然后它向指定的URL發(fā)出Ajax請求，并用相應的結果替換掉content元素中的內容。18 八月 2022JavaScript語言與Ajax應用（第二版）17第17頁，共19頁。9.7.2 ExtJSExtJS是一個非常優(yōu)秀的JavaScript庫，可以用來開發(fā)富有華麗外觀的富客戶端應用，能使Web應用更加具有活力。ExtJS庫的設計目的與jQuery庫不一樣，它更注重于為頁面提供各種外觀組件而不是簡化JavaScript編碼，所以ExtJS庫并沒有向jQuery庫那樣提供很多用于簡化Ajax應用的對象，而是提供了一個功能完整的全局函數(shù)Ext.Ajax.request()就像jQuery庫中提供的ajax()函數(shù)一樣，該函數(shù)通過指定的輸入參數(shù)可以實現(xiàn)任何類型的Ajax請求發(fā)送和解析任何類型的服務器響應數(shù)據(jù)。18 八月 2022JavaScript語言與Ajax應用（第二版）18第18頁，共19頁。 本章小結本章主要說明了什么是Ajax，并且比較了它和傳統(tǒng)頁面調用的差異。介紹了Ajax中使用的各種數(shù)據(jù)交換格式，以及它們各自適合的場景。本章還逐步講解了如何自己設計一個Ajax對象，并且演示了如何為各種意外情