惡搞把握Ajax第1部分Ajax進(jìn)

1、.惡搞 把握 Ajax 第 1 部分 Ajax 進(jìn)簡介：Ajax由HTML、JavaScript&#8482；技術(shù)、DHTML和DOM組成，這一出色的方法可以將笨拙的Web界面轉(zhuǎn)化成交互性的Ajax應(yīng)用程序。本系列的作者是一位Ajax專家，他演示了這些技術(shù)如何協(xié)同工作-從總體概述到細(xì)節(jié)的討論-使高效的Web開發(fā)成為現(xiàn)實。他還揭開了Ajax核心概念的神秘面紗，包括XML Request對象。五年前，假設(shè)不知道XML，您就是一只無人重視的丑小鴨。十八個月前，Ruby成了關(guān)注的中心，不知道Ruby的程序員只能坐冷板凳了。今天，假設(shè)想跟上最新的技術(shù)時尚，那您的目的就是Ajax。但是，Ajax不

2、僅僅是一種時尚，它是一種構(gòu)建網(wǎng)站的強(qiáng)大方法，而且不像學(xué)習(xí)一種全新的語言那樣困難。請訪問Ajax技術(shù)資源中心，這是有關(guān)Ajax編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki和新聞。任何新信息都能在這里找到。但在詳細(xì)討論Ajax是什么之前，先讓我們花幾分鐘理解Ajax做什么。目前，編寫應(yīng)用程序時有兩種根本的選擇：桌面應(yīng)用程序Web應(yīng)用程序兩者是類似的，桌面應(yīng)用程序通常以CD為介質(zhì)有時候可從網(wǎng)站下載并完全安裝到您的計算機(jī)上。桌面應(yīng)用程序可能使用互聯(lián)網(wǎng)下載更新，但運行這些應(yīng)用程序的代碼在桌面計算機(jī)上。Web應(yīng)用程序運行在某處的Web效勞器上-毫不奇怪，要通過Web閱讀器訪問這種

3、應(yīng)用程序。不過，比這些應(yīng)用程序的運行代碼放在何處更重要的是，應(yīng)用程序如何運轉(zhuǎn)以及如何與其進(jìn)展交互。桌面應(yīng)用程序一般很快就在您的計算機(jī)上運行，不用等待互聯(lián)網(wǎng)連接，具有漂亮的用戶界面通常和操縱系統(tǒng)有關(guān)和非凡的動態(tài)性?？梢詥螕?、選擇、輸入、翻開菜單和子菜單、到處巡游，根本上不需要等待。另一方面，Web應(yīng)用程序是最新的潮流，它們提供了在桌面上不能實現(xiàn)的效勞比方Amazon 和eBay。但是，伴隨著Web的強(qiáng)大而出現(xiàn)的是等待，等待效勞器響應(yīng)，等待屏幕刷新，等待懇求返回和生成新的頁面。顯然這樣說過于簡單了，但根本的概念就是如此。您可能已經(jīng)猜到，Ajax嘗試建立桌面應(yīng)用程序的功能和交互性，與不斷更新的Web

4、應(yīng)用程序之間的橋梁。可以使用像桌面應(yīng)用程序中常見的動態(tài)用戶界面和漂亮的控件，不過是在Web應(yīng)用程序中。還等什么呢?我們來看看Ajax如何將笨拙的Web界面轉(zhuǎn)化成能迅速響應(yīng)的Ajax應(yīng)用程序吧。老技術(shù)，新技巧在談到Ajax時，實際上涉及到多種技術(shù)，要靈敏地運用它必須深化理解這些不同的技術(shù)本系列的頭幾篇文章將分別討論這些技術(shù)。好消息是您可能已經(jīng)非常熟悉其中的大部分技術(shù)，更好的是這些技術(shù)都很容易學(xué)習(xí)，并不像完好的編程語言如Java或Ruby那樣困難。Ajax的定義順便說一下，Ajax是Asynchronous JavaScript and XML以及DHTML等的縮寫。這個短語是Adaptive P

5、ath的Jesse James Garrett創(chuàng)造的請參閱參考資料，按照J(rèn)esse的解釋，這不是個首字母縮寫詞。下面是Ajax應(yīng)用程序所用到的根本技術(shù)：HTML用于建立Web表單并確定應(yīng)用程序其他部分使用的字段。JavaScript代碼是運行Ajax應(yīng)用程序的核心代碼，幫助改進(jìn)與效勞器應(yīng)用程序的通信。DHTML或Dynamic HTML，用于動態(tài)更新表單。我們將使用div、span和其他動態(tài)HTML元素來標(biāo)記HTML。文檔對象模型DOM用于通過JavaScript代碼處理HTML構(gòu)造和某些情況下效勞器返回的XML。我們來進(jìn)一步分析這些技術(shù)的職責(zé)。以后的文章中我將深化討論這些技術(shù)，目前只要熟悉這

