慧橋教育Ajax學習課件

1、Ajax,課程安排,Ajax基礎(chǔ) 使用Ajax發(fā)送異步請求 在請求和響應中使用XML 使用JSON進行數(shù)據(jù)傳輸,第一講,Ajax基礎(chǔ),什么是Ajax,先來點感覺，看些例子 BACKBASE購物網(wǎng)站 Google Suggest Google Map and many more,Ajax定義,Ajax (Asynchronous JavaScript and XML)不是一個新的技術(shù)，事實上，它是一些舊有的成熟的技術(shù)以一種全新的更加強大的方式整合在一起 Ajax的關(guān)鍵技術(shù)： 使用XHTML(HTML)和CSS構(gòu)建標準化的展示層 使用DOM進行動態(tài)顯示和交互 使用XML和XSLT進行數(shù)據(jù)交換和操縱

2、 使用XMLHttpRequest異步獲取數(shù)據(jù) 使用JavaScript將所有元素綁定在一起,傳統(tǒng)Web應用與Ajax應用的比較,傳統(tǒng)Web應用與Ajax應用的比較（cont.,在傳統(tǒng)的Web應用模型下，大部分的用戶操作都會發(fā)送一個HTTP請求給服務(wù)器，然后服務(wù)器開始處理（接收數(shù)據(jù)，執(zhí)行業(yè)務(wù)邏輯，訪問數(shù)據(jù)庫等），最后向瀏覽器返回HTML頁面。當服務(wù)器處理請求時，用戶能夠做什么呢？只有等待,傳統(tǒng)Web應用與Ajax應用的比較（cont.,在傳統(tǒng)的Web應用模型下，客戶機 （瀏覽器或者本地機器上運行的代碼）向服務(wù)器發(fā)出請求。該請求是同步的，客戶機等待服務(wù)器的響應。當客戶機等待的時候，會用某種形式通

3、知您正在處理： 沙漏（特別是 Windows 上） 旋轉(zhuǎn)皮球（通常在 Mac 機器上） 應用程序基本上凍結(jié)了，然后過一段時間光標變化了 這正是傳統(tǒng)Web 應用程序讓人感到笨拙或緩慢的原因 缺乏真正的交互性。按下按鈕時，應用程序?qū)嶋H上變得不能使用，直到剛剛觸發(fā)的請求得到響應。如果請求需要大量服務(wù)器處理，那么等待的時間可能很長,傳統(tǒng)Web應用與Ajax應用的比較（cont.,Ajax應用通過在用戶和服務(wù)器之間引入一個媒介（Ajax engine）來異步發(fā)送請求，消除了傳統(tǒng)的發(fā)送請求等待發(fā)送請求等待的特性，極大的提高了用戶體驗,JavaScript基礎(chǔ),JavaScript簡介,JavaScript

4、是Netscape公司與Sun公司合作開發(fā)的。在JavaScript出現(xiàn)之前，Web瀏覽器不過是一種能夠顯示超文本文檔的軟件的基本部分。而在JavaScript之后，網(wǎng)頁的內(nèi)容不再局限于枯燥的文本，可交互性得到了顯著的改善 JavaScript是一種腳本語言，一種解釋性的，基于對象的腳本語言。JavaScript腳本通常只能通過Web瀏覽器進行解釋和執(zhí)行而不是像普通意義上的程序那樣可以獨立運行 在HTML基礎(chǔ)上，使用JavaScript 可以開發(fā)交互式Web網(wǎng)頁。 JavaScript的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時性的、動態(tài)的、交互性的關(guān)系，使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容 注

5、意，JavaScript與Java沒有任何聯(lián)系,JavaScript語法 語句,JavaScript腳本的基本組成單位。 只需要簡單地把各條語句放在不同的行上就可以分割開來，不需要加分號“；”結(jié)束: first statement second statement 但在每條語句的末尾添加“；”是一種良好的編程習慣： first statement; second statement,JavaScript語法注釋,單行注釋（雙斜杠）： / line1 多行注釋： /* line1 line2 */ HTML風格注釋（不推薦使用）： ”來結(jié)束,JavaScript語法變量,JavaScript不要

