如何使用Ajax技術開發Web應用程序(1)

2024-09-01 08:15:06

字體：大中小

來源：轉載

供稿：網友

　　作者：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數據." 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標簽里：