如何使用Ajax技術(shù)開發(fā)Web應(yīng)用程序(1)

2024-09-01 08:15:06

字體：大中小

供稿：網(wǎng)友

　　作者：Jonathan Fenocchi
　　時間：2005.10.25
　　譯者：Sheneyan
　　英文原文：
http://webreference.com/programming/javascript/jf/column12/index.html

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

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

<?xml version="1.0" encoding="UTF-8"?> <root> <data> 這是一些示例數(shù)據(jù)，它被保存在一個XML文件中，并被javascript取回。 </data> </root>

　　現(xiàn)在讓我們創(chuàng)建一個簡單的web頁面包含一些示例數(shù)據(jù)。這個頁面將是我們的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開發(fā)web應(yīng)用程序 - 示例</title>
</head>
<body>
    <h1>使用ajax開發(fā)web應(yīng)用程序</h1>
    <p>這個頁面演示了AJAX技術(shù)如何通過動態(tài)讀取一個遠程文件來更新一個網(wǎng)頁的內(nèi)容－－不需要任何網(wǎng)頁的重新加載。注意：這個例子對于禁止js的用戶來說沒有效果。</p>
    <p id="xmlObj">
    這是一些示例數(shù)據(jù)，它是這個網(wǎng)頁的默認數(shù)據(jù) <a href="data.xml"
    title="查看這個XML數(shù)據(jù)." onclick="ajaxRead('data.xml'); this.style.display='none'; return false">查看XML數(shù)據(jù).</a>
    </p>
</body>
</html>

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