6、求在聲明變量時必須明確指出其數(shù)據(jù)類型（所以稱JavaScript為弱類型語言），可以使用統(tǒng)一的關(guān)鍵字var進行聲明： var age = 33; mood = “happy”; 但是提前對變量做出聲明是一種良好的編程習慣 變量名允許包含字母、數(shù)字、美元符號($)和下劃線字符，但不允許包括空格或標點符號,JavaScript語法數(shù)據(jù)類型,JavaScript變量的類型是由變量的值決定的，可以對同一個變量賦予不同數(shù)據(jù)類型的值： var age = “thirty three”; age = 33; JavaScript中重要的數(shù)據(jù)類型： 未定義（undefined），變量未定義 空（null），變

7、量未初始化 字符串（string），可以放在單引號或雙引號中 數(shù)值（number），可以表示整數(shù)、浮點數(shù) 布爾型（boolean），true或false 對象（object,JavaScript語法數(shù)組,數(shù)組用來存儲一組值，使用關(guān)鍵字Array來聲明，聲明時可以指明數(shù)組的長度： var colors = new Array(); var colors = new Array(3); 其中new關(guān)鍵字可以省略，類似其它語言，數(shù)組的下標從0開始，賦值方法也和其它語言類似： colors0 = “red”; colors1 = “black”; colors2 = “white”; 還可以使用方括號

8、創(chuàng)建數(shù)組時同時初始化： var colors = “red”, “black”, “white,JavaScript語法數(shù)組（cont.,使用方括號創(chuàng)建數(shù)組對象的簡單方法： var colors = ; /聲明空數(shù)組對象 colors0 = “red”; colors1 = “black”; 通過數(shù)組的length屬性可以得到數(shù)組中元素的個數(shù)。數(shù)組的長度可以動態(tài)擴展： colors3 = “blue”; colors8 = “grey”; 關(guān)聯(lián)數(shù)組：在填充數(shù)組時為每個新元素明確地給出下標： colors“r” = “red”; colors“b” = “black,JavaScript語法操作

9、、條件語句、循環(huán)語句,JavaScript中的算術(shù)運算符（+、-、*、/、+、-等）、比較運算符（、=）、條件語句（if、while、for等,JavaScript語法函數(shù),使用函數(shù)可以避免重復輸入大量相同的內(nèi)容。JavaScript中使用function關(guān)鍵字定義函數(shù)： function funcname (arg1, arg2, ) statements; 聲明一個簡單的函數(shù)： function multiply (num1, num2) var total = num1 * num2; return total; 聲明后可以直接調(diào)用此函數(shù)獲取結(jié)果：var result = multipl

10、y (5, 9); 注意，JavaScript中的函數(shù)不需聲明返回類型，參數(shù)也不需要聲明類型,JavaScript語法對象,JavaScript對象是由一組相關(guān)的屬性和方法構(gòu)成的數(shù)據(jù)實體。屬性和方法都要使用“.”來訪問： perty object.method() 使用函數(shù)來定義“類”： function Person() this.age = 12; = “no name”; this.sayHello = function() alert (“Hello ” + ); /其中this關(guān)鍵字不能省略！ 使用new關(guān)鍵字來創(chuàng)建對象實例：