6、些組件和技術(shù)就可以了。對這些代碼越熟悉，就越容易從對這些技術(shù)的零散理解轉(zhuǎn)變到真正把握這些技術(shù)同時也真正翻開了Web應(yīng)用程序開發(fā)的大門。XML Request對象要理解的一個對象可能對您來說也是最陌生的，即XML Request。這是一個JavaScript對象，創(chuàng)立該對象很簡單，如清單1所示。清單1.創(chuàng)立新的XML Request對象script language="javascript"type="text/javascript"var xml =new XML Request；/script下一期文章中將進(jìn)一步討論這個對象，如今要知道這是處理所有效勞

7、器通信的對象。繼續(xù)閱讀之前，先停下來想一想：通過XML Request對象與效勞器進(jìn)展對話的是JavaScript技術(shù)。這不是一般的應(yīng)用程序流，這恰恰是Ajax的強(qiáng)大功能的來源。在一般的Web應(yīng)用程序中，用戶填寫表單字段并單擊Submit按鈕。然后整個表單發(fā)送到效勞器，效勞器將它轉(zhuǎn)發(fā)給處理表單的腳本通常是PHP或Java，也可能是CGI進(jìn)程或者類似的東西，腳本執(zhí)行完成后再發(fā)送回全新的頁面。該頁面可能是帶有已經(jīng)填充某些數(shù)據(jù)的新表單的HTML，也可能是確認(rèn)頁面，或者是具有根據(jù)原來表單中輸入數(shù)據(jù)選擇的某些選項的頁面。當(dāng)然，在效勞器上的腳本或程序處理和返回新表單時用戶必須等待。屏幕變成一片空缺，等到效

8、勞器返回數(shù)據(jù)后再重新繪制。這就是交互性差的原因，用戶得不到立即反響，因此感覺不同于桌面應(yīng)用程序。Ajax根本上就是把JavaScript技術(shù)和XML Request對象放在Web表單和效勞器之間。當(dāng)用戶填寫表單時，數(shù)據(jù)發(fā)送給一些JavaScript代碼而不是直接發(fā)送給效勞器。相反，JavaScript代碼捕獲表單數(shù)據(jù)并向效勞器發(fā)送懇求。同時用戶屏幕上的表單也不會閃爍、消失或延遲。換句話說，JavaScript代碼在幕后發(fā)送懇求，用戶甚至不知道懇求的發(fā)出。更好的是，懇求是異步發(fā)送的，就是說JavaScript代碼和用戶不用等待效勞器的響應(yīng)。因此用戶可以繼續(xù)輸入數(shù)據(jù)、滾動屏幕和使用應(yīng)用程序。然后，

9、效勞器將數(shù)據(jù)返回JavaScript代碼仍然在Web表單中，后者決定如何處理這些數(shù)據(jù)。它可以迅速更新表單數(shù)據(jù)，讓人感覺應(yīng)用程序是立即完成的，表單沒有提交或刷新而用戶得到了新數(shù)據(jù)。JavaScript代碼甚至可以對收到的數(shù)據(jù)執(zhí)行某種計算，再發(fā)送另一個懇求，完全不需要用戶干預(yù)！紅酒木瓜美人湯這就是XML Request的強(qiáng)大之處。它可以根據(jù)需要自行與效勞器進(jìn)展交互，用戶甚至可以完全不知道幕后發(fā)生的一切。結(jié)果就是類似于桌面應(yīng)用程序的動態(tài)、快速響應(yīng)、高交互性的體驗，但是背后又擁有互聯(lián)網(wǎng)的全部強(qiáng)大力量。參加一些JavaScript得到XML Request的句柄后，其他的JavaScript代碼就非常簡

10、單了。事實上，我們將使用JavaScript代碼完成非常根本的任務(wù)：獲取表單數(shù)據(jù)：JavaScript代碼很容易從HTML表單中抽取數(shù)據(jù)并發(fā)送到效勞器。修改表單上的數(shù)據(jù)：更新表單也很簡單，從設(shè)置字段值到迅速交換圖像。解析HTML和XML：使用JavaScript代碼操縱DOM請參閱下一節(jié)，處理HTML表單效勞器返回的XML數(shù)據(jù)的構(gòu)造。對于前兩點，需要非常熟悉getElementById方法，如清單2所示。清單2.用JavaScript代碼捕獲和設(shè)置字段值/Get the value of the"phone"field and stuff it in avariable c

