利用AJAX技術開發應用程式實戰

ajax|程式
　　AJAX，一個非同步JavaScript和XML的縮減詞，是當今快速發展的Web開發界十分熱門的技術。在這項新技術提供巨大能力的同時，它也燃發了在"Back"按鈕問題上的不容置疑的爭論。本文作者將向你解釋怎樣在真實世界中使用AJAX以及怎樣在一個工程中評估它的價值。 在你讀完本文後，你就會明白什麼是AJAX，在什麼情況下，為什麼以及怎樣使用這項技術。

　　 一、 簡介

　　AJAX，一個非同步JavaScript和XML的縮減詞，是最近出來的技術詞語。非同步意味著你可以經由超文字傳輸通訊協定 (HTTP)(HTTP)向一個伺服器發出請求並且在等待該響應時繼續處理另外的資料。這就意味著，例如，你可以調用一個伺服器端指令碼來從一個資料庫中以XML方式檢索資料，把資料發送到儲存在一個資料庫的伺服器指令碼，或者簡單地裝載一個XML檔案以填充你的Web網站而不需重新整理該頁面。然而，在這項新技術提供巨大能力的同時，它也引起了在"Back"按鈕問題上的很多爭論。本文將協助你確定在真實世界中何時使用AJAX是最佳選擇。

　　首先，我假定你對縮減詞JavaScript和XML部分有一個基本瞭解。儘管你能通過AJAX請求任何類型的文字檔，但是我在此主要集中討論XML。我將解釋怎樣在真實世界中使用AJAX以及怎樣在一個工程中評估它的價值。在你讀完本文後，你將會明白什麼是AJAX，在什麼情況下，為什麼以及怎樣使用這項技術。你將要學習，在保持給使用者提供直觀體驗的同時怎樣建立對象，發出請求以及定製響應。

　　我已建立了一個適合於本文的樣本工程(你可以下載原始碼)。這個樣本實現了一個簡單的請求-它裝載一個包含頁面內容的XML檔案並且分析資料以把它顯示在一個HTML頁面中。

　　 二、 常規屬性和方法

　　表1和2提供了一個屬性和方法的概述-它們為Windows Internet Explorer 5，Mozilla，Netscape 7，Safari 1.2，和Opera等瀏覽器所支援。

　　表1屬性

屬性	描述
onreadystatechange	當請求對象變化時該事件處理器啟用。
readyState	返回指示對象的目前狀態的值。
responseText	來自伺服器的響應串的版本。
responseXML	來自伺服器的響應的DOM相容的文檔對象。
status	來自伺服器的響應的狀態代碼。
statusText	以一個字串形式返回的狀態訊息。

　　表2方法

方法	描述
Abort()	取消當前HTTP請求。
getAllResponseHeaders()	檢索所有的HTTP頭值。
getResponseHeader("headerLabel")	從響應體中檢索一個HTTP頭部的值。
open("method","URL"[,asyncFlag[,"userName"[,"password"]]])	初始化一個MSXML2.XMLHTTP請求，並從該請求指定方法，URL和認證資訊。
send(content)	發送一個HTTP請求到伺服器並接收響應。
setRequestHeader("label", "value")	指定一個HTTP頭的名字。

　　 三、 從哪裡開始

　　首先，你需要建立XML檔案-後面我們對之進行請求並作為頁面內容進行分析。你正在請求的檔案必須與目標工程駐留在相同的伺服器上。

　　下一步，建立發出請求的HTML檔案。當頁面通過使用頁面主體中的onload方法進行載入時，該請求發生。接著，該檔案需要一個有ID的div標籤，這樣當我們準備好要顯示內容時就可以對之進行定位。當你做完所有這些，你的頁面的主體看上去如下：

＜body ＞ ＜div id="copy"＞＜/div＞ ＜/body＞

　　 四、 建立請求對象

　　為了建立請求對象，你必須檢查是否瀏覽器使用XMLHttpRequest或ActiveXObject。這兩個對象之間的主要區別在於使用它們的瀏覽器。Windows IE 5 及以上版本使用ActiveX對象；而Mozilla，Netscape 7，Opera和Safari 1.2及以上版本使用XMLHttpRequest對象。另外一個區別是你建立對象的方式：Opera，Mozilla，Netscape和Safari允許你簡單地調用該對象的構造器，但是Windows IE需要把對象的名字傳遞到ActiveX構造器中。下面是怎樣建立代碼來決定要使用哪個對象和怎樣建立它的樣本：

if(window.XMLHttpRequest) { request = new XMLHttpRequest();} else if(window.ActiveXObject) { request = new ActiveXObject("MSXML2.XMLHTTP");}

[1] [2]  下一頁