11、 var vincent = new Person(,DOM基礎(chǔ),DOM簡介,DOM是”Document Object Model”（文檔對象模型）的首字母縮寫。當創(chuàng)建了一個網(wǎng)頁并把它加載到Web瀏覽器中時，就會在幕后創(chuàng)建一個文檔對象模型 DOM表示被加載到瀏覽器窗口里的當前頁面：瀏覽器向我們提供了當前頁面的模型，而我們可以通過JavaScript訪問這個模型 DOM把一份文檔表示為一棵樹,DOM樹結(jié)構(gòu),如下的HTML頁面,DOM樹結(jié)構(gòu)（cont.,瀏覽器加載該頁面并將之轉(zhuǎn)換為樹形結(jié)構(gòu),DOM樹結(jié)構(gòu)（cont.,DOM樹中的一切是以最外層的HTML包含元素，即html元素開始的。使用樹的比喻，

12、這叫做根元素（root element） 從根流出的線表示不同標記部分之間的關(guān)系。head和body元素是html根元素的孩子（child）；title是head的孩子，而文本 “Trees, trees, everywhere”是title的孩子；相對的，head是title的父親（parent），title是文本 “Trees, trees, everywhere” 的父親。處在同一層次的且互不包含的兩個分支（如head和body）之間稱為兄弟（sibling）關(guān)系。整個樹就這樣組織下去，直到瀏覽器獲得與上圖類似的結(jié)構(gòu) 通常把這樣的樹結(jié)構(gòu)成為一棵節(jié)點樹,節(jié)點 （node,DOM文檔是由節(jié)點

13、構(gòu)成的集合，此時的節(jié)點是文檔樹上的樹枝或者樹葉 DOM中節(jié)點的類型： 元素節(jié)點（element node），諸如、等。元素節(jié)點可以包含其它的元素，唯一沒有被包含在其它元素里的元素是，它是根元素 屬性節(jié)點（attribute node），元素或多或少地有一些屬性，屬性可以對元素做出一些具體的描述。因為屬性總是被放到起始標簽里，所以屬性節(jié)點總是被包含在元素節(jié)點中 文本節(jié)點（text node），元素中包含著文本節(jié)點“Trees, trees, everywhere,基本DOM方法,getElementById(id) 返回一個給定id屬性的元素節(jié)點相對應的對象。這個方法是與document對象相關(guān)

14、聯(lián)的函數(shù)。其中document對象代表著整個HTML文檔并可以用來訪問所有頁面中的元素 getElementsByTagName(tagname) 返回一個對象數(shù)組，它們分別對應著文檔里的一個特定的元素節(jié)點 getAttribute() 返回對象的屬性值 setAttribute() 修改對象的屬性值,重要DOM屬性,childNodes 可以將節(jié)點樹中任何一個元素的所有子元素檢索出來，這個屬性返回一個數(shù)組，包含了給定元素節(jié)點的全體子元素 nodeName 返回元素節(jié)點的名稱。注意，返回的結(jié)果全部是大寫 nodeType 用來區(qū)分節(jié)點的類型，元素節(jié)點的nodeType屬性值是1，屬性節(jié)點的no

15、deType屬性值是2，文本節(jié)點的nodeType屬性值是3 nodeValue 可以用來存取文本節(jié)點的值。對于元素節(jié)點或?qū)傩怨?jié)點這個屬性返回空,重要DOM屬性（cont.,firstChild和lastChild 第一個和最后一個孩子節(jié)點。 node.firstChild等價于node.childNodes0， node.lastChild等價于node.childNodesnode.childNodes.length 1 parentNode 返回元素的父節(jié)點 nextSibling 返回下一個兄弟節(jié)點,改變網(wǎng)頁結(jié)構(gòu)的DOM方法,createElement(tagname) 創(chuàng)建新的元素節(jié)

16、點，此方法與document對象相關(guān)聯(lián)。新建的元素節(jié)點并未與節(jié)點樹相連 appendChild(node) 把新建的節(jié)點插入到節(jié)點樹的某個節(jié)點下，成為這個節(jié)點的子節(jié)點 createTextNode(text) 創(chuàng)建文本節(jié)點 insertBefore(newNode, targetNode) 把一個新元素插入到一個現(xiàn)有元素的前面 replaceChild(newChild, oldChild) 替換一個孩子節(jié)點 removeChild(node) 刪除一個孩子節(jié)點,基于DOM的Web應用程序示例,基于DOM的Web應用程序示例,首先建立一個非常簡單的應用程序，然后再添加一點DOM魔法。注意，DO

