HTML5 測試 Internet Explorer 表現奇差
Ajax 由 HTML、JavaScript™ 技術、DHTML 和 DOM 組成,這一傑出的方法可以將笨拙的 Web 介面轉化成互動性的 Ajax 應用程式。
掌握 AJAX
理解 Ajax 及其工作原理,建置網站的一種有效方法
Ajax 由 HTML、JavaScript™ 技術、DHTML 和 DOM 組成,這一傑出的方法可以將笨拙的 Web 介面轉化成互動性的 Ajax 應用程式。揭開 Ajax 核心概念的神秘面紗,包括 XMLHttpRequest 物件。Ajax 不僅僅是一種時尚,它是一種建置網站的強大方法,而且不像學習一種全新的語言那樣困難。但在詳細探討 Ajax 是什麼之前,先讓我們瞭解 Ajax 是做什麼。目前,設計應用程式時有兩種基本的選擇:
1. 視窗應用程式
2. Web 應用程式
兩者是類似的,視窗應用程式通常以 CD 為媒體,並完全安裝到電腦上。視窗應用程式可能使用網際網路下載更新,但執行這些應用程式的程式碼在視窗電腦上。
不過,更重要的是 Web 應用程式如何執行以及如何與其進行互動。視窗應用程式一般很快,具有漂亮的使用者介面和非凡的動態性。可以點選、選擇、輸入、打開功能表和子功能表、到處悠遊,基本上不需要等待。
另一方面,Web 應用程式是最新潮流,它們提供了在視窗上不能實現的服務。顯然這樣說過於簡略了,但基本的概念就是如此。您可能已經猜到,Ajax 嘗試建立視窗應用程式的功能和互動性,與不斷更新的 Web 應用程式之間的橋樑。可以使用像桌面應用程式中常見的動態用戶介面和漂亮的控制項,不過是在 Web 應用程式中。
老技術,新技巧
在談到 Ajax 時,實際上涉及到多種技術,要靈活地運用它必須深入瞭解這些不同的技術。好消息是您可能已經非常熟悉其中的大部分技術,更好的是這些技術都很容易學習,並不像完整的程式語言(如 Java)那樣困難。
Ajax 的定義
Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的縮寫。這個縮寫是 Adaptive Path 的 Jesse James Garrett 發明的。下面是 Ajax 應用程式所用到的基本技術:
- HTML 用於建立 Web 表單並確認應用程式其他部分使用的欄位。
- JavaScript 程式碼是執行 Ajax 應用程式的核心程式碼,幫助改進與伺服器應用程式的通訊。
- DHTML 或 Dynamic HTML,用於動態更新表單。我們將使用 div、span 和其他動態 HTML 元素來標記 HTML。
- 文件物件模型 DOM 用於(透過 JavaScript 程式碼)處理 HTML 結構和(某些情況下)伺服器返回的 XML。
- 我們來進一步分析這些技術的職責。以後的文章中我將深入討論這些技術,目前只要熟悉這些元件和技術就可以了。對這些程式碼越熟悉,就越容易從對這些技術的零散瞭解轉變到真正把握這些技術(同時也真正打開了 Web 應用程式開發的大門)。
XMLHttpRequest 對象
要瞭解的一個物件可能對您來說也是最陌生的,即 XMLHttpRequest。這是一個 JavaScript 物件,建立該物件很簡單,如下所示。
建立新的 XMLHttpRequest 物件
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
透過 XMLHttpRequest 物件與伺服器進行對話的是 JavaScript 技術。這不是一般的應用程式流,這恰恰是 Ajax 的強大功能的來源。
在一般的 Web 應用程式中,使用者填寫表單文字欄位並點選 Submit 按鈕。然後整個表單傳送到伺服器,伺服器將它轉傳給處理表單的腳本(通常是 PHP 或 Java,也可能是 CGI 程式或者類似的東西),腳本執行完成後再傳送回全新的頁面。該頁面可能是帶有已經填寫某些資料的新表單的 HTML,也可能是確認頁面,或者是具有根據原來表單中輸入資料選擇的某些選項的頁面。當然,在伺服器上的腳本或程式處理和返回新表單時使用者必須等待。螢幕變成一片空白,等到伺服器傳回資料後再重新繪製。這就是互動性差的原因,用戶得不到立即回饋,因此感覺不同於視窗應用程式。
Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 物件放在 Web 表單和伺服器之間。當使用者填寫表單時,資料發送給一些 JavaScript 程式碼而不是 直接傳送給伺服器。相反,JavaScript 程式碼接獲表單數據並向伺服器發送請求。同時使用者螢幕上的表單也不會閃爍、消失或延遲。換句話說,JavaScript 程式碼在幕後傳送請求,使用者甚至不知道請求的發出。更好的是,請求是非同步傳送的,就是說 JavaScript 程式碼(和使用者)不用等待伺服器的回應。因此使用者可以繼續輸入資料、拉動螢幕和使用應用程式。
然後,伺服器將資料傳回 JavaScript 程式碼(仍然在 Web 表單中),後者決定如何處理這些資料。它可以迅速更新表單數據,讓人感覺應用程式是立即完成的,表單沒有提交或更新而使用者得到了新資料。JavaScript 程式碼甚至可以對收到的資料執行某種計算,再發送另一個請求,完全不需要用戶干預!這就是 XMLHttpRequest 的強大之處。它可以根據需要自行與伺服器進行互動,使用者甚至可以完全不知道幕後發生的一切。結果就是類似於桌面應用程式的動態、快速回應、高交互性的體驗,但是背後又擁有網際網路的完全強大力量。
加入一些 JavaScript
得到 XMLHttpRequest 的控制碼後,其他的 JavaScript 程式碼就非常簡單了。事實上,我們將使用 JavaScript 程式碼完成非常基本的任務:
取得表單數據:JavaScript 程式碼很容易從 HTML 表單中取得資料並傳送到伺服器。
修改表單上的資料:更新表單也很簡單,從設置欄位值到迅速替換圖像。
解析 HTML 和 XML:使用 JavaScript 程式碼操縱 DOM(請參閱 下一節),處理 HTML 表單伺服器傳回的 XML 資料的結構。
對於前兩點,需要非常熟悉 getElementById() 方法,如下所示。
用 JavaScript 程式碼獲取和設置欄位值
// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];
這裏沒有特別需要注意的地方,真是好極了!您應該認識到這裏並沒有非常複雜的東西。只要掌握了 XMLHttpRequest,Ajax 應用程式的其他部分就是如 清單 2 所示的簡單 JavaScript 程式碼了,混合有少量的 HTML。同時,還要用一點 DOM,我們就來看看吧。
以 DOM 結束
最後還有 DOM,即文件物件模型。可能對有些讀者來說 DOM 有點令人生畏,HTML 設計者很少使用它,即使 JavaScript 程式設計師也不大用到它,除非要完成某項高層程式設計任務。大量使用 DOM 的是 複雜的 Java 和 C/C++ 程式,這可能就是 DOM 被認為難以學習的原因。
幸運的是,在 JavaScript 技術中使用 DOM 很容易,也非常直接。現在,按照常規也許應該說明如何使用 DOM,或者至少要給一些範例程式碼,但這樣做也可能誤導您。即使不理會 DOM,仍然能深入地探討 Ajax,這也是我準備採用的方法。以後的文章將再次討論 DOM,現在只要知道可能需要 DOM 就可以了。當需要在 JavaScript 程式碼和伺服器之間傳遞 XML 和改變 HTML 表單的時候,我們再深入研究 DOM。沒有它也能做一些有趣的工作,因此現在就把 DOM 放到一邊吧。
獲取 Request 對象
有了上面的基本知識後,我們來看看一些具體的例子。XMLHttpRequest 是 Ajax 應用程式的核心,而且對很多讀者來說可能還比較陌生,我們就從這裏開始吧。從 清單 1 可以看出,建立和使用這個物件非常簡單,不是嗎?等一等。
還記得幾年前的那些討厭的瀏覽器戰爭嗎?沒有一樣東西在不同的瀏覽器上得到同樣的結果。不管您是否相信,這些戰爭仍然在繼續,雖然規模較小。但令人奇怪的是,XMLHttpRequest 成了這場戰爭的犧牲品之一。因此獲得 XMLHttpRequest 物件可能需要採用不同的方法。下面我將詳細地進行解釋。
使用 Microsoft 瀏覽器
Microsoft 瀏覽器 Internet Explorer 使用 MSXML 解析器處理 XML。因此如果設計的 Ajax 應用程式要和 Internet Explorer 打交道,那麼必須用一種特殊的方式建立物件。但並不是這麼簡單。根據 Internet Explorer 中安裝的 JavaScript 技術版本不同,MSXML 實際上有兩種不同的版本,因此必須對這兩種情況分別設計程式碼。請參閱如下程式碼,其中的程式碼在 Microsoft 瀏覽器上建立了一個 XMLHttpRequest。
在 Microsoft 流覽器上創建 XMLHttpRequest 對象
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
您對這些程式碼可能還不完全理解,但沒有關係。當本系列文章結束的時候,將對 JavaScript 程式設計、錯誤處理、條件編譯等有更深的瞭解。現在只要牢牢記住其中的兩行程式碼:
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
和
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");。
這兩行程式碼基本上就是嘗試使用一個版本的 MSXML 建立物件,如果失敗則使用另一個版本建立該物件。如果不成功,則將 xmlHttp 變數設為 false,告訴您的程式碼出現了問題。如果出現這種情況,可能是因為安裝了非 Microsoft 瀏覽器,需要使用不同的程式碼。
處理 Mozilla 和非 Microsoft 瀏覽器
如果選擇的瀏覽器不是 Internet Explorer,或者為非 Microsoft 瀏覽器設計程式碼,就需要使用不同的程式碼。事實上就是 清單 1 所示的一行簡單程式碼:
var xmlHttp = new XMLHttpRequest object;。
這行簡單得多的程式碼在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支援 Ajax 的非 Microsoft 瀏覽器中,建立了 XMLHttpRequest 對象。關鍵是要支援所有瀏覽器。誰願意設計一個只能用於 Internet Explorer 或者非 Microsoft 瀏覽器的應用程式呢?或者更糟,要設計一個應用程式兩次?當然不!因此程式碼要同時支援 Internet Explorer 和非 Microsoft 瀏覽器。這樣的程式碼出現。
以支援多種瀏覽器的方式建立 XMLHttpRequest 物件
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
現在先不管那些注釋的奇怪符號,如 @cc_on,這是特殊的 JavaScript 編譯器命令。這段程式碼的核心分為三步:
- 建立一個變數 xmlHttp 來引用即將建立的 XMLHttpRequest 對象。
- 嘗試在 Microsoft 瀏覽器中建立該對象:
- 嘗試使用 Msxml2.XMLHTTP 對象建立它。
- 如果失敗,再嘗試 Microsoft.XMLHTTP 對象。
- 如果仍然沒有建立 xmlHttp,則以非 Microsoft 的方式建立該物件。
- 最後,xmlHttp 應該引用一個有效的 XMLHttpRequest 物件,無論運行什麼樣的瀏覽器。
關於安全性的一點說明
安全性如何呢?現在瀏覽器允許用戶提高他們的安全等級,關閉 JavaScript 技術,禁用瀏覽器中的任何選項。在這種情況下,程式碼無論如何都不會工作。現在要設計一段強健但不夠完美的程式碼,對於掌握 Ajax 來說就很好了。
Ajax 世界中的請求/回應
現在我們介紹了 Ajax,對 XMLHttpRequest 物件以及如何建立它也有了基本的瞭解。如果閱讀得很仔細,您可能已經知道與伺服器上的 Web 應用程式打交道的是 JavaScript 技術,而不是直接提交給那個應用程式的 HTML 表單。
還缺少什麼呢?到底如何使用 XMLHttpRequest。因為這段程式碼非常重要,您設計的每個 Ajax 應用程式都要以某種形式使用它,先看看 Ajax 的基本請求/回應模型是什麼樣吧。
發出請求
您已經有了一個嶄新的 XMLHttpRequest 物件,現在讓它幹點活兒吧。首先需要一個 Web 頁面能夠引用的 JavaScript 方法(比如當使用者輸入文字或者從功能表中選擇一項時)。接下來就是在所有 Ajax 應用程式中基本都雷同的流程:
- 從 Web 表單中獲取需要的資料。
- 建立要連接的 URL。
- 打開到伺服器的連接。
- 設置伺服器在完成後要執行的函數。
- 發送請求。
如下的範例 Ajax 方法就是按照這個順序組織的:
發出 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
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);// Open a connection to the server
xmlHttp.open("GET", url, true);// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;// Send the request
xmlHttp.send(null);
}
開始的程式碼使用基本 JavaScript 程式碼獲取幾個表單字段的值。然後設置一個 PHP 腳本作為連結的目標。要注意腳本 URL 的指定方式,city 和 state 使用簡單的 GET 參數附加在 URL 之後。然後打開一個連接,這是您第一次看到使用 XMLHttpRequest。其中指定了連接方法(GET)和要連接的 URL。最後一個參數如果設為 true,那麼將請求一個非同步連接。如果使用 false,那麼程式碼發出請求後將等待伺服器返回的回應。如果設為 true,當伺服器在後臺處理請求的時候用戶仍然可以使用表單(甚至引用其他 JavaScript 方法)。xmlHttp 的 onreadystatechange 屬性可以告訴伺服器在執行完成後做什麼。因為程式碼沒有等待伺服器,必須讓伺服器知道怎麼做以便您能作出回應。在這個範例中,如果伺服器處理完了請求,一個特殊的名為 updatePage() 的方法將被觸發。最後,使用值 null 引用 send()。因為已經在請求 URL 中增加了要發送給伺服器的資料(city 和 state),所以請求中不需要傳送任何資料。這樣就發出了請求,伺服器按照您的要求工作。
如果沒有發現任何新鮮的東西,您應該體會到這是多麼簡單明瞭!除了牢牢記住 Ajax 的非同步特性外,這些內容都相當簡單。應該感激 Ajax 使您能夠專心設計漂亮的應用程式和介面,而不用擔心複雜的 HTTP 請求/回應程式碼。
程式碼說明了 Ajax 的易用性。資料是簡單的文字,可以作為請求 URL 的一部分。用 GET 而不是更複雜的 POST 發送請求。沒有 XML 和要增加的內容頭部,請求中沒有要傳送的資料。您將看到如何發送 POST 請求、如何設置請求頭部和內容類型、如何在訊息中設計 XML、如何增加請求的安全性,可以做的工作還有很多!暫時先不用管那些困難點,掌握好基本的東西就行了,很快我們就會建立一整套的 Ajax 工具庫。
處理回應
現在要面對伺服器的回應了。現在只要知道兩點:
什麼也不要做,直到 xmlHttp.readyState 屬性的值等於 4。
伺服器將把回應填寫到 xmlHttp.responseText 屬性中。
第一點,即就緒狀態。現在只要檢查一個特定的值(4)就可以了。
第二點,使用 xmlHttp.responseText 屬性獲得伺服器的回應。
處理伺服器回應
function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
它等待伺服器調用,如果是就緒狀態,則使用伺服器返回的值(這裏是使用者輸入的城市和州的 ZIP 代碼)設置另一個表單字段的值。於是包含 ZIP 代碼的 zipCode 欄位突然出現了,而使用者沒有按任何按鈕!這就是前面所說的視窗應用程式的感覺。快速回應、動態感受等等,這些都只因為有了小小的一段 Ajax 程式碼。
細心的讀者可能注意到 zipCode 是一個普通的文字欄位。一旦伺服器傳回 ZIP 代碼,updatePage() 方法就用城市/州的 ZIP 代碼設置那個欄位的值,用戶就可以改寫該值。這樣做有兩個原因:保持例子簡單,說明有時候可能希望 用戶能夠修改伺服器返回的資料。要記住這兩點,它們對於好的用戶介面設計來說很重要。
連接 Web 表單
還有什麼呢?實際上沒有多少了。一個 JavaScript 方法獲取用戶輸入表單的資訊並將其發送到伺服器,另一個 JavaScript 方法監聽和處理回應,並在回應傳回時設置欄位的值。所有這些實際上都依賴於引用 第一個 JavaScript 方法,它啟動了整個過程。最明顯的辦法是在 HTML 表單中增加一個按鈕,但這是 2001 年的辦法,您不這樣認為嗎?還是像 清單 7 這樣利用 JavaScript 技術吧。
啟動一個 Ajax 過程
<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
一段相當普通的程式碼。當用戶在 city 或 state 欄位中輸入新的值時,callServer() 方法就被觸發,於是 Ajax 開始執行了。
結束語
現在您可能已經準備開始設計第一個 Ajax 應用程式,但首先從這些應用程式如何工作的基本概念開始,對 XMLHttpRequest 物件有基本的瞭解,掌握這個物件,學會如何處理 JavaScript 和伺服器的通訊、如何使用 HTML 表單以及如何獲得 DOM 控制碼。
現在先花點時間考慮 Ajax 應用程式有多麼強大。設想一下,當點選按鈕、輸入一個欄位、從下拉式選單中選擇一個功能或者用滑鼠在螢幕上拖動時,Web 表單能夠立刻作出回應會是什麼情形。想一想非同步究竟意味著什麼,想一想 JavaScript 程式碼執行而且不等待伺服器對它的請求作出回應。會遇到什麼樣的問題?會進入什麼樣的領域?考慮到這種新的方法,程式設計的時候應如何改變表單的設計?
如果在這些問題上花一點時間,與簡單地剪下/貼上某些程式碼到您根本不理解的應用程式中相比,收益會更多。將把這些概念付諸實踐,使應用程式按照這種方式工作所需要的程式碼。因此,現在先享受一下 Ajax 所帶來的可能性吧。