在過去，由於為了獲得新資料而不得不重新載入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 version="1.0" encoding="UTF-8"?> <root> <data> 這是一些樣本資料，它被儲存在一個XML檔案中，並被JavaScript取回。 </data> </root>
現在讓我們建立一個簡單的web頁麵包含一些樣本資料。這個頁面將是我們的js指令碼所在，並且這個頁面將會讓使用者們訪問柄看到Ajax指令碼的運行。我們把它命名為ajax.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>使用ajax開發web應用程式 - 樣本</title>
</head>
<body>
<h1>使用ajax開發web應用程式</h1>
<p>這個頁面示範了AJAX技術如何通過動態讀取一個遠程檔案來更新一個網頁的內容－－不需要任何網頁的重新載入。注意：這個例子對于禁止js的使用者來說沒有效果。</p>
<p id="xmlObj">
這是一些樣本資料，它是這個網頁的預設資料 <a href="data.xml"
title="查看這個XML資料." onclick="ajaxRead('data.xml'); this.style.display='none'; return false">查看XML資料.</a>
</p>
</body>
</html>
注意，對於那些沒有javascript的使用者，我們直接連結到data.xml檔案。對於那些允許運行javascript的使用者，函數“ajaxRead”將被運行，這個連結被隱藏，並不會被轉向到那個data.xml檔案。函數“ajaxRead”現在還沒定義。所以如果你要檢驗上面的範例程式碼，你會得到一個javascript錯誤。讓我們繼續並定義這個函數（還有其他的），讓你能夠看到ajax是如何工作的，下面的指令碼要放到你的head標籤裡：
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
這堆代碼有點多，讓我們一點點的進行。第一個函數叫做“ajaxRead”－也就是我們在頁面的“查看XML資料”連結中調用的函數，我們定義了一個“xmlObj”變數－這將作為用戶端（使用者正在查看的這個web頁面）以及服務端（web網站本身）之間的中介軟體。我們在一個if/else塊中定義這個對象：
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