17、M可以移動網(wǎng)頁中的任何東西而不需要提交表單。創(chuàng)建一個簡單的網(wǎng)頁，上面只顯示一個普通的舊式大禮帽，還有一個標記為 Hocus Pocus! 的按鈕,初始的HTML清單,注意按鈕的類型是 button 而不是提交按鈕。如果使用提交按鈕，單擊該按鈕將導致瀏覽器提交表單。通過使用一般輸入按鈕而不是提交按鈕，可以把 JavaScript 函數(shù)和它連接起來與瀏覽器交互而無需提交表單,初始的HTML頁面預覽,目標效果,下面增加一些魔法，用兔子的圖片替換頁面中原有的圖片,使用getElementById()函數(shù)獲得元素節(jié)點,首先找到網(wǎng)頁中表示img元素的DOM節(jié)點。一般來說，最簡單的辦法是用getElemen

18、tById()方法，它屬于代表Web頁面的document對象： var elementNode = document.getElementById(“id,修改圖片，麻煩的辦法,完成所需修改有幾種方法：有些簡單，有些麻煩。但是運用較麻煩的辦法是一次很好的DOM練習，首先看看換圖片比較麻煩的辦法；后面再重新分析一下看看有沒有更簡單的辦法 用帶兔子的新照片替換原有圖片的辦法如下： 1、創(chuàng)建新的img元素 2、訪問當前img元素的父元素，也就是它的容器 3、在已有img元素之前插入新的img元素作為該容器的子級 4、刪除原來的img元素 5、結(jié)合起來以便在用戶單擊按鈕時調(diào)用剛剛創(chuàng)建的函數(shù),1、創(chuàng)建

19、新的img元素,創(chuàng)建新的img元素： var newImage = document.createElement(img); 可以創(chuàng)建一個新的元素節(jié)點，元素名為img。在HTML中基本上就是： 下面需要增加一個屬性src，它指定了要加載的圖片： newImage.setAttribute(src, rabbit-hat.gif); 注：如果對已有的屬性調(diào)用setAttribute()，則把原來的值替換為指定的值。但是，如果調(diào)用setAttribute()并指定一個不存在的屬性，DOM就會使用提供的值增加一個屬性,2、獲得原始圖片的父元素,現(xiàn)在有了要插入的圖片，還需要找到插入的地方。要將其插入到

20、已有圖片之前然后再刪除原來的圖片。為此需要知道已有圖片的父元素： var imgParent = hatImage.parentNode,3、插入新圖片,添加子節(jié)點的方法： insertBefore(newNode, targetNode) appendChild(newNode) 把新圖片元素插入到原有圖片之前： imgParent.insertBefore(newImage, hatImage); 現(xiàn)在原圖片的父元素有了兩個 子元素：新圖片和緊跟在后面的舊圖片,4、刪除舊圖片,因為已經(jīng)得到了舊圖片元素的父節(jié)點，只要調(diào)用removeChild()并把需要刪除的節(jié)點傳遞給它即可： imgPar

21、ent.removeChild(hatImage); 完整的JavaScript函數(shù),5、表單元素連接JavaScript,每當用戶點擊Hocus Pocus!按鈕的時候運行showRabbit()函數(shù)。為此只要向HTML中增加一個簡單的 onclick事件處理程序即可,思考：替換圖片更簡單的辦法,1、使用replaceChild()函數(shù) imgParent.replaceChild(newImage, hatImage); 2、直接修改圖片的src屬性 hatImage.setAttribute(src, rabbit-hat.gif); 3、使用HTML DOM方法 hatImage.sr

22、c = “rabbit-hat.gif,然后把兔子藏起來,雖然兔子從帽子中跳出來了，但是屏幕下方的按鈕仍然顯示 Hocus Pocus! 和調(diào)用 showRabbit()，下面做一些修改，當用戶再次點擊按鈕時把兔子藏起來,1、修改按鈕的標簽,使用我們熟悉的方法，實現(xiàn)這個簡單的功能，在showRabbit() 函數(shù)中添加如下語句,2、隱藏兔子,隱藏兔子的方法基本上和放兔子出來完全相反，將圖片的src屬性再改回舊圖片。創(chuàng)建一個新的 JavaScript 函數(shù)來完成這項任務(wù),3、更改事件處理函數(shù),現(xiàn)在雖然按鈕的標簽改變了，但是單擊按鈕時的動作沒有變。當用戶單擊按鈕時可以使用DOM改變事件或者發(fā)生的動

23、作。在JavaScript中，可以通過按鈕的onclick屬性來引用該事件，因此可以改變按鈕觸發(fā)的事件：只要賦給onclick屬性一個新的函數(shù),第二講,使用Ajax發(fā)送異步請求,使用Ajax發(fā)送異步請求示例,考慮以下情景： 當用戶輸入郵編后，系統(tǒng)自動填充相應的城市和省份,創(chuàng)建靜態(tài)頁面原型,創(chuàng)建XMLHttpRequest,要實現(xiàn)這種功能，必須非常熟悉一個 JavaScript 對象，即 XMLHttpRequest（簡稱XHR）。這個小小的對象實際上已經(jīng)在幾種瀏覽器中存在一段時間了，它是Ajax 的核心。該對象的幾個常用方法和屬性： open()：建立到服務(wù)器的新請求 send()：向服務(wù)器發(fā)

24、送請求 readyState：提供當前 HTML 的就緒狀態(tài) status：服務(wù)器響應的狀態(tài)代碼 responseText：服務(wù)器返回的請求響應文本,創(chuàng)建XMLHttpRequest （cont.,創(chuàng)建跨瀏覽器的XMLHttpRequest對象,創(chuàng)建XMLHttpRequest （cont.,注意不要被這些花括號迷住了眼睛，下面分別介紹每一步: 創(chuàng)建一個新變量 request 并賦值 false。使用 false 作為判斷條件，表示還沒有創(chuàng)建 XMLHttpRequest 對象 增加try/catch塊： 嘗試創(chuàng)建 XMLHttpRequest 對象 如果失敗,先嘗試使用較新版本的Micros

25、oft瀏覽器創(chuàng)建 Microsoft 兼容的對象（Msxml2.XMLHTTP），如果失敗（嘗試使用較老版本的Microsoft瀏覽器創(chuàng)建 Microsoft兼容的對象（Microsoft.XMLHTTP） 如果全部失敗，則保證request的值仍然為false 檢查request是否仍然為false（如果一切順利就不會是false） 如果出現(xiàn)問題則使用JavaScript警告通知用戶出現(xiàn)了問題,建立到服務(wù)器的請求,準備好XMLHttpRequest對象，就可以建立到服務(wù)器的請求了。 首先結(jié)合一些表單中的數(shù)據(jù)來構(gòu)造URL： 注：escape() 方法用于轉(zhuǎn)義不能用明文正確發(fā)送的任何字符。比如，

26、空格將被轉(zhuǎn)換成字符 %20，從而能夠在 URL 中傳遞這些字符。 然后建立請求,建立到服務(wù)器的請求（cont.,使用 XMLHttpRequest 對象的 open() 方法來建立請求。該方法有五個參數(shù)： request-type：發(fā)送請求的類型。典型的值是 GET 或 POST，但也可以發(fā)送 HEAD 請求 url：要連接的 URL asynch：如果希望使用異步連接則為 true，否則為 false。該參數(shù)是可選的，默認為 true username：如果需要身份驗證，則可以在此指定用戶名。該可選參數(shù)沒有默認值 password：如果需要身份驗證，則可以在此指定口令。該可選參數(shù)沒有默認值

27、通常使用其中的前三個參數(shù)。事實上，即使需要異步連接，通常指定第三個參數(shù)為 “true”，這樣更容易理解,使用XMLHttpRequest發(fā)送請求,一旦請求用 open() 配置好之后，就可以使用send()方法發(fā)送請求了，send() 方法只有一個參數(shù)，就是要發(fā)送的內(nèi)容 但是我們前面通過URL本身已經(jīng)發(fā)送了zipcode的值，所以這里不需要通過 send() 傳遞數(shù)據(jù)，只要傳遞 null 作為該方法的參數(shù)即可,設(shè)置回調(diào)函數(shù),由于是異步請求，請求發(fā)出后JavaScript 方法不會等待服務(wù)器處理完成，因此代碼將繼續(xù)執(zhí)行，就是說，將退出該方法而把控制返回給表單。用戶可以繼續(xù)輸入信息，應用程序不會等

28、待服務(wù)器 當服務(wù)器完成請求之后，需要指定該如何處理響應。XMLHttpRequest對象的onreadystatechange屬性允許指定一個回調(diào)函數(shù)反向調(diào)用Web頁面中的代碼 當服務(wù)器完成請求之后，會查看XMLHttpRequest對象，特別是 onreadystatechange屬性。然后調(diào)用該屬性指定的任何方法。之所以稱為回調(diào)是因為由服務(wù)器向網(wǎng)頁發(fā)起調(diào)用，無論網(wǎng)頁本身正在做什么。這就是稱之為異步的原因：用戶在一層上操作表單，而在另一層上服務(wù)器響應請求并觸發(fā)onreadystatechange屬性指定的回調(diào)方法,設(shè)置回調(diào)函數(shù)（cont.,需要特別注意的是該屬性在代碼中設(shè)置的位置 它是在調(diào)用

29、send()之前設(shè)置的。發(fā)送請求之前必須設(shè)置該屬性，這樣服務(wù)器在回答完成請求之后能夠查看該屬性！ 注意，這里updatePage是個函數(shù)名稱，不能寫成updatePage() 函數(shù)調(diào)用的形式！這表示將updatePage()函數(shù)運行的返回結(jié)果賦值給onreadystatechange屬性。體會JavaScript中函數(shù)也是對象的特征,處理服務(wù)器響應,請求發(fā)送后，用戶可以繼續(xù)使用Web表單（同時服務(wù)器在處理請求）。而當服務(wù)器完成了請求處理，服務(wù)器查看onreadystatechange屬性確定要調(diào)用的方法。除此以外，可以將應用程序看作其他應用程序一樣，無論是否異步。換句話說，不一定要采取特殊的動

30、作編寫響應服務(wù)器的方法，只需要改變表單或其它的頁面結(jié)構(gòu)，讓用戶訪問另一個 URL 或者做響應服務(wù)器需要的任何事情 處理函數(shù)（僅彈出簡單的警告,處理服務(wù)器響應（續(xù),運行以上代碼，根據(jù)瀏覽器的不同，在表單停止彈出警告之前會看到兩次、三次甚至四次警告。原因在于還沒有考慮HTTP就緒狀態(tài)，這是請求/響應循環(huán)中的一個重要部分 HTTP就緒狀態(tài)（readyState）表示請求的狀態(tài)或情形。它用于確定該請求是否已經(jīng)開始、是否得到了響應或者請求/響應模型是否已經(jīng)完成。它還可以幫助確定讀取服務(wù)器提供的響應文本或數(shù)據(jù)是否安全。在Ajax應用程序中需要了解五種就緒狀態(tài)： 0：請求沒有發(fā)出（在調(diào)用 open() 之前

31、） 1：請求已經(jīng)建立但還沒有發(fā)出（調(diào)用 send() 之前） 2：請求已經(jīng)發(fā)出正在處理之中（這里通?？梢詮捻憫玫絻?nèi)容頭部） 3：請求已經(jīng)處理，響應中通常有部分數(shù)據(jù)可用，但是服務(wù)器還沒有完成響應 4：響應已完成，可以訪問服務(wù)器響應并使用它,處理服務(wù)器響應（續(xù),與大多數(shù)跨瀏覽器問題一樣，這些就緒狀態(tài)的使用也不盡一致。實際上很少出現(xiàn)就緒狀態(tài)從0到1、2、3再到4，一些瀏覽器從不報告0或1而直接從2開始，然后是3和4，其他瀏覽器則報告所有的狀態(tài)。還有一些則多次報告就緒狀態(tài)1 對于Ajax編程，需要直接處理的惟一狀態(tài)就是就緒狀態(tài)4，它表示服務(wù)器響應已經(jīng)完成，可以安全地使用響應數(shù)據(jù)了。基于此，回調(diào)函數(shù)做