11、alled phone var phone=document.getElementById"phone".value；/Set some values on aform using an array called response document.getElementById"order".value=response0；document.getElementById"address".value=response1；這里沒有特別需要注意的地方，真是好極了！您應(yīng)該認(rèn)識到這里并沒有非常復(fù)雜的東西。只要把握了XML Request，Aj

12、ax應(yīng)用程序的其他部分就是如清單2所示的簡單JavaScript代碼了，混合有少量的HTML。同時，還要用一點兒DOM，我們就來看看吧。以DOM完畢最后還有DOM，即文檔對象模型?？赡軐τ行┳x者來說DOM有點兒令人生畏，HTML設(shè)計者很少使用它，即使JavaScript程序員也不大用到它，除非要完成某項高端編程任務(wù)。大量使用DOM的是復(fù)雜的Java和C/C+程序，這可能就是DOM被認(rèn)為難以學(xué)習(xí)的原因。幸運的是，在JavaScript技術(shù)中使用DOM很容易，也非常直觀。如今，按照常規(guī)也許應(yīng)該說明如何使用DOM，或者至少要給出一些例如代碼，但這樣做也可能誤導(dǎo)您。即使不理睬DOM，仍然能深化地討論A

13、jax，這也是我準(zhǔn)備采用的方法。以后的文章將再次討論DOM，如今只要知道可能需要DOM就可以了。當(dāng)需要在JavaScript代碼和效勞器之間傳遞XML和改變HTML表單的時候，我們再深化研究DOM。沒有它也能做一些有趣的工作，因此如今就把DOM放到一邊吧。回頁首獲取Request對象有了上面的根底知識后，我們來看看一些詳細(xì)的例子。XML Request是Ajax應(yīng)用程序的核心，而且對很多讀者來說可能還比較陌生，我們就從這里開場吧。從清單1可以看出，創(chuàng)立和使用這個對象非常簡單，不是嗎?等一等。還記得幾年前的那些討厭的閱讀器戰(zhàn)爭嗎?沒有一樣?xùn)|西在不同的閱讀器上得到同樣的結(jié)果。不管您是否相信，這些戰(zhàn)

14、爭仍然在繼續(xù)，固然規(guī)模較小。但令人奇怪的是，XML Request成了這場戰(zhàn)爭的犧牲品之一。因此獲得XML Request對象可能需要采用不同的方法。下面我將詳細(xì)地進(jìn)展解釋。使用Microsoft閱讀器Microsoft閱讀器Internet Explorer使用MSXML解析器處理XML可以通過參考資料進(jìn)一步理解MSXML。因此假設(shè)編寫的Ajax應(yīng)用程序要和Internet Explorer打交道，那么必須用一種特殊的方式創(chuàng)立對象。但并不是這么簡單。根據(jù)Internet Explorer中安裝的JavaScript技術(shù)版本不同，MSXML實際上有兩種不同的版本，因此必須對這兩種情況分別編寫代

15、碼。請參閱清單3，其中的代碼在Microsoft閱讀器上創(chuàng)立了一個XML Request。清單3.在Microsoft閱讀器上創(chuàng)立XML Request對象var xml =false；tryxml =new ActiveXObject"Msxml2.XML "；catchetryxml =new ActiveXObject"Microsoft.XML "；catche2xml =false；您對這些代碼可能還不完全理解，但沒有關(guān)系。當(dāng)本系列文章完畢的時候，您將對JavaScript編程、錯誤處理、條件編譯等有更深的理解。如今只要牢牢記住其中的兩行代碼：

16、xml =new ActiveXObject"Msxml2.XML "；和xml =new ActiveXObject"Microsoft.XML "；。這兩行代碼根本上就是嘗試使用一個版本的MSXML創(chuàng)立對象，假設(shè)失敗那么使用另一個版本創(chuàng)立該對象。不錯吧?假設(shè)都不成功，那么將xml 變量設(shè)為false，告訴您的代碼出現(xiàn)了題目。假設(shè)出現(xiàn)這種情況，可能是因為安裝了非Microsoft閱讀器，需要使用不同的代碼。處理Mozilla和非Microsoft閱讀器假設(shè)選擇的閱讀器不是Internet Explorer，或者為非Microsoft閱讀器編寫代碼，就需

