ajax|web|程式
作者: Jonathan Fenocchi
時間:2005.10.25
譯者:Sheneyan
英文原文:
http://webreference.com/programming/javascript/jf/column12/index.html
在過去,由於為了獲得新資料而不得不重新載入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資料." >查看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>
(Sheneyan註:完整程式碼範例見 example.html ML檔案見:data.xml )
[1] [2] 下一頁