32、如下調(diào)整： 修改后就可以保證服務(wù)器的處理已經(jīng)完成，現(xiàn)在就會看到只顯示一次警告信息了,處理服務(wù)器響應（續(xù),以上代碼看起來似乎不錯，但是還有一個問題 如果服務(wù)器響應請求并完成了處理但是報告了一個錯誤怎么辦？服務(wù)器端代碼應該是由Ajax、JSP、普通HTML表單或其他類型的代碼調(diào)用的，但只能使用傳統(tǒng)的Web專用方法報告信息。而在 Web 世界中，HTTP狀態(tài)碼（status）可以處理請求中可能發(fā)生的各種問題，比如： 輸入了錯誤的URL請求將得到404錯誤碼，它表示該頁面不存在 403和401錯誤碼表示所訪問的數(shù)據(jù)受到保護或者禁止訪問 無論哪種情況，這些錯誤碼都是從完成的響應 中得到的。換句話說，服務(wù)

33、器執(zhí)行了請求（即HTTP就緒狀態(tài)是4）但是沒有返回客戶機預期的數(shù)據(jù)。因此除了就緒狀態(tài)外，還需要檢查HTTP狀態(tài)。我們期望的狀態(tài)碼是200，它表示一切順利。如果就緒狀態(tài)是4而且狀態(tài)碼是200，就可以處理服務(wù)器的數(shù)據(jù)了，而且這些數(shù)據(jù)應該就是要求的數(shù)據(jù)（而不是錯誤或者其他有問題的信息,處理服務(wù)器響應（續(xù),在回調(diào)函數(shù)中增加HTTP狀態(tài)（status）檢查： 現(xiàn)在可以確保請求已經(jīng)處理完成（通過就緒狀態(tài)），服務(wù)器給出了正常的響應（通過狀態(tài)碼），最后可以處理服務(wù)器返回的數(shù)據(jù)了。返回的數(shù)據(jù)（文本形式）保存在XMLHttpRequest對象的responseText屬性中。（如果服務(wù)器選擇使用XML響應，則也可