17、要使用不同的代碼。事實上就是清單1所示的一行簡單代碼：var xml =new XML Request object；。這行簡單得多的代碼在Mozilla、紅酒木瓜靚湯Firefox、Safari、Opera以及根本上所有以任何形式或方式支持Ajax的非Microsoft閱讀器中，創(chuàng)立了XML Request對象。結(jié)合起來關(guān)鍵是要支持所有閱讀器。誰愿意編寫一個只能用于Internet Explorer或者非Microsoft閱讀器的應(yīng)用程序呢?或者更糟，要編寫一個應(yīng)用程序兩次?當(dāng)然不！因此代碼要同時支持Internet Explorer和非Microsoft閱讀器。清單4顯示了這樣的代碼。清單

18、4.以支持多種閱讀器的方式創(chuàng)立XML Request對象/*Create anew XML Request object to talk to the Web server*/var xml =false；/*cc_on*/*if_jscript_version=5tryxml =new ActiveXObject"Msxml2.XML "；catchetryxml =new ActiveXObject"Microsoft.XML "；catche2xml =false；end*/if！xml &&typeof XML Request！=

19、'undefined'xml =new XML Request；如今先不管那些注釋掉的奇怪符號 jdlqq ，如cc_on，這是特殊的JavaScript編譯器命令，將在下一期針對XML Request的文章中詳細(xì)討論。這段代碼的核心分為三步：建立一個變量xml 來引用即將創(chuàng)立的XML Request對象。嘗試在Microsoft閱讀器中創(chuàng)立該對象：嘗試使用Msxml2.XML 對象創(chuàng)立它。假設(shè)失敗，再嘗試Microsoft.XML 對象。假設(shè)仍然沒有建立xml ，那么以非Microsoft的方式創(chuàng)立該對象。最后，xml 應(yīng)該引用一個有效的XML Request對象，無論運行什

20、么樣的閱讀器。關(guān)于平安性的一點說明平安性如何呢?如今閱讀器容許用戶進(jìn)步他們的平安等級，關(guān)閉JavaScript技術(shù)，禁用閱讀器中的任何選項。在這種情況下，代碼無論如何都不會工作。此時必須適當(dāng)?shù)靥幚眍}目，這需要單獨的一篇文章來討論，要放到以后了這個系列夠長了吧?不用擔(dān)憂，讀完之前也許您就把握了。如今要編寫一段強(qiáng)健但不夠完美的代碼，對于把握Ajax來說就很好了。以后我們還將討論更多的細(xì)節(jié)?；仨撌譇jax世界中的懇求/響應(yīng)如今我們介紹了Ajax，對XML Request對象以及如何創(chuàng)立它也有了根本的理解。假設(shè)閱讀得很仔細(xì)，您可能已經(jīng)知道與效勞器上的Web應(yīng)用程序打交道的是JavaScript技術(shù)，而

21、不是直接提交給那個應(yīng)用程序的HTML表單。紅酒木瓜靚湯有效嗎還缺少什么呢?到底如何使用XML Request。因為這段代碼非常重要，您編寫的每個Ajax應(yīng)用程序都要以某種形式使用它，先看看Ajax的根本懇求/響應(yīng)模型是什么樣吧。發(fā)出懇求您已經(jīng)有了一個嶄新的XML Request對象，如今讓它干點活兒吧。首先需要一個Web頁面可以調(diào)用的JavaScript方法比方當(dāng)用戶輸入文本或者從菜單中選擇一項時。接下來就是在所有Ajax應(yīng)用程序中根本都雷同的流程：從Web表單中獲取需要的數(shù)據(jù)。建立要連接的URL。翻開到效勞器的連接。設(shè)置效勞器在完成后要運行的函數(shù)。發(fā)送懇求。清單5中的例如Ajax方法就是按照

22、這個順序組織的：清單5.發(fā)出Ajax懇求function callServer/Get the city and state from the web form var city=document.getElementById"city".value；var state=document.getElementById"state".value；/Only go on if there are values for both fields ifcity=null|city=""return；ifstate=null|state=&quo

23、t;"return；/Build the URL to connect to var url="/scripts/getZipCode.php?city="+escapecity+"&state="+escapestate；/Open aconnection to the server xml .open"GET",url,true；/Setup afunction for the server to run when it's done xml .onreadystatechange=updatePage；

24、/Send the request xml .sendnull；其中大部分代碼意義都很明確。開場的代碼使用根本JavaScript代碼獲取幾個表單字段的值。然后設(shè)置一個PHP腳本作為鏈接的目的。要注意腳本URL的指定方式，city和state來自表單使用簡單的GET參數(shù)附加在URL之后。然后翻開一個連接，這是您第一次看到使用XML Request。其中指定了連接方法GET和要連接的URL。最后一個參數(shù)假設(shè)設(shè)為true，那么將懇求一個異步連接這就是Ajax的由來。假設(shè)使用false，那么代碼發(fā)出懇求后將等待效勞器返回的響應(yīng)。假設(shè)設(shè)為true，當(dāng)效勞器在后臺處理懇求的時候用戶仍然可以使用表單甚至調(diào)

