在過去，由于為了獲得新數據而不得不重新加載web頁面（或者加載其他頁面）導致web應用程序發展被限制。雖然有其他方法可用（不加載其他頁面），但是這些技術都沒有被很好地支持而且有bug成災的趨向。在過去的幾個月里，一個過去并不被廣泛支持的技術已經被越來越多的web沖浪者（web surfers??是指瀏覽器還是瀏覽者？）所接受，它給了開發者更多的自由開發先進的web應用程序。這些通過javascript來異步取得xml數據的應用程序，被親切的稱為“Ajax應用程序”（Asynchronous javascript and XML applications）。在這篇文章中，我將會解釋如何通過Ajax來取回一個遠程的XML文件并更新一個web page，并且隨著這個系列的繼續，我將討論更多的方法，使用ajax技術將你的web應用程序提升到一個新的層次.

這第一步就是創建一個帶一些數據的XML文件。我們將這個文件命名為data.xml。它是一個簡單的XML文件，而在一個真實的程序中，它會復雜許多，但對于我們的例子來說，簡單明了是最合適地。

這是一些示例數據，它被保存在一個XML文件中，并被javascript取回。

現在讓我們創建一個簡單的web頁面包含一些示例數據。這個頁面將是我們的js腳本所在，并且這個頁面將會讓用戶們訪問柄看到Ajax腳本的運行。我們把它命名為ajax.html

"http://www.w3.org/TR/html4/strict.dtd">

使用ajax開發web應用程序

這個頁面演示了AJAX技術如何通過動態讀取一個遠程文件來更新一個網頁的內容－－不需要任何網頁的重新加載。注意：這個例子對于禁止js的用戶來說沒有效果。

這是一些示例數據，它是這個網頁的默認數據 title="查看這個XML數據." onclick="ajaxRead('data.xml'); this.style.display='none'; return false">查看XML數據.

注意，對于那些沒有javascript的用戶，我們直接鏈接到data.xml文件。對于那些允許運行javascript的用戶，函數“ajaxRead”將被運行，這個鏈接被隱藏，并不會被轉向到那個data.xml文件。函數“ajaxRead”現在還沒定義。所以如果你要檢驗上面的示例代碼，你會得到一個javascript錯誤。讓我們繼續并定義這個函數（還有其他的），讓你能夠看到ajax是如何工作的，下面的腳本要放到你的head標簽里：

（Sheneyan注：完整代碼示例見 example.html ML文件見：data.xml ）

這堆代碼有點多，讓我們一點點的進行。第一個函數叫做“ajaxRead”－也就是我們在頁面的“查看XML數據”鏈接中調用的函數，我們定義了一個“xmlObj”變量－這將作為客戶端（用戶正在查看的這個web頁面）以及服務端（web站點本身）之間的中間件。我們在一個if/else塊中定義這個對象：

if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}

這只是一個對不同對象是否可用的測試－某些瀏覽器實現了不同的XMLHttpRequest對象，所以當我們定義“xmlObj”作為我們的XMLHttpRequest對象時，我們不得不根據瀏覽器所實現的來定義它。如果沒有可用的XMLHttpRequest對象，我們將執行“return”語句結束這個函數以避免腳本錯誤。在大部分情況下，這個檢驗將返回一個XMLHttpRequest對象－這部分代碼應該能夠在絕大部分的瀏覽器上工作，除了少部分比較老的瀏覽器的異常情況（它能夠工作在ie5.01上，但是在netscape4上會使函數終止）。

接下來是這些代碼塊:

xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}

每次XMLHttpRequest的狀態發生變化，事件“onreadystatechange”就會被觸發。通過使用“xmlObj.onreadystatechange = function(){...}”我們能夠創建一個函數并讓它在這個XMLHttpRequest對象的狀態每次發生改變的時候立刻運行。這里總共有五個狀態，由0走到4。

0