34、以使用在responseXML屬性獲取,處理服務(wù)器響應（續(xù),在本例中，服務(wù)器返回郵編相應的城市和省份，中間用逗號分開： Tangshan,Hebei 得到responseText并使用JavaScript的split()函數(shù)從逗號分開，得到的數(shù)組放到response中，然后更新表單中的相應值,連接Web表單,最后使用JavaScript事件函數(shù)觸發(fā)Ajax調(diào)用： 輸入框的onblur屬性指定的函數(shù)當焦點離開時觸發(fā)，Ajax開始運行了。結(jié)果就會看到填完郵編后焦點移開時，表單的城市和省份信息突然更新了,編寫服務(wù)器端組件,服務(wù)器端使用JSP（當然可以使用Servlet）根據(jù)傳遞的郵編，返回相應的城市

35、和省份： 注意：JSP中除了JSP標簽和Java代碼不要出現(xiàn)任何HTML標簽，也不要出現(xiàn)換行和空白字符，僅返回需要的響應結(jié)果，否則這些HTML標簽和空白字符也會作為響應文本的一部分傳遞回客戶端,小結(jié),Ajax應用的開發(fā)確實有些繁瑣，實際上，現(xiàn)在有很多成熟穩(wěn)定的Ajax工具葙封裝了以上諸多細節(jié)，是的Ajax編程更加容易。但是如果不知道應用程序在做什么，就很難發(fā)現(xiàn)其中的問題 XMLHttpRequest對象是Ajax應用的核心，必須非常熟悉 Ajax應用的基本流程： 創(chuàng)建XMLHttpRequest對象 從Web表單中獲取需要的數(shù)據(jù) 設(shè)置要連接的URL 建立到服務(wù)器的連接 設(shè)置服務(wù)器在完成后要運行

36、的回調(diào)函數(shù) 發(fā)送請求,第三講,在請求和響應中使用XML,發(fā)送XML格式的請求,XMLHttpRequest是Ajax應用程序中使用的基本對象。看起來它似乎是為通過HTTP請求發(fā)送XML或者以某種XML格式發(fā)出HTTP請求而設(shè)計的，但實際上它要做的只不過是為客戶機代碼（在網(wǎng)頁中通常是JavaScript）提供一種發(fā)送HTTP請求的方式，并不要求必須使用XML請求或響應 注意：雖然XML可以通過HTTP發(fā)送，但XML是一種數(shù)據(jù)格式而不是傳輸協(xié)議,從客戶機發(fā)送的XML數(shù)據(jù)格式,修改上一個郵編的例子，使用XML傳遞數(shù)據(jù)。將名/值對轉(zhuǎn)化為XML數(shù)據(jù)格式： 063000 XML要求有一個根元素；如果使用文

37、檔片段（XML文檔的一部分）的話則需要一個封閉元素，將上面的XML改為以下方式（同時便于傳遞等多信息）： 063000,向服務(wù)器發(fā)送XML,請求中的數(shù)據(jù)必須手工格式化為XML 對于XML最好使用POST請求，因為有些瀏覽器限制了 GET 請求字符串的長度，而XML可能很長 告訴服務(wù)器要發(fā)送的是XML而不是一般的名/值對 XML通過send()方法發(fā)送，而不是附加在請求URL最后的參數(shù),發(fā)送XML和普通文本的比較,XML不是一種簡潔、快速和節(jié)省空間的格式，和普通文本相比，XML通常總會占用更多的空間，速度也更慢，因為需要在消息中增加 XML 所需要的標簽和語義，同時解析XML也比處理普通文本慢

