DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest進行AJAX應用程序開發入門小技巧
ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest進行AJAX應用程序開發入門小技巧
編輯:AJAX基礎知識     
使用AJAXRequest進行AJAX應用程序開發(1) - 初識AJAXRequest
前言
在發布了AJAXRequest類的幾個版本之後,漸漸地有許多朋友用上了它,也有許多朋友問我有沒有更詳細的說明和示例。不過因為時間的問題以及我能想到的示例有限,一直沒有多寫幾個示例。考慮了一下,決定寫一個關於AJAXRequest的教程,希望對使用AJAXRequest類的朋友們有所幫助。

准備

在使用AJAXRequest進行AJAX開發之前,你需要做以下准備:

准備知識:JavaScript基本語法,文檔對象模型(DOM)的相關知識,以及至少掌握一種後台編程的語言(我寫的例子以ASP為編程語言)。

准備工具:EditPlus或者其他文本編輯器(Dreamweaver或者Visual Web Developer也可以),以及本地測試用的Web服務器(IIS或者Apache或者NetBox或其他都可以)。

下載AJAXRequest類:你可以在http://www.xujiwei.cn/works/ajaxrequest/下載到最新版的AJAXRequest類。

要進行AJAX開發,你需要了解JS編程,這是AJAX中J的需要,以及後台編程,這是需要在服務端進行動態處理,DOM用來處理信息,將結果呈現給用戶。而工具方面,文本編輯器可以選擇你自己喜歡的,我比較喜歡用EditPlus。

至於測試用的Web服務器,就取決於你所用的後台編程語言了,如ASP或ASP.NET是IIS,PHP可以選擇Apache等。運行ASP的另外一個選擇是NetBox,不過NetBox對UTF-8支持不太好,如果不涉及非英文的輸出,可以考慮選擇這個輕量級的服務器軟件。

至於為什麼要在本地建立測試服務器而不是直接在浏覽器中運行,是因為從一開始就在與服務器相近的環境中開發,可以在以後的開發過程中減少許多莫名的錯誤。

開始

在之後教程的例子中,我都將以JS代碼與XHTML代碼分開的方式來書寫,其中AJAXRequest類文件ajaxrequest.js放在例子代碼的同一目錄下。

Hello,World!

按照慣例,以一個“Hello,World!”來開始。

helloworld.htm

程序代碼:
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta name="author" content="xujiwei" /> 
    <meta name="copyright" content="www.xujiwei.cn" /> 
    <meta name="description" content="hello,world" /> 
    <title>Hello,World!</title> 
    <!-- 包含AJAXRequest類文件 --> 
    <script type="text/javascript" src="ajaxrequest.js"></script> 
    <!-- 包含頁面需要的JS代碼 --> 
    <script type="text/javascript" src="helloworld.js"></script> 
  </head> 
  <body> 
    <!-- 一個按鈕,單擊調用函數showHello,顯示歡迎信息 --> 
    <button onclick="showHello();">顯示Hello,World!</button> 
  </body> 
</html> 

在helloworld.htm中,我們在頁面上放置了一個button,用於觸發showHello函數,顯示從服務端獲取的信息。

helloworld.js

程序代碼:
復制代碼 代碼如下:
// 創建AJAXRequest對象,以全局變量的方式來保存這個對象,這樣在整個頁面應用程序中就只需要創建一次AJAXRequest類對象,而不用重復創建。 
var ajax=new AJAXRequest(); 
///////////////////////////////////////// 
// showHello 
// 描述:向服務端發送請求並顯示返回信息 
// 參數:無 
// 返回:無 
///////////////////////////////////////// 
function showHello() { 
  // 使用get方法向服務端獲取文件helloworld.txt的內容, 
  // 並在函數mycallback中進行處理 
  ajax.get("helloworld.txt",mycallback); 

///////////////////////////////////////// 
// mycallback 
// 描述:向服務端發送請求並顯示返回信息 
// 參數:obj - XMLHttpRequest對象,保存服務端返回信息 
// 返回:無 
///////////////////////////////////////// 
function mycallback(obj) { 
  // 用alert來顯示服務端返回的內容 
  // obj.responseText為helloworld.txt的內容 
  alert(obj.responseText); 


在helloworld.js中,創建了一個全局變量ajax,用於保存一個AJAXRequest對象,如果在有多個函數需要用到AJAXRequest時,就不需要重新創建AJAXRequest類實例,只需要直接使用ajax就行了。因為AJAXRequest類中具有連接池的特性,因此不會出現在網絡延遲較大時後來的請求覆蓋前面的請求的情況。

helloworld.txt

程序代碼:
Hello,World!

helloworld.txt為客戶端需要的內容,歡迎信息“Hello,World!”。

小結

在上面的教程中,我們寫了一個小小的AJAX應用程序,用於在客戶端用AJAXRequest類從服務端獲取一個文本文件,並將它的內容顯示出來。可以看出來,在上面的程序中,我們只是很簡單的用了AJAXRequest的get方法,就完成了從服務器獲取文件內容的過程。

在接下來的教程中,我們將繼續學習AJAXRequest類的使用。

to be continued ...
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved