慧橋教育Ajax學習-文檔資料

1、Copyright 2008 - 2009 WitB2Process and Portfolio Management 2005 IBM Corporation Ajax基礎(chǔ)基礎(chǔ) 使用使用Ajax發(fā)送異步請求發(fā)送異步請求 在請求和響應(yīng)中使用在請求和響應(yīng)中使用XML 使用使用JSON進行數(shù)據(jù)傳輸進行數(shù)據(jù)傳輸3Process and Portfolio Management 2005 IBM CorporationAjax基礎(chǔ)基礎(chǔ)4Process and Portfolio Management 2005 IBM Corporation 先來點感覺，看些例子先來點感覺，看些例子4BACKBASE購

2、物網(wǎng)站購物網(wǎng)站4Google Suggest4Google Map4and many more5Process and Portfolio Management 2005 IBM Corporation Ajax (Asynchronous JavaScript and XML)不是一個新不是一個新的技術(shù)，事實上，它是一些舊有的成熟的技術(shù)以一種全新的技術(shù)，事實上，它是一些舊有的成熟的技術(shù)以一種全新的更加強大的方式整合在一起的更加強大的方式整合在一起 Ajax的關(guān)鍵技術(shù)：的關(guān)鍵技術(shù)：4使用使用XHTML(HTML)和和CSS構(gòu)建標準化的展示層構(gòu)建標準化的展示層4使用使用DOM進行動態(tài)顯示和交互進

3、行動態(tài)顯示和交互4使用使用XML和和XSLT進行數(shù)據(jù)交換和操縱進行數(shù)據(jù)交換和操縱4使用使用XMLHttpRequest異步獲取數(shù)據(jù)異步獲取數(shù)據(jù)4使用使用JavaScript將所有元素綁定在一起將所有元素綁定在一起6Process and Portfolio Management 2005 IBM Corporation7Process and Portfolio Management 2005 IBM Corporation 在傳統(tǒng)的在傳統(tǒng)的Web應(yīng)用模型下，大部分的用戶操作都會發(fā)送一應(yīng)用模型下，大部分的用戶操作都會發(fā)送一個個HTTP請求給服務(wù)器，然后服務(wù)器開始處理（接收數(shù)據(jù)，請求給服務(wù)器，然

4、后服務(wù)器開始處理（接收數(shù)據(jù)，執(zhí)行業(yè)務(wù)邏輯，訪問數(shù)據(jù)庫等），最后向瀏覽器返回執(zhí)行業(yè)務(wù)邏輯，訪問數(shù)據(jù)庫等），最后向瀏覽器返回HTML頁面。當服務(wù)器處理請求時，用戶能夠做什么呢？頁面。當服務(wù)器處理請求時，用戶能夠做什么呢？只有等待！只有等待！8Process and Portfolio Management 2005 IBM Corporation 在傳統(tǒng)的在傳統(tǒng)的Web應(yīng)用模型下應(yīng)用模型下，客戶機客戶機 （瀏覽器或者本地機器上運行的（瀏覽器或者本地機器上運行的代碼）向服務(wù)器發(fā)出請求。該請求是同步的，客戶機等待服務(wù)器的響代碼）向服務(wù)器發(fā)出請求。該請求是同步的，客戶機等待服務(wù)器的響應(yīng)。當客戶機等待的時

5、候，會用某種形式通知您正在處理：應(yīng)。當客戶機等待的時候，會用某種形式通知您正在處理：4 沙漏（特別是沙漏（特別是 Windows 上）上）4 旋轉(zhuǎn)皮球（通常在旋轉(zhuǎn)皮球（通常在 Mac 機器上）機器上）4 應(yīng)用程序基本上凍結(jié)了，然后過一段時間光標變化了應(yīng)用程序基本上凍結(jié)了，然后過一段時間光標變化了 這正是傳統(tǒng)這正是傳統(tǒng)Web 應(yīng)用程序讓人感到笨拙或緩慢的原因應(yīng)用程序讓人感到笨拙或緩慢的原因 缺乏真正缺乏真正的交互性。按下按鈕時，應(yīng)用程序?qū)嶋H上變得不能使用，直到剛剛觸的交互性。按下按鈕時，應(yīng)用程序?qū)嶋H上變得不能使用，直到剛剛觸發(fā)的請求得到響應(yīng)。如果請求需要大量服務(wù)器處理，那么等待的時間發(fā)的請求得到

6、響應(yīng)。如果請求需要大量服務(wù)器處理，那么等待的時間可能很長可能很長9Process and Portfolio Management 2005 IBM Corporation Ajax應(yīng)用通過在用戶和服務(wù)器之間引入一個媒介（應(yīng)用通過在用戶和服務(wù)器之間引入一個媒介（Ajax engine）來異步發(fā)送請求，消除了傳統(tǒng)的發(fā)送請求等）來異步發(fā)送請求，消除了傳統(tǒng)的發(fā)送請求等待發(fā)送請求等待的特性，極大的提高了用戶體驗待發(fā)送請求等待的特性，極大的提高了用戶體驗10Process and Portfolio Management 2005 IBM CorporationJavaScript基礎(chǔ)基礎(chǔ)11Proce

7、ss and Portfolio Management 2005 IBM Corporation JavaScript是是Netscape公司與公司與Sun公司合作開發(fā)的。在公司合作開發(fā)的。在JavaScript出現(xiàn)之前，出現(xiàn)之前，Web瀏覽器不過是一種能夠顯示超文本文檔的軟件的基本瀏覽器不過是一種能夠顯示超文本文檔的軟件的基本部分。而在部分。而在JavaScript之后，網(wǎng)頁的內(nèi)容不再局限于枯燥的文本，可之后，網(wǎng)頁的內(nèi)容不再局限于枯燥的文本，可交互性得到了顯著的改善交互性得到了顯著的改善 JavaScript是一種腳本語言，一種解釋性的，基于對象的腳本語言。是一種腳本語言，一種解釋性的，基于

8、對象的腳本語言。JavaScript腳本通常只能通過腳本通常只能通過Web瀏覽器進行解釋和執(zhí)行而不是像普瀏覽器進行解釋和執(zhí)行而不是像普通意義上的程序那樣可以獨立運行通意義上的程序那樣可以獨立運行 在在HTML基礎(chǔ)上，基礎(chǔ)上，使用使用JavaScript 可以開發(fā)交互式可以開發(fā)交互式Web網(wǎng)頁。網(wǎng)頁。 JavaScript的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時性的、動態(tài)的的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時性的、動態(tài)的、交互性的關(guān)系，使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容、交互性的關(guān)系，使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容 注意，注意，JavaScript與與Java沒有任何聯(lián)系沒有任何

9、聯(lián)系12Process and Portfolio Management 2005 IBM Corporation JavaScript腳本的基本組成單位。腳本的基本組成單位。 只需要簡單地把各條語句放在不同的行上就可以分割開來只需要簡單地把各條語句放在不同的行上就可以分割開來，不需要加分號，不需要加分號“；”結(jié)束結(jié)束:4first statement4second statement 但在每條語句的末尾添加但在每條語句的末尾添加“；”是一種良好的編程習慣：是一種良好的編程習慣：4first statement;4second statement;13Process and Portfolio

10、 Management 2005 IBM Corporation 單行注釋（雙斜杠）：單行注釋（雙斜杠）：4/ line1 多行注釋：多行注釋：4/* line1 line2 */ HTML風格注釋（不推薦使用）：風格注釋（不推薦使用）：4”來結(jié)束來結(jié)束14Process and Portfolio Management 2005 IBM Corporation JavaScript不要求在聲明變量時必須明確指出其數(shù)據(jù)類型不要求在聲明變量時必須明確指出其數(shù)據(jù)類型（所以稱（所以稱JavaScript為弱類型語言），可以使用統(tǒng)一的關(guān)為弱類型語言），可以使用統(tǒng)一的關(guān)鍵字鍵字var進行聲明：進行聲明：

11、4var age = 33;4mood = “happy”; 但是提前對變量做出聲明是一種良好的編程習慣但是提前對變量做出聲明是一種良好的編程習慣 變量名允許包含字母、數(shù)字、美元符號變量名允許包含字母、數(shù)字、美元符號($)和下劃線字符和下劃線字符，但不允許包括空格或標點符號，但不允許包括空格或標點符號15Process and Portfolio Management 2005 IBM Corporation JavaScript變量的類型是由變量的值決定的，可以對同一個變量賦予變量的類型是由變量的值決定的，可以對同一個變量賦予不同數(shù)據(jù)類型的值：不同數(shù)據(jù)類型的值：4var age = “thi

12、rty three”;4age = 33; JavaScript中重要的數(shù)據(jù)類型：中重要的數(shù)據(jù)類型：4未定義（未定義（undefined），變量未定義），變量未定義4空（空（null），變量未初始化），變量未初始化4字符串（字符串（string），可以放在單引號或雙引號中），可以放在單引號或雙引號中4數(shù)值（數(shù)值（number），可以表示整數(shù)、浮點數(shù)），可以表示整數(shù)、浮點數(shù)4布爾型（布爾型（boolean），），true或或false4對象（對象（object）16Process and Portfolio Management 2005 IBM Corporation 數(shù)組用來存儲一組值，使用

13、關(guān)鍵字數(shù)組用來存儲一組值，使用關(guān)鍵字Array來聲明，聲明時可以指明數(shù)來聲明，聲明時可以指明數(shù)組的長度：組的長度：4var colors = new Array();4var colors = new Array(3); 其中其中new關(guān)鍵字可以省略，類似其它語言，數(shù)組的下標從關(guān)鍵字可以省略，類似其它語言，數(shù)組的下標從0開始，賦開始，賦值方法也和其它語言類似：值方法也和其它語言類似：4colors0 = “red”;4colors1 = “black”;4colors2 = “white”; 還可以使用方括號創(chuàng)建數(shù)組時同時初始化：還可以使用方括號創(chuàng)建數(shù)組時同時初始化：4var colors =

14、 “red”, “black”, “white”;17Process and Portfolio Management 2005 IBM Corporation 使用方括號創(chuàng)建數(shù)組對象的簡單方法：使用方括號創(chuàng)建數(shù)組對象的簡單方法：4var colors = ; /聲明空數(shù)組對象聲明空數(shù)組對象4colors0 = “red”; 4colors1 = “black”; 通過數(shù)組的通過數(shù)組的length屬性可以得到數(shù)組中元素的個數(shù)。數(shù)組的長度可以屬性可以得到數(shù)組中元素的個數(shù)。數(shù)組的長度可以動態(tài)擴展：動態(tài)擴展：4colors3 = “blue”;4colors8 = “grey”; 關(guān)聯(lián)數(shù)組：在填充數(shù)

15、組時為每個新元素明確地給出下標：關(guān)聯(lián)數(shù)組：在填充數(shù)組時為每個新元素明確地給出下標：4colors“r” = “red”;4colors“b” = “black”;18Process and Portfolio Management 2005 IBM Corporation JavaScript中的算術(shù)運算符（中的算術(shù)運算符（+、-、*、/、+、-等）、等）、比較運算符（比較運算符（、=、=）、條件語句（）、條件語句（if、while、for等）等）19Process and Portfolio Management 2005 IBM Corporation 使用函數(shù)可以避免重復(fù)輸入大量相同的內(nèi)

16、容。使用函數(shù)可以避免重復(fù)輸入大量相同的內(nèi)容。JavaScript中使用中使用function關(guān)關(guān)鍵字定義函數(shù)：鍵字定義函數(shù)：4function funcname (arg1, arg2, ) statements; 聲明一個簡單的函數(shù)：聲明一個簡單的函數(shù)：4function multiply (num1, num2) var total = num1 * num2;return total; 聲明后可以直接調(diào)用此函數(shù)獲取結(jié)果：聲明后可以直接調(diào)用此函數(shù)獲取結(jié)果：var result = multiply (5, 9);注意，注意，JavaScript中的函數(shù)不需聲明返回類型，參數(shù)也不需要聲明類型

17、中的函數(shù)不需聲明返回類型，參數(shù)也不需要聲明類型20Process and Portfolio Management 2005 IBM Corporation JavaScript對象是由一組相關(guān)的屬性和方法構(gòu)成的數(shù)據(jù)實體。屬性和方法都要使用對象是由一組相關(guān)的屬性和方法構(gòu)成的數(shù)據(jù)實體。屬性和方法都要使用“.”來訪問：來訪問：4 perty4 object.method() 使用函數(shù)來定義使用函數(shù)來定義“類類”：4 function Person() this.age = 12; = “no name”;this.sayHello = function() a

18、lert (“Hello ” + ); /其中其中this關(guān)鍵字不能省略！關(guān)鍵字不能省略！ 使用使用new關(guān)鍵字來創(chuàng)建對象實例：關(guān)鍵字來創(chuàng)建對象實例：var vincent = new Person();21Process and Portfolio Management 2005 IBM CorporationDOM基礎(chǔ)基礎(chǔ)22Process and Portfolio Management 2005 IBM Corporation DOM是是”Document Object Model”（文檔對象模型）的（文檔對象模型）的首字母縮寫。當創(chuàng)建了一個網(wǎng)頁并把它加載到首字母縮寫

19、。當創(chuàng)建了一個網(wǎng)頁并把它加載到Web瀏覽器瀏覽器中時，就會在幕后創(chuàng)建一個文檔對象模型中時，就會在幕后創(chuàng)建一個文檔對象模型 DOM表示被加載到瀏覽器窗口里的當前頁面：瀏覽器向表示被加載到瀏覽器窗口里的當前頁面：瀏覽器向我們提供了當前頁面的模型，而我們可以通過我們提供了當前頁面的模型，而我們可以通過JavaScript訪問這個模型訪問這個模型 DOM把一份文檔表示為一棵樹把一份文檔表示為一棵樹23Process and Portfolio Management 2005 IBM Corporation 如下的如下的HTML頁面：頁面：24Process and Portfolio Manageme

20、nt 2005 IBM Corporation 瀏覽器加載該頁面并將之轉(zhuǎn)換為樹形結(jié)構(gòu)：瀏覽器加載該頁面并將之轉(zhuǎn)換為樹形結(jié)構(gòu)：25Process and Portfolio Management 2005 IBM Corporation DOM樹中的一切是以最外層的樹中的一切是以最外層的HTML包含元素，即包含元素，即html元素開始的元素開始的。使用樹的比喻，這叫做根元素（。使用樹的比喻，這叫做根元素（root element） 從根流出的線表示不同標記部分之間的關(guān)系。從根流出的線表示不同標記部分之間的關(guān)系。head和和body元素是元素是html根元素的孩子（根元素的孩子（child）；）；

21、title是是head的孩子，而文本的孩子，而文本 “Trees, trees, everywhere”是是title的孩子；相對的，的孩子；相對的，head是是title的父親（的父親（parent），），title是文本是文本 “Trees, trees, everywhere” 的父親。處在的父親。處在同一層次的且互不包含的兩個分支（如同一層次的且互不包含的兩個分支（如head和和body）之間稱為兄弟）之間稱為兄弟（sibling）關(guān)系。整個樹就這樣組織下去，直到瀏覽器獲得與上圖）關(guān)系。整個樹就這樣組織下去，直到瀏覽器獲得與上圖類似的結(jié)構(gòu)類似的結(jié)構(gòu) 通常把這樣的樹結(jié)構(gòu)成為一棵節(jié)點樹通常

22、把這樣的樹結(jié)構(gòu)成為一棵節(jié)點樹26Process and Portfolio Management 2005 IBM Corporation DOM文檔是由節(jié)點構(gòu)成的集合，此時的節(jié)點是文檔樹上文檔是由節(jié)點構(gòu)成的集合，此時的節(jié)點是文檔樹上的樹枝或者樹葉的樹枝或者樹葉 DOM中節(jié)點的類型：中節(jié)點的類型：4元素節(jié)點（元素節(jié)點（element node），諸如），諸如、等。元等。元素節(jié)點可以包含其它的元素，唯一沒有被包含在其它元素里的元素素節(jié)點可以包含其它的元素，唯一沒有被包含在其它元素里的元素是是，它是根元素，它是根元素4屬性節(jié)點（屬性節(jié)點（attribute node），元素或多或少地有一些屬性，屬

23、性），元素或多或少地有一些屬性，屬性可以對元素做出一些具體的描述。因為屬性總是被放到起始標簽里可以對元素做出一些具體的描述。因為屬性總是被放到起始標簽里，所以屬性節(jié)點總是被包含在元素節(jié)點中，所以屬性節(jié)點總是被包含在元素節(jié)點中4文本節(jié)點（文本節(jié)點（text node），），元素中包含著文本節(jié)點元素中包含著文本節(jié)點“Trees, trees, everywhere”27Process and Portfolio Management 2005 IBM Corporation getElementById(id)4返回一個給定返回一個給定id屬性的元素節(jié)點相對應(yīng)的對象。這個方法是與屬性的元素節(jié)點相對

24、應(yīng)的對象。這個方法是與document對象相關(guān)聯(lián)的函數(shù)。其中對象相關(guān)聯(lián)的函數(shù)。其中document對象代表著整個對象代表著整個HTML文檔并可以用文檔并可以用來訪問所有頁面中的元素來訪問所有頁面中的元素 getElementsByTagName(tagname)4返回一個對象數(shù)組，它們分別對應(yīng)著文檔里的一個特定的元素節(jié)點返回一個對象數(shù)組，它們分別對應(yīng)著文檔里的一個特定的元素節(jié)點 getAttribute()4返回對象的屬性值返回對象的屬性值 setAttribute()4修改對象的屬性值修改對象的屬性值28Process and Portfolio Management 2005 IBM Co

25、rporation childNodes4可以將節(jié)點樹中任何一個元素的所有子元素檢索出來，這個屬性返回一個可以將節(jié)點樹中任何一個元素的所有子元素檢索出來，這個屬性返回一個數(shù)組，包含了給定元素節(jié)點的全體子元素數(shù)組，包含了給定元素節(jié)點的全體子元素 nodeName4返回元素節(jié)點的名稱。注意，返回的結(jié)果全部是大寫返回元素節(jié)點的名稱。注意，返回的結(jié)果全部是大寫 nodeType4用來區(qū)分節(jié)點的類型，元素節(jié)點的用來區(qū)分節(jié)點的類型，元素節(jié)點的nodeType屬性值是屬性值是1，屬性節(jié)點的，屬性節(jié)點的nodeType屬性值是屬性值是2，文本節(jié)點的，文本節(jié)點的nodeType屬性值是屬性值是3 nodeVal

26、ue4可以用來存取文本節(jié)點的值。對于元素節(jié)點或?qū)傩怨?jié)點這個屬性返回空可以用來存取文本節(jié)點的值。對于元素節(jié)點或?qū)傩怨?jié)點這個屬性返回空29Process and Portfolio Management 2005 IBM Corporation firstChild和和lastChild4第一個和最后一個孩子節(jié)點。第一個和最后一個孩子節(jié)點。4node.firstChild等價于等價于node.childNodes0，4node.lastChild等價于等價于node.childNodesnode.childNodes.length 1 parentNode4返回元素的父節(jié)點返回元素的父節(jié)點 nex

27、tSibling4返回下一個兄弟節(jié)點返回下一個兄弟節(jié)點30Process and Portfolio Management 2005 IBM Corporation createElement(tagname)4 創(chuàng)建新的元素節(jié)點，此方法與創(chuàng)建新的元素節(jié)點，此方法與document對象相關(guān)聯(lián)。新建的元素節(jié)點并未與節(jié)點樹相連對象相關(guān)聯(lián)。新建的元素節(jié)點并未與節(jié)點樹相連 appendChild(node)4 把新建的節(jié)點插入到節(jié)點樹的某個節(jié)點下，成為這個節(jié)點的子節(jié)點把新建的節(jié)點插入到節(jié)點樹的某個節(jié)點下，成為這個節(jié)點的子節(jié)點 createTextNode(text)4 創(chuàng)建文本節(jié)點創(chuàng)建文本節(jié)點 ins

28、ertBefore(newNode, targetNode)4 把一個新元素插入到一個現(xiàn)有元素的前面把一個新元素插入到一個現(xiàn)有元素的前面 replaceChild(newChild, oldChild)4 替換一個孩子節(jié)點替換一個孩子節(jié)點 removeChild(node)4 刪除一個孩子節(jié)點刪除一個孩子節(jié)點31Process and Portfolio Management 2005 IBM Corporation基于基于DOM的的Web應(yīng)用應(yīng)用程序示例程序示例32Process and Portfolio Management 2005 IBM Corporation 首先建立一個非常簡單

29、的應(yīng)用程序，然后再添加一點首先建立一個非常簡單的應(yīng)用程序，然后再添加一點DOM魔法。注意，魔法。注意，DOM可以移動網(wǎng)頁中的任何東西而不可以移動網(wǎng)頁中的任何東西而不需要提交表單。創(chuàng)建一個簡單的網(wǎng)頁，上面只顯示一個普需要提交表單。創(chuàng)建一個簡單的網(wǎng)頁，上面只顯示一個普通的舊式大禮帽，還有一個標記為通的舊式大禮帽，還有一個標記為 Hocus Pocus! 的按的按鈕鈕33Process and Portfolio Management 2005 IBM Corporation 注意按鈕的類型是注意按鈕的類型是 button 而不是提交按鈕。如果使用提交按鈕，單擊該按而不是提交按鈕。如果使用提交按鈕，

30、單擊該按鈕將導(dǎo)致瀏覽器提交表單。通過使用一般輸入按鈕而不是提交按鈕，可以把鈕將導(dǎo)致瀏覽器提交表單。通過使用一般輸入按鈕而不是提交按鈕，可以把 JavaScript 函數(shù)和它連接起來與瀏覽器交互而無需提交表單函數(shù)和它連接起來與瀏覽器交互而無需提交表單34Process and Portfolio Management 2005 IBM Corporation35Process and Portfolio Management 2005 IBM Corporation 下面增加一些魔法，用兔子的圖片替換頁面中原有的圖片：下面增加一些魔法，用兔子的圖片替換頁面中原有的圖片：36Process and

31、 Portfolio Management 2005 IBM Corporation 首先找到網(wǎng)頁中表示首先找到網(wǎng)頁中表示img元素的元素的DOM節(jié)點。一般來說，最節(jié)點。一般來說，最簡單的辦法是用簡單的辦法是用getElementById()方法，它屬于代表方法，它屬于代表Web頁面的頁面的document對象：對象：4var elementNode = document.getElementById(“id);37Process and Portfolio Management 2005 IBM Corporation 完成所需修改有幾種方法：有些簡單，有些麻煩。但是運用完成所需修改有幾種方

32、法：有些簡單，有些麻煩。但是運用較麻煩的辦法是一次很好的較麻煩的辦法是一次很好的DOM練習，首先看看換圖片比較練習，首先看看換圖片比較麻煩的辦法；后面再重新分析一下看看有沒有更簡單的辦法麻煩的辦法；后面再重新分析一下看看有沒有更簡單的辦法 用帶兔子的新照片替換原有圖片的辦法如下：用帶兔子的新照片替換原有圖片的辦法如下：41、創(chuàng)建新的、創(chuàng)建新的img元素元素42、訪問當前、訪問當前img元素的父元素，也就是它的容器元素的父元素，也就是它的容器43、在已有、在已有img元素之前插入新的元素之前插入新的img元素作為該容器的子級元素作為該容器的子級44、刪除原來的、刪除原來的img元素元素45、結(jié)合

33、起來以便在用戶單擊按鈕時調(diào)用剛剛創(chuàng)建的函數(shù)、結(jié)合起來以便在用戶單擊按鈕時調(diào)用剛剛創(chuàng)建的函數(shù)38Process and Portfolio Management 2005 IBM Corporation 創(chuàng)建新的創(chuàng)建新的img元素：元素：4var newImage = document.createElement(img);可以創(chuàng)建一個新的元素節(jié)點，元素名為可以創(chuàng)建一個新的元素節(jié)點，元素名為img。在。在HTML中基本中基本上就是：上就是： 下面需要增加一個屬性下面需要增加一個屬性src，它指定了要加載的圖片：，它指定了要加載的圖片：4newImage.setAttribute(src, rab

34、bit-hat.gif); 注：如果對已有的屬性調(diào)用注：如果對已有的屬性調(diào)用setAttribute()，則把原來的值替，則把原來的值替換為指定的值。但是，如果調(diào)用換為指定的值。但是，如果調(diào)用setAttribute()并指定一個不并指定一個不存在的屬性，存在的屬性，DOM就會使用提供的值增加一個屬性就會使用提供的值增加一個屬性39Process and Portfolio Management 2005 IBM Corporation 現(xiàn)在有了要插入的圖片，還需要找到插入的地方。要將其插現(xiàn)在有了要插入的圖片，還需要找到插入的地方。要將其插入到已有圖片之前然后再刪除原來的圖片。為此需要知道已入

35、到已有圖片之前然后再刪除原來的圖片。為此需要知道已有圖片的父元素：有圖片的父元素：4var imgParent = hatImage.parentNode;40Process and Portfolio Management 2005 IBM Corporation 添加子節(jié)點的方法：添加子節(jié)點的方法：4insertBefore(newNode, targetNode)4appendChild(newNode) 把新圖片元素插入到原有圖片之前：把新圖片元素插入到原有圖片之前：4imgParent.insertBefore(newImage, hatImage); 現(xiàn)在原圖片的父元素有了兩個現(xiàn)在

36、原圖片的父元素有了兩個 子元素：新圖片和緊跟在后面子元素：新圖片和緊跟在后面的舊圖片的舊圖片41Process and Portfolio Management 2005 IBM Corporation 因為已經(jīng)得到了舊圖片元素的父節(jié)點，只要調(diào)用因為已經(jīng)得到了舊圖片元素的父節(jié)點，只要調(diào)用removeChild()并把需要刪除的節(jié)點傳遞給它即可：并把需要刪除的節(jié)點傳遞給它即可：4imgParent.removeChild(hatImage); 完整的完整的JavaScript函數(shù)：函數(shù)：42Process and Portfolio Management 2005 IBM Corporation

37、 每當用戶點擊每當用戶點擊Hocus Pocus!按鈕的時候運行按鈕的時候運行showRabbit()函數(shù)。為此只要向函數(shù)。為此只要向HTML中增加一個簡單的中增加一個簡單的 onclick事件處理事件處理程序即可：程序即可：43Process and Portfolio Management 2005 IBM Corporation 1、使用、使用replaceChild()函數(shù)函數(shù)4imgParent.replaceChild(newImage, hatImage); 2、直接修改圖片的、直接修改圖片的src屬性屬性4hatImage.setAttribute(src, rabbit-ha

38、t.gif); 3、使用、使用HTML DOM方法方法4hatImage.src = “rabbit-hat.gif”;44Process and Portfolio Management 2005 IBM Corporation 雖然兔子從帽子中跳出來了，但是屏幕下方的按鈕仍然顯示雖然兔子從帽子中跳出來了，但是屏幕下方的按鈕仍然顯示 Hocus Pocus! 和調(diào)用和調(diào)用 showRabbit()，下面做一些修改，當，下面做一些修改，當用戶再次點擊按鈕時把兔子藏起來！用戶再次點擊按鈕時把兔子藏起來！45Process and Portfolio Management 2005 IBM Cor

39、poration 使用我們熟悉的方法，實現(xiàn)這個簡單的功能，在使用我們熟悉的方法，實現(xiàn)這個簡單的功能，在showRabbit() 函數(shù)中添加如下語句：函數(shù)中添加如下語句：46Process and Portfolio Management 2005 IBM Corporation 隱藏兔子的方法基本上和放兔子出來完全相反，將圖片的隱藏兔子的方法基本上和放兔子出來完全相反，將圖片的src屬性再改回舊圖片。創(chuàng)建一個新的屬性再改回舊圖片。創(chuàng)建一個新的 JavaScript 函數(shù)來完成這函數(shù)來完成這項任務(wù)：項任務(wù)：47Process and Portfolio Management 2005 IBM C

40、orporation 現(xiàn)在雖然按鈕的標簽改變了，但是單擊按鈕時的動作沒有變。當用戶單擊按鈕時現(xiàn)在雖然按鈕的標簽改變了，但是單擊按鈕時的動作沒有變。當用戶單擊按鈕時可以使用可以使用DOM改變事件或者發(fā)生的動作。在改變事件或者發(fā)生的動作。在JavaScript中，可以通過按鈕的中，可以通過按鈕的onclick屬性來引用該事件，因此可以改變按鈕觸發(fā)的事件：只要賦給屬性來引用該事件，因此可以改變按鈕觸發(fā)的事件：只要賦給onclick屬性屬性一個新的函數(shù)一個新的函數(shù)48Process and Portfolio Management 2005 IBM Corporation使用使用Ajax發(fā)送異步請求發(fā)

41、送異步請求49Process and Portfolio Management 2005 IBM Corporation 考慮以下情景：考慮以下情景：4當用戶輸入郵編后，系統(tǒng)自動填充相應(yīng)的城市和省份當用戶輸入郵編后，系統(tǒng)自動填充相應(yīng)的城市和省份50Process and Portfolio Management 2005 IBM Corporation51Process and Portfolio Management 2005 IBM Corporation 要實現(xiàn)這種功能，必須非常熟悉一個要實現(xiàn)這種功能，必須非常熟悉一個 JavaScript 對象，即對象，即 XMLHttpRequest

42、（簡稱（簡稱XHR）。這個小小的對象實際上已）。這個小小的對象實際上已經(jīng)在幾種瀏覽器中存在一段時間了，它是經(jīng)在幾種瀏覽器中存在一段時間了，它是Ajax 的核心。該對的核心。該對象的幾個常用方法和屬性：象的幾個常用方法和屬性：4open()：建立到服務(wù)器的新請求：建立到服務(wù)器的新請求4send()：向服務(wù)器發(fā)送請求：向服務(wù)器發(fā)送請求4readyState：提供當前：提供當前 HTML 的就緒狀態(tài)的就緒狀態(tài)4status：服務(wù)器響應(yīng)的狀態(tài)代碼：服務(wù)器響應(yīng)的狀態(tài)代碼4responseText：服務(wù)器返回的請求響應(yīng)文本：服務(wù)器返回的請求響應(yīng)文本52Process and Portfolio Manag

43、ement 2005 IBM Corporation 創(chuàng)建跨瀏覽器的創(chuàng)建跨瀏覽器的XMLHttpRequest對象：對象：53Process and Portfolio Management 2005 IBM Corporation 注意不要被這些花括號迷住了眼睛，下面分別介紹每一步注意不要被這些花括號迷住了眼睛，下面分別介紹每一步:4創(chuàng)建一個新變量創(chuàng)建一個新變量 request 并賦值并賦值 false。使用。使用 false 作為判斷條件，表示還沒作為判斷條件，表示還沒有創(chuàng)建有創(chuàng)建 XMLHttpRequest 對象對象4增加增加try/catch塊：塊： 嘗試創(chuàng)建嘗試創(chuàng)建 XMLHttp

44、Request 對象對象 如果失敗如果失敗,先嘗試使用較新版本的先嘗試使用較新版本的Microsoft瀏覽器創(chuàng)建瀏覽器創(chuàng)建 Microsoft 兼容的對象兼容的對象（Msxml2.XMLHTTP），如果失?。▏L試使用較老版本的），如果失?。▏L試使用較老版本的Microsoft瀏覽器創(chuàng)瀏覽器創(chuàng)建建 Microsoft兼容的對象（兼容的對象（Microsoft.XMLHTTP） 如果全部失敗，則保證如果全部失敗，則保證request的值仍然為的值仍然為false4檢查檢查request是否仍然為是否仍然為false（如果一切順利就不會是（如果一切順利就不會是false）4如果出現(xiàn)問題則使用如果出現(xiàn)

45、問題則使用JavaScript警告通知用戶出現(xiàn)了問題警告通知用戶出現(xiàn)了問題54Process and Portfolio Management 2005 IBM Corporation 準備好準備好XMLHttpRequest對象，就可以建立到服務(wù)器的請求對象，就可以建立到服務(wù)器的請求了。了。4首先首先結(jié)合一些表單中的數(shù)據(jù)來構(gòu)造結(jié)合一些表單中的數(shù)據(jù)來構(gòu)造URL：4注：注：escape() 方法用于轉(zhuǎn)義不能用明文正確發(fā)送的任何字符。比如方法用于轉(zhuǎn)義不能用明文正確發(fā)送的任何字符。比如，空格將被轉(zhuǎn)換成字符，空格將被轉(zhuǎn)換成字符 %20，從而能夠在，從而能夠在 URL 中傳遞這些字符。中傳遞這些字符。4

46、然后建立請求：然后建立請求：55Process and Portfolio Management 2005 IBM Corporation 使使用用 XMLHttpRequest 對象的對象的 open() 方法來方法來建立請求建立請求。該方法有五個參數(shù)：。該方法有五個參數(shù)：4request-type：發(fā)送請求的類型。典型的值是：發(fā)送請求的類型。典型的值是 GET 或或 POST，但也可以發(fā)送，但也可以發(fā)送 HEAD 請求請求4url：要連接的：要連接的 URL4asynch：如果希望使用異步連接則為：如果希望使用異步連接則為 true，否則為，否則為 false。該參數(shù)是可選的，默認為。該參

47、數(shù)是可選的，默認為 true4username：如果需要身份驗證，則可以在此指定用戶名。該可選參數(shù)沒有默認值：如果需要身份驗證，則可以在此指定用戶名。該可選參數(shù)沒有默認值4password：如果需要身份驗證，則可以在此指定口令。該可選參數(shù)沒有默認值：如果需要身份驗證，則可以在此指定口令。該可選參數(shù)沒有默認值 通常使用其中的前三個參數(shù)。事實上，即使需要異步連接，通常指定第三個參通常使用其中的前三個參數(shù)。事實上，即使需要異步連接，通常指定第三個參數(shù)為數(shù)為 “true”，這樣更容易理解，這樣更容易理解56Process and Portfolio Management 2005 IBM Corpor

48、ation 一旦請求用一旦請求用 open() 配置好之后，就可以使用配置好之后，就可以使用send()方法發(fā)方法發(fā)送請求了，送請求了，send() 方法只有一個參數(shù)，就是要發(fā)送的內(nèi)容方法只有一個參數(shù)，就是要發(fā)送的內(nèi)容 但是我們前面通過但是我們前面通過URL本身已經(jīng)發(fā)送了本身已經(jīng)發(fā)送了zipcode的值，所以的值，所以這里不需要通過這里不需要通過 send() 傳遞數(shù)據(jù)，只要傳遞傳遞數(shù)據(jù)，只要傳遞 null 作為該方作為該方法的參數(shù)即可：法的參數(shù)即可：57Process and Portfolio Management 2005 IBM Corporation 由于是異步請求，請求發(fā)出后由于是

49、異步請求，請求發(fā)出后JavaScript 方法不會等待服務(wù)器處理完方法不會等待服務(wù)器處理完成，因此代碼將繼續(xù)執(zhí)行，就是說，將退出該方法而把控制返回給表單成，因此代碼將繼續(xù)執(zhí)行，就是說，將退出該方法而把控制返回給表單。用戶可以繼續(xù)輸入信息，應(yīng)用程序不會等待服務(wù)器。用戶可以繼續(xù)輸入信息，應(yīng)用程序不會等待服務(wù)器 當服務(wù)器完成請求之后，需要指定該如何處理響應(yīng)。當服務(wù)器完成請求之后，需要指定該如何處理響應(yīng)。XMLHttpRequest對象的對象的onreadystatechange屬性允許指定一個回調(diào)函數(shù)反向調(diào)用屬性允許指定一個回調(diào)函數(shù)反向調(diào)用Web頁面中的代碼頁面中的代碼 當服務(wù)器完成請求之后，會查看

50、當服務(wù)器完成請求之后，會查看XMLHttpRequest對象，特別是對象，特別是 onreadystatechange屬性。然后調(diào)用該屬性指定的任何方法。之所以屬性。然后調(diào)用該屬性指定的任何方法。之所以稱為回調(diào)是因為由服務(wù)器向網(wǎng)頁發(fā)起調(diào)用，無論網(wǎng)頁本身正在做什么。稱為回調(diào)是因為由服務(wù)器向網(wǎng)頁發(fā)起調(diào)用，無論網(wǎng)頁本身正在做什么。這就是稱之為異步的原因：用戶在一層上操作表單，而在另一層上服務(wù)這就是稱之為異步的原因：用戶在一層上操作表單，而在另一層上服務(wù)器響應(yīng)請求并觸發(fā)器響應(yīng)請求并觸發(fā)onreadystatechange屬性指定的回調(diào)方法屬性指定的回調(diào)方法58Process and Portfolio

51、 Management 2005 IBM Corporation 需要特別注意的是該屬性在代碼中設(shè)置的位置需要特別注意的是該屬性在代碼中設(shè)置的位置 它是在調(diào)用它是在調(diào)用send()之前設(shè)置的。發(fā)送請求之前必須設(shè)置該屬性，這樣服務(wù)器在回答完成請之前設(shè)置的。發(fā)送請求之前必須設(shè)置該屬性，這樣服務(wù)器在回答完成請求之后能夠查看該屬性！求之后能夠查看該屬性！ 注意，這里注意，這里updatePage是個函數(shù)名稱，不能寫成是個函數(shù)名稱，不能寫成updatePage() 函數(shù)調(diào)函數(shù)調(diào)用的形式！這表示將用的形式！這表示將updatePage()函數(shù)運行的返回結(jié)果賦值給函數(shù)運行的返回結(jié)果賦值給onreadysta

52、techange屬性。體會屬性。體會JavaScript中函數(shù)也是對象的特征中函數(shù)也是對象的特征59Process and Portfolio Management 2005 IBM Corporation 請求發(fā)送后，用戶可以繼續(xù)使用請求發(fā)送后，用戶可以繼續(xù)使用Web表單（同時服務(wù)器在表單（同時服務(wù)器在處理請求）。而當服務(wù)器完成了請求處理，服務(wù)器查看處理請求）。而當服務(wù)器完成了請求處理，服務(wù)器查看onreadystatechange屬性確定要調(diào)用的方法。除此以外，屬性確定要調(diào)用的方法。除此以外，可以將應(yīng)用程序看作其他應(yīng)用程序一樣，無論是否異步。換可以將應(yīng)用程序看作其他應(yīng)用程序一樣，無論是否異

53、步。換句話說，不一定要采取特殊的動作編寫響應(yīng)服務(wù)器的方法，句話說，不一定要采取特殊的動作編寫響應(yīng)服務(wù)器的方法，只需要改變表單或其它的頁面結(jié)構(gòu)，讓用戶訪問另一個只需要改變表單或其它的頁面結(jié)構(gòu)，讓用戶訪問另一個 URL 或者做響應(yīng)服務(wù)器需要的任何事情或者做響應(yīng)服務(wù)器需要的任何事情 處理函數(shù)（僅彈出簡單的警告）：處理函數(shù)（僅彈出簡單的警告）：60Process and Portfolio Management 2005 IBM Corporation 運行以上代碼，根據(jù)瀏覽器的不同，在表單停止彈出警告之前會看到兩運行以上代碼，根據(jù)瀏覽器的不同，在表單停止彈出警告之前會看到兩次、三次甚至四次警告。原因

54、在于還沒有考慮次、三次甚至四次警告。原因在于還沒有考慮HTTP就緒狀態(tài)，這是請就緒狀態(tài)，這是請求求/響應(yīng)循環(huán)中的一個重要部分響應(yīng)循環(huán)中的一個重要部分 HTTP就緒狀態(tài)（就緒狀態(tài)（readyState）表示請求的狀態(tài)或情形。它用于確定該）表示請求的狀態(tài)或情形。它用于確定該請求是否已經(jīng)開始、是否得到了響應(yīng)或者請求請求是否已經(jīng)開始、是否得到了響應(yīng)或者請求/響應(yīng)模型是否已經(jīng)完成響應(yīng)模型是否已經(jīng)完成。它還可以幫助確定讀取服務(wù)器提供的響應(yīng)文本或數(shù)據(jù)是否安全。在。它還可以幫助確定讀取服務(wù)器提供的響應(yīng)文本或數(shù)據(jù)是否安全。在Ajax應(yīng)用程序中需要了解五種就緒狀態(tài)：應(yīng)用程序中需要了解五種就緒狀態(tài)：40：請求沒有發(fā)

55、出（在調(diào)用：請求沒有發(fā)出（在調(diào)用 open() 之前）之前）41：請求已經(jīng)建立但還沒有發(fā)出（調(diào)用：請求已經(jīng)建立但還沒有發(fā)出（調(diào)用 send() 之前）之前）42：請求已經(jīng)發(fā)出正在處理之中（這里通?？梢詮捻憫?yīng)得到內(nèi)容頭部）：請求已經(jīng)發(fā)出正在處理之中（這里通?？梢詮捻憫?yīng)得到內(nèi)容頭部）43：請求已經(jīng)處理，響應(yīng)中通常有部分數(shù)據(jù)可用，但是服務(wù)器還沒有完成響應(yīng)：請求已經(jīng)處理，響應(yīng)中通常有部分數(shù)據(jù)可用，但是服務(wù)器還沒有完成響應(yīng)44：響應(yīng)已完成，可以訪問服務(wù)器響應(yīng)并使用它：響應(yīng)已完成，可以訪問服務(wù)器響應(yīng)并使用它61Process and Portfolio Management 2005 IBM Corpor

56、ation 與大多數(shù)跨瀏覽器問題一樣，這些就緒狀態(tài)的使用也不盡一致。實際上與大多數(shù)跨瀏覽器問題一樣，這些就緒狀態(tài)的使用也不盡一致。實際上很少出現(xiàn)就緒狀態(tài)從很少出現(xiàn)就緒狀態(tài)從0到到1、2、3再到再到4，一些瀏覽器從不報告，一些瀏覽器從不報告0或或1而直而直接從接從2開始，然后是開始，然后是3和和4，其他瀏覽器則報告所有的狀態(tài)。還有一些則，其他瀏覽器則報告所有的狀態(tài)。還有一些則多次報告就緒狀態(tài)多次報告就緒狀態(tài)1 對于對于Ajax編程，需要直接處理的惟一狀態(tài)就是就緒狀態(tài)編程，需要直接處理的惟一狀態(tài)就是就緒狀態(tài)4，它表示服務(wù)，它表示服務(wù)器響應(yīng)已經(jīng)完成，可以安全地使用響應(yīng)數(shù)據(jù)了?；诖?，回調(diào)函數(shù)做如器響

57、應(yīng)已經(jīng)完成，可以安全地使用響應(yīng)數(shù)據(jù)了。基于此，回調(diào)函數(shù)做如下調(diào)整：下調(diào)整： 修改后就可以保證服務(wù)器的處理已經(jīng)完成，現(xiàn)在就會看到只顯示一次警修改后就可以保證服務(wù)器的處理已經(jīng)完成，現(xiàn)在就會看到只顯示一次警告信息了告信息了62Process and Portfolio Management 2005 IBM Corporation 以上代碼看起來似乎不錯，但是還有一個問題以上代碼看起來似乎不錯，但是還有一個問題 如果服務(wù)器響應(yīng)請求并完成如果服務(wù)器響應(yīng)請求并完成了處理但是報告了一個錯誤怎么辦？服務(wù)器端代碼應(yīng)該是由了處理但是報告了一個錯誤怎么辦？服務(wù)器端代碼應(yīng)該是由Ajax、JSP、普通、普通HTML表

58、單或其他類型的代碼調(diào)用的，但只能使用傳統(tǒng)的表單或其他類型的代碼調(diào)用的，但只能使用傳統(tǒng)的Web專用方法報告信專用方法報告信息。而在息。而在 Web 世界中，世界中，HTTP狀態(tài)碼（狀態(tài)碼（status）可以處理請求中可能發(fā)生的各）可以處理請求中可能發(fā)生的各種問題，比如：種問題，比如：4輸入了錯誤的輸入了錯誤的URL請求將得到請求將得到404錯誤碼，它表示該頁面不存在錯誤碼，它表示該頁面不存在4403和和401錯誤碼表示所訪問的數(shù)據(jù)受到保護或者禁止訪問錯誤碼表示所訪問的數(shù)據(jù)受到保護或者禁止訪問 無論哪種情況，這些錯誤碼都是從無論哪種情況，這些錯誤碼都是從完成的響應(yīng)完成的響應(yīng) 中得到的。換句話說，服

59、務(wù)器執(zhí)中得到的。換句話說，服務(wù)器執(zhí)行了請求（即行了請求（即HTTP就緒狀態(tài)是就緒狀態(tài)是4）但是沒有返回客戶機預(yù)期的數(shù)據(jù)。因此除了）但是沒有返回客戶機預(yù)期的數(shù)據(jù)。因此除了就緒狀態(tài)外，還需要檢查就緒狀態(tài)外，還需要檢查HTTP狀態(tài)。我們期望的狀態(tài)碼是狀態(tài)。我們期望的狀態(tài)碼是200，它表示一切順，它表示一切順利。如果就緒狀態(tài)是利。如果就緒狀態(tài)是4而且狀態(tài)碼是而且狀態(tài)碼是200，就可以處理服務(wù)器的數(shù)據(jù)了，而且這，就可以處理服務(wù)器的數(shù)據(jù)了，而且這些數(shù)據(jù)應(yīng)該就是要求的數(shù)據(jù)（而不是錯誤或者其他有問題的信息）些數(shù)據(jù)應(yīng)該就是要求的數(shù)據(jù)（而不是錯誤或者其他有問題的信息）63Process and Portfolio

60、 Management 2005 IBM Corporation 在回調(diào)函數(shù)中增加在回調(diào)函數(shù)中增加HTTP狀態(tài)（狀態(tài)（status）檢查：）檢查： 現(xiàn)在可以確保請求已經(jīng)處理完成（通過就緒狀態(tài)），服務(wù)器給出了正?，F(xiàn)在可以確保請求已經(jīng)處理完成（通過就緒狀態(tài)），服務(wù)器給出了正常的響應(yīng)（通過狀態(tài)碼），最后可以處理服務(wù)器返回的數(shù)據(jù)了。返回的數(shù)的響應(yīng)（通過狀態(tài)碼），最后可以處理服務(wù)器返回的數(shù)據(jù)了。返回的數(shù)據(jù)（文本形式）保存在據(jù)（文本形式）保存在XMLHttpRequest對象的對象的responseText屬性中屬性中。（如果服務(wù)器選擇使用。（如果服務(wù)器選擇使用XML響應(yīng)，則也可以使用在響應(yīng)，則也可以使用