38、構(gòu)造和維護XML不是簡單的事情 XML沒有為請求增加任何東西，除了復雜性的問題之外，和普通文本以及名/值對相比，在請求中使用 XML實際上沒有多少好處（如果有的話）。實際上沒有任何東西可用XML而不能用普通文本發(fā)送 一般地，只有當服務(wù)器僅接受XML時才需要發(fā)送XML,第四講,使用JSON進行數(shù)據(jù)傳輸,什么是JSON,JSON (JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，易于人閱讀和編寫，同時也易于機器解析和生成，而且它是基于JavaScript 的。 JSON采用完全獨立于語言的文本格式，但是也使用了類似于C語言家族的習慣（包括C, C+, C#, J

39、ava, JavaScript 等）。這些特性使JSON成為理想的數(shù)據(jù)交換語言 JSON有兩種結(jié)構(gòu)： “名/值”對的集合（A collection of name/value pairs）。在不同的語言中，它被理解為對象，結(jié)構(gòu)，關(guān)聯(lián)數(shù)組等 值的有序列表（An ordered list of values）。在大部分語言中，它被理解為數(shù)組 這些都是常見的數(shù)據(jù)結(jié)構(gòu)。事實上大部分現(xiàn)代計算機語言都以某種形式支持它們。這使得一種數(shù)據(jù)格式在同樣基于這些結(jié)構(gòu)的編程語言之間交換成為可能,JSON的基本形式,對象是一個無序的“名/值”對集合。一個對象以“”開始，“”結(jié)束。每個“名稱”后跟一個“:” ；“名/值”對之間使用“,” 分隔： 數(shù)組是值（value）的有序集合。一個數(shù)組以“”開始，“”結(jié)束。值之間使用“,”分隔： 字符串（string）是由雙引號包圍的任意數(shù)量Unicode字符的集合，使用反斜線轉(zhuǎn)義。 值（value）可以是雙引號括起來的字符串（string）、數(shù)值(number)、true、false、 null、對象（object）或者數(shù)組（array）。這些結(jié)構(gòu)可以嵌套 數(shù)值（number）與C或者Java的數(shù)值非常相似,JSON示例,下面的JSON表示名稱/值對： firstName: Brett 多個名稱/值對串在一起: firstName: Brett, lastName:M