ajax

ajax 簡介

Ajax 由 HTML车吹、JavaScript? 技術(shù)昧谊、DHTML 和 DOM 組成攀涵，這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。本文的作者是一位 Ajax 專家，他演示了這些技術(shù)如何協(xié)同工作 —— 從總體概述到細(xì)節(jié)的討論 —— 使高效的 Web 開發(fā)成為現(xiàn)實(shí)狂芋。他還揭開了 Ajax 核心概念的神秘面紗，包括 XMLHttpRequest 對象。五年前没炒，如果不知道 XML，您就是一只無人重視的丑小鴨犯戏。十八個(gè)月前送火，Ruby 成了關(guān)注的中心，不知道 Ruby 的程序員只能坐冷板凳了先匪。今天种吸，如果想跟上最新的技術(shù)時(shí)尚，那您的目標(biāo)就是 Ajax胚鸯。但是骨稿，Ajax 不僅僅 是一種時(shí)尚，它是一種構(gòu)建網(wǎng)站的強(qiáng)大方法姜钳，而且不像學(xué)習(xí)一種全新的語言那樣困難坦冠。但在詳細(xì)探討 Ajax 是什么之前，先讓我們花幾分鐘了解 Ajax 做 什么哥桥。目前辙浑，編寫應(yīng)用程序時(shí)有兩種基本的選擇：·桌面應(yīng)用程序 ·Web 應(yīng)用程序兩者是類似的，桌面應(yīng)用程序通常以 CD 為介質(zhì)（有時(shí)候可從網(wǎng)站下載）并完全安裝到您的計(jì)算機(jī)上拟糕。桌面應(yīng)用程序可能使用互聯(lián)網(wǎng)下載更新判呕，但運(yùn)行這些應(yīng)用程序的代碼在桌面計(jì)算機(jī)上倦踢。Web 應(yīng)用程序運(yùn)行在某處的 Web 服務(wù)器上 —— 毫不奇怪，要通過 Web 瀏覽器訪問這種應(yīng)用程序侠草。不過辱挥，比這些應(yīng)用程序的運(yùn)行代碼放在何處更重要的是，應(yīng)用程序如何運(yùn)轉(zhuǎn)以及如何與其進(jìn)行交互边涕。桌面應(yīng)用程序一般很快（就在您的計(jì)算機(jī)上運(yùn)行晤碘，不用等待互聯(lián)網(wǎng)連接），具有漂亮的用戶界面（通常和操作系統(tǒng)有關(guān)）和非凡的動態(tài)性功蜓≡耙可以單擊、選擇式撼、輸入童社、打開菜單和子菜單、到處巡游著隆，基本上不需要等待扰楼。另一方面，Web 應(yīng)用程序是最新的潮流旅东，它們提供了在桌面上不能實(shí)現(xiàn)的服務(wù)（比如 Amazon.com 和 eBay）灭抑。但是，伴隨著 Web 的強(qiáng)大而出現(xiàn)的是等待抵代，等待服務(wù)器響應(yīng)腾节，等待屏幕刷新，等待請求返回和生成新的頁面荤牍。顯然這樣說過于簡略了案腺，但基本的概念就是如此。您可能已經(jīng)猜到康吵，Ajax 嘗試建立桌面應(yīng)用程序的功能和交互性劈榨，與不斷更新的 Web 應(yīng)用程序之間的橋梁』耷叮可以使用像桌面應(yīng)用程序中常見的動態(tài)用戶界面和漂亮的控件同辣，不過是在 Web 應(yīng)用程序中。還等什么呢惭载？我們來看看 Ajax 如何將笨拙的 Web 界面轉(zhuǎn)化成能迅速響應(yīng)的 Ajax 應(yīng)用程序吧旱函。老技術(shù)，新技巧在談到 Ajax 時(shí)描滔，實(shí)際上涉及到多種技術(shù)棒妨，要靈活地運(yùn)用它必須深入了解這些不同的技術(shù)（本系列的頭幾篇文章將分別討論這些技術(shù)）。好消息是您可能已經(jīng)非常熟悉其中的大部分技術(shù)含长，更好的是這些技術(shù)都很容易學(xué)習(xí)券腔，并不像完整的編程語言（如 Java 或 Ruby）那樣困難伏穆。下面是 Ajax 應(yīng)用程序所用到的基本技術(shù)：·HTML 用于建立 Web 表單并確定應(yīng)用程序其他部分使用的字段。 ·JavaScript 代碼是運(yùn)行 Ajax 應(yīng)用程序的核心代碼纷纫，幫助改進(jìn)與服務(wù)器應(yīng)用程序的通信枕扫。 ·DHTML 或 Dynamic HTML，用于動態(tài)更新表單涛酗。我們將使用 div铡原、span 和其他動態(tài) HTML 元素來標(biāo)記 HTML。 ·文檔對象模型 DOM 用于（通過 JavaScript 代碼）處理 HTML 結(jié)構(gòu)和（某些情況下）服務(wù)器返回的 XML商叹。Ajax 的定義順便說一下，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫只泼。這個(gè)短語是 Adaptive Path 的 Jesse James Garrett 發(fā)明的（請參閱 參考資料）剖笙，按照 Jesse 的解釋，這不是 個(gè)首字母縮寫詞请唱。我們來進(jìn)一步分析這些技術(shù)的職責(zé)弥咪。以后的文章中我將深入討論這些技術(shù)，目前只要熟悉這些組件和技術(shù)就可以了十绑。對這些代碼越熟悉聚至，就越容易從對這些技術(shù)的零散了解轉(zhuǎn)變到真正把握這些技術(shù)（同時(shí)也真正打開了 Web 應(yīng)用程序開發(fā)的大門）。XMLHttpRequest 對象要了解的一個(gè)對象可能對您來說也是最陌生的本橙，即 XMLHttpRequest扳躬。這是一個(gè) JavaScript 對象，創(chuàng)建該對象很簡單甚亭，如清單 1 所示贷币。清單 1. 創(chuàng)建新的 XMLHttpRequest 對象var xmlHttp = new XMLHttpRequest();下一期文章中將進(jìn)一步討論這個(gè)對象，現(xiàn)在要知道這是處理所有服務(wù)器通信的對象亏狰。繼續(xù)閱讀之前役纹，先停下來想一想：通過 XMLHttpRequest 對象與服務(wù)器進(jìn)行對話的是 JavaScript 技術(shù)。這不是一般的應(yīng)用程序流暇唾，這恰恰是 Ajax 的強(qiáng)大功能的來源促脉。在一般的 Web 應(yīng)用程序中，用戶填寫表單字段并單擊 Submit 按鈕策州。然后整個(gè)表單發(fā)送到服務(wù)器瘸味，服務(wù)器將它轉(zhuǎn)發(fā)給處理表單的腳本（通常是 PHP 或 Java，也可能是 CGI 進(jìn)程或者類似的東西）抽活，腳本執(zhí)行完成后再發(fā)送回全新的頁面硫戈。該頁面可能是帶有已經(jīng)填充某些數(shù)據(jù)的新表單的 HTML，也可能是確認(rèn)頁面下硕，或者是具有根據(jù)原來表單中輸入數(shù)據(jù)選擇的某些選項(xiàng)的頁面丁逝。當(dāng)然汁胆，在服務(wù)器上的腳本或程序處理和返回新表單時(shí)用戶必須等待。屏幕變成一片空白霜幼，等到服務(wù)器返回?cái)?shù)據(jù)后再重新繪制嫩码。這就是交互性差的原因，用戶得不到立即反饋罪既，因此感覺不同于桌面應(yīng)用程序铸题。Ajax 基本上就是把 JavaScript 技術(shù)和 XMLHttpRequest 對象放在 Web 表單和服務(wù)器之間。當(dāng)用戶填寫表單時(shí)琢感，數(shù)據(jù)發(fā)送給一些 JavaScript 代碼而不是 直接發(fā)送給服務(wù)器丢间。相反，JavaScript 代碼捕獲表單數(shù)據(jù)并向服務(wù)器發(fā)送請求驹针。同時(shí)用戶屏幕上的表單也不會閃爍烘挫、消失或延遲。換句話說柬甥，JavaScript 代碼在幕后發(fā)送請求饮六，用戶甚至不知道請求的發(fā)出。更好的是苛蒲，請求是異步發(fā)送的卤橄，就是說 JavaScript 代碼（和用戶）不用等待服務(wù)器的響應(yīng)。因此用戶可以繼續(xù)輸入數(shù)據(jù)臂外、滾動屏幕和使用應(yīng)用程序窟扑。然后，服務(wù)器將數(shù)據(jù)返回 JavaScript 代碼（仍然在 Web 表單中）寄月，后者決定如何處理這些數(shù)據(jù)辜膝。它可以迅速更新表單數(shù)據(jù)，讓人感覺應(yīng)用程序是立即完成的漾肮，表單沒有提交或刷新而用戶得到了新數(shù)據(jù)厂抖。JavaScript 代碼甚至可以對收到的數(shù)據(jù)執(zhí)行某種計(jì)算，再發(fā)送另一個(gè)請求克懊，完全不需要用戶干預(yù)忱辅！這就是 XMLHttpRequest 的強(qiáng)大之處。它可以根據(jù)需要自行與服務(wù)器進(jìn)行交互谭溉，用戶甚至可以完全不知道幕后發(fā)生的一切墙懂。結(jié)果就是類似于桌面應(yīng)用程序的動態(tài)、快速響應(yīng)扮念、高交互性的體驗(yàn)损搬，但是背后又擁有互聯(lián)網(wǎng)的全部強(qiáng)大力量。加入一些 JavaScript得到 XMLHttpRequest 的句柄后，其他的 JavaScript 代碼就非常簡單了巧勤。事實(shí)上嵌灰，我們將使用 JavaScript 代碼完成非常基本的任務(wù)：·獲取表單數(shù)據(jù)：JavaScript 代碼很容易從 HTML 表單中抽取數(shù)據(jù)并發(fā)送到服務(wù)器颅悉。 ·修改表單上的數(shù)據(jù)：更新表單也很簡單沽瞭，從設(shè)置字段值到迅速替換圖像。 ·解析 HTML 和 XML：使用 JavaScript 代碼操縱 DOM（請參閱 下一節(jié)）剩瓶，處理 HTML 表單服務(wù)器返回的 XML 數(shù)據(jù)的結(jié)構(gòu)驹溃。 對于前兩點(diǎn)，需要非常熟悉 getElementById() 方法延曙，如 清單 2 所示豌鹤。清單 2. 用 JavaScript 代碼捕獲和設(shè)置字段值// Get the value of the "phone" field and stuff it in a variable called phonevar phone = document.getElementById("phone").value;// Set some values on a form using an array called responsedocument.getElementById("order").value = response[0];document.getElementById("address").value = response[1];這里沒有特別需要注意的地方，真是好極了枝缔！您應(yīng)該認(rèn)識到這里并沒有非常復(fù)雜的東西傍药。只要掌握了 XMLHttpRequest，Ajax 應(yīng)用程序的其他部分就是如 清單 2 所示的簡單 JavaScript 代碼了魂仍，混合有少量的 HTML。同時(shí)拣挪，還要用一點(diǎn)兒 DOM擦酌，我們就來看看吧。以 DOM 結(jié)束最后還有 DOM菠劝，即文檔對象模型赊舶。可能對有些讀者來說 DOM 有點(diǎn)兒令人生畏赶诊，HTML 設(shè)計(jì)者很少使用它笼平，即使 JavaScript 程序員也不大用到它，除非要完成某項(xiàng)高端編程任務(wù)舔痪。大量使用 DOM 的是 復(fù)雜的 Java 和 C/C++ 程序寓调，這可能就是 DOM 被認(rèn)為難以學(xué)習(xí)的原因。幸運(yùn)的是锄码，在 JavaScript 技術(shù)中使用 DOM 很容易夺英，也非常直觀。現(xiàn)在滋捶，按照常規(guī)也許應(yīng)該說明如何使用 DOM痛悯，或者至少要給出一些示例代碼，但這樣做也可能誤導(dǎo)您重窟。即使不理會 DOM载萌，仍然能深入地探討 Ajax，這也是我準(zhǔn)備采用的方法。以后的文章將再次討論 DOM扭仁，現(xiàn)在只要知道可能需要 DOM 就可以了垮衷。當(dāng)需要在 JavaScript 代碼和服務(wù)器之間傳遞 XML 和改變 HTML 表單的時(shí)候，我們再深入研究 DOM斋枢。沒有它也能做一些有趣的工作帘靡，因此現(xiàn)在就把 DOM 放到一邊吧。獲取 Request 對象有了上面的基礎(chǔ)知識后瓤帚，我們來看看一些具體的例子描姚。XMLHttpRequest 是 Ajax 應(yīng)用程序的核心，而且對很多讀者來說可能還比較陌生戈次，我們就從這里開始吧轩勘。從 清單 1 可以看出，創(chuàng)建和使用這個(gè)對象非常簡單怯邪，不是嗎绊寻？等一等。還記得幾年前的那些討厭的瀏覽器戰(zhàn)爭嗎悬秉？沒有一樣?xùn)|西在不同的瀏覽器上得到同樣的結(jié)果澄步。不管您是否相信，這些戰(zhàn)爭仍然在繼續(xù)和泌，雖然規(guī)模較小村缸。但令人奇怪的是，XMLHttpRequest 成了這場戰(zhàn)爭的犧牲品之一武氓。因此獲得 XMLHttpRequest 對象可能需要采用不同的方法梯皿。下面我將詳細(xì)地進(jìn)行解釋。使用 Microsoft 瀏覽器Microsoft 瀏覽器 Internet Explorer 使用 MSXML 解析器處理 XML（可以通過 參考資料 進(jìn)一步了解 MSXML）县恕。因此如果編寫的 Ajax 應(yīng)用程序要和 Internet Explorer 打交道东羹，那么必須用一種特殊的方式創(chuàng)建對象。但并不是這么簡單忠烛。根據(jù) Internet Explorer 中安裝的 JavaScript 技術(shù)版本不同属提，MSXML 實(shí)際上有兩種不同的版本，因此必須對這兩種情況分別編寫代碼况木。請參閱 清單 3垒拢，其中的代碼在 Microsoft 瀏覽器上創(chuàng)建了一個(gè) XMLHttpRequest。清單 3. 在 Microsoft 瀏覽器上創(chuàng)建 XMLHttpRequest 對象var xmlHttp = false;try {? xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {? try {? ? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");? } catch (e2) {? ? xmlHttp = false;? }}您對這些代碼可能還不完全理解火惊，但沒有關(guān)系求类。當(dāng)本系列文章結(jié)束的時(shí)候，您將對 JavaScript 編程屹耐、錯(cuò)誤處理尸疆、條件編譯等有更深的了解〈涣裕現(xiàn)在只要牢牢記住其中的兩行代碼：xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");和xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");。這兩行代碼基本上就是嘗試使用一個(gè)版本的 MSXML 創(chuàng)建對象寿弱，如果失敗則使用另一個(gè)版本創(chuàng)建該對象犯眠。不錯(cuò)吧？如果都不成功症革，則將 xmlHttp 變量設(shè)為 false筐咧，告訴您的代碼出現(xiàn)了問題。如果出現(xiàn)這種情況噪矛，可能是因?yàn)榘惭b了非 Microsoft 瀏覽器量蕊，需要使用不同的代碼。處理 Mozilla 和非 Microsoft 瀏覽器如果選擇的瀏覽器不是 Internet Explorer艇挨，或者為非 Microsoft 瀏覽器編寫代碼残炮，就需要使用不同的代碼。事實(shí)上就是 清單 1 所示的一行簡單代碼：var xmlHttp = new XMLHttpRequest object;缩滨。這行簡單得多的代碼在 Mozilla势就、Firefox、Safari脉漏、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 瀏覽器中苞冯，創(chuàng)建了 XMLHttpRequest 對象。結(jié)合起來關(guān)鍵是要支持所有 瀏覽器侧巨。誰愿意編寫一個(gè)只能用于 Internet Explorer 或者非 Microsoft 瀏覽器的應(yīng)用程序呢抱完？或者更糟，要編寫一個(gè)應(yīng)用程序兩次刃泡？當(dāng)然不！因此代碼要同時(shí)支持 Internet Explorer 和非 Microsoft 瀏覽器碉怔。清單 4 顯示了這樣的代碼烘贴。