25、用其他JavaScript方法。xml 要記住，這是XML Request對象實例的onreadystatechange屬性可以告訴效勞器在運行完成后可能要用五分鐘或者五個小時做什么。因為代碼沒有等待效勞器，必須讓效勞器知道怎么做以便您能作出響應(yīng)。在這個例如中，假設(shè)效勞器處理完了懇求，一個特殊的名為updatePage的方法將被觸發(fā)。最后，使用值null調(diào)用send。因為已經(jīng)在懇求URL中添加了要發(fā)送給效勞器的數(shù)據(jù)city和state，所以懇求中不需要發(fā)送任何數(shù)據(jù)。這樣就發(fā)出了懇求，效勞器按照您的要求工作。假設(shè)沒有發(fā)現(xiàn)任何新穎的東西，您應(yīng)該體會到這是多么簡單明了！除了牢牢記住Ajax的異步特性

26、外，這些內(nèi)容都相當(dāng)簡單。應(yīng)該感謝Ajax使您可以專心編寫漂亮的應(yīng)用程序和界面，而不用擔(dān)憂復(fù)雜的 懇求/響應(yīng)代碼。清單5中的代碼說明了Ajax的易用性。數(shù)據(jù)是簡單的文本，可以作為懇求URL的一部分。用GET而不是更復(fù)雜的POST發(fā)送懇求。沒有XML和要添加的內(nèi)容頭部，懇求體中沒有要發(fā)送的數(shù)據(jù)；換句話說，這就是Ajax的烏托邦。不用擔(dān)憂，隨著本系列文章的展開，事情會變得越來越復(fù)雜。您將看到如何發(fā)送POST懇求 yqtoy 、如何設(shè)置懇求頭部和內(nèi)容類型、如何在消息中編碼XML、如何增加懇求的平安性，可以做的工作還有很多！暫時先不用管那些難點，掌握好根本的東西就行了，很快我們就會建立一整套的Ajax工

27、具庫。處理響應(yīng)如今要面對效勞器的響應(yīng)了。如今只要知道兩點：什么也不要做，直到xml .readyState屬性的值等于4。效勞器將把響應(yīng)填充到xml .responseText屬性中。其中的第一點，即就緒狀態(tài)，將在下一篇文章中詳細(xì)討論，您將進(jìn)一步理解 懇求的階段，可能比您設(shè)想的還多。如今只要檢查一個特定的值4就可以了下一期文章中還有更多的值要介紹。第二點，使用xml .responseText屬性獲得效勞器的響應(yīng)，這很簡單。清單6中的例如方法可供效勞器根據(jù)清單5中發(fā)送的數(shù)據(jù)調(diào)用。清單6.處理效勞器響應(yīng)function updatePageifxml .readyState=4var respo

28、nse=xml .responseText；document.getElementById"zipCode".value=response；這些代碼同樣既不難也不復(fù)雜。它等待效勞器調(diào)用，假設(shè)是就緒狀態(tài)，那么使用效勞器返回的值這里是用戶輸入的城市和州的ZIP編碼設(shè)置另一個表單字段的值。于是包含ZIP編碼的zipCode字段突然出現(xiàn)了，而用戶沒有按任何按鈕！這就是前面所說的桌面應(yīng)用程序的感覺。快速響應(yīng)、動態(tài)感受等等，這些都只因為有了小小的一段Ajax代碼。細(xì)心的讀者可能注意到zipCode是一個普通的文本字段。一旦效勞器返回ZIP編碼，updatePage方法就用城市/州的ZI

29、P編碼設(shè)置那個字段的值，用戶就可以改寫該值。這樣做有兩個原因：保持例子簡單，說明有時候可能希望用戶可以修改效勞器返回的數(shù)據(jù)。要記住這兩點，它們對于好的用戶界面設(shè)計來說很重要。回頁首連接Web表單還有什么呢?實際上沒有多少了。一個JavaScript方法捕捉用戶輸入表單的信息并將其發(fā)送到效勞器，另一個JavaScript方法監(jiān)聽和處理響應(yīng)，并在響應(yīng)返回時設(shè)置字段的值。所有這些實際上都依靠于調(diào)用第一個JavaScript方法，它啟動了整個過程。最明顯的方法是在HTML表單中增加一個按鈕，但這是2001年的方法，您不這樣認(rèn)為嗎?還是像清單7這樣利用JavaScript技術(shù)吧。清單7.啟動一個Ajax過程form pCity：input type="text"