使用AJAXRequest進(jìn)行AJAX應(yīng)用程序開(kāi)發(fā)(1) - 初識(shí)AJAXRequest
前言
在發(fā)布了AJAXRequest類(lèi)的幾個(gè)版本之后，漸漸地有許多朋友用上了它，也有許多朋友問(wèn)我有沒(méi)有更詳細(xì)的說(shuō)明和示例。不過(guò)因?yàn)闀r(shí)間的問(wèn)題以及我能想到的示例有限，一直沒(méi)有多寫(xiě)幾個(gè)示例。考慮了一下，決定寫(xiě)一個(gè)關(guān)于AJAXRequest的教程，希望對(duì)使用AJAXRequest類(lèi)的朋友們有所幫助。
準(zhǔn)備
在使用AJAXRequest進(jìn)行AJAX開(kāi)發(fā)之前，你需要做以下準(zhǔn)備：
準(zhǔn)備知識(shí)：JavaScript基本語(yǔ)法，文檔對(duì)象模型(DOM)的相關(guān)知識(shí)，以及至少掌握一種后臺(tái)編程的語(yǔ)言（我寫(xiě)的例子以ASP為編程語(yǔ)言）。
準(zhǔn)備工具：EditPlus或者其他文本編輯器（Dreamweaver或者Visual Web Developer也可以），以及本地測(cè)試用的Web服務(wù)器（IIS或者Apache或者NetBox或其他都可以）。
下載AJAXRequest類(lèi)：你可以在http://www.xujiwei.cn/works/ajaxrequest/下載到最新版的AJAXRequest類(lèi)。
要進(jìn)行AJAX開(kāi)發(fā)，你需要了解JS編程，這是AJAX中J的需要，以及后臺(tái)編程，這是需要在服務(wù)端進(jìn)行動(dòng)態(tài)處理，DOM用來(lái)處理信息，將結(jié)果呈現(xiàn)給用戶(hù)。而工具方面，文本編輯器可以選擇你自己喜歡的，我比較喜歡用EditPlus。
至于測(cè)試用的Web服務(wù)器，就取決于你所用的后臺(tái)編程語(yǔ)言了，如ASP或ASP.NET是IIS，PHP可以選擇Apache等。運(yùn)行ASP的另外一個(gè)選擇是NetBox，不過(guò)NetBox對(duì)UTF-8支持不太好，如果不涉及非英文的輸出，可以考慮選擇這個(gè)輕量級(jí)的服務(wù)器軟件。
至于為什么要在本地建立測(cè)試服務(wù)器而不是直接在瀏覽器中運(yùn)行，是因?yàn)閺囊婚_(kāi)始就在與服務(wù)器相近的環(huán)境中開(kāi)發(fā)，可以在以后的開(kāi)發(fā)過(guò)程中減少許多莫名的錯(cuò)誤。
開(kāi)始
在之后教程的例子中，我都將以JS代碼與XHTML代碼分開(kāi)的方式來(lái)書(shū)寫(xiě)，其中AJAXRequest類(lèi)文件ajaxrequest.js放在例子代碼的同一目錄下。
Hello,World!
按照慣例，以一個(gè)“Hello,World!”來(lái)開(kāi)始。
helloworld.htm
程序代碼：
復(fù)制代碼 代碼如下:
!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類(lèi)文件 -->
script type="text/javascript" src="ajaxrequest.js">/script>
!-- 包含頁(yè)面需要的JS代碼 -->
script type="text/javascript" src="helloworld.js">/script>
/head>
body>
!-- 一個(gè)按鈕，單擊調(diào)用函數(shù)showHello，顯示歡迎信息 -->
button onclick="showHello();">顯示Hello,World!/button>
/body>
/html>
在helloworld.htm中，我們?cè)陧?yè)面上放置了一個(gè)button，用于觸發(fā)showHello函數(shù)，顯示從服務(wù)端獲取的信息。
helloworld.js
程序代碼：
復(fù)制代碼 代碼如下:
// 創(chuàng)建AJAXRequest對(duì)象，以全局變量的方式來(lái)保存這個(gè)對(duì)象，這樣在整個(gè)頁(yè)面應(yīng)用程序中就只需要?jiǎng)?chuàng)建一次AJAXRequest類(lèi)對(duì)象，而不用重復(fù)創(chuàng)建。
var ajax=new AJAXRequest();
/////////////////////////////////////////
// showHello
// 描述：向服務(wù)端發(fā)送請(qǐng)求并顯示返回信息
// 參數(shù)：無(wú)
// 返回：無(wú)
/////////////////////////////////////////
function showHello() {
// 使用get方法向服務(wù)端獲取文件helloworld.txt的內(nèi)容，
// 并在函數(shù)mycallback中進(jìn)行處理
ajax.get("helloworld.txt",mycallback);
}
/////////////////////////////////////////
// mycallback
// 描述：向服務(wù)端發(fā)送請(qǐng)求并顯示返回信息
// 參數(shù)：obj - XMLHttpRequest對(duì)象，保存服務(wù)端返回信息
// 返回：無(wú)
/////////////////////////////////////////
function mycallback(obj) {
// 用alert來(lái)顯示服務(wù)端返回的內(nèi)容
// obj.responseText為helloworld.txt的內(nèi)容
alert(obj.responseText);
}
在helloworld.js中，創(chuàng)建了一個(gè)全局變量ajax，用于保存一個(gè)AJAXRequest對(duì)象，如果在有多個(gè)函數(shù)需要用到AJAXRequest時(shí)，就不需要重新創(chuàng)建AJAXRequest類(lèi)實(shí)例，只需要直接使用ajax就行了。因?yàn)锳JAXRequest類(lèi)中具有連接池的特性，因此不會(huì)出現(xiàn)在網(wǎng)絡(luò)延遲較大時(shí)后來(lái)的請(qǐng)求覆蓋前面的請(qǐng)求的情況。
helloworld.txt
程序代碼：
Hello,World!
helloworld.txt為客戶(hù)端需要的內(nèi)容，歡迎信息“Hello,World!”。
小結(jié)
在上面的教程中，我們寫(xiě)了一個(gè)小小的AJAX應(yīng)用程序，用于在客戶(hù)端用AJAXRequest類(lèi)從服務(wù)端獲取一個(gè)文本文件，并將它的內(nèi)容顯示出來(lái)?？梢钥闯鰜?lái)，在上面的程序中，我們只是很簡(jiǎn)單的用了AJAXRequest的get方法，就完成了從服務(wù)器獲取文件內(nèi)容的過(guò)程。
在接下來(lái)的教程中，我們將繼續(xù)學(xué)習(xí)AJAXRequest類(lèi)的使用。
to be continued ...
您可能感興趣的文章:- Node.js配合node-http-proxy解決本地開(kāi)發(fā)ajax跨域問(wèn)題
- Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請(qǐng)求的教程
- node.js+Ajax實(shí)現(xiàn)獲取HTTP服務(wù)器返回?cái)?shù)據(jù)
- node.js chat程序如何實(shí)現(xiàn)Ajax long-polling長(zhǎng)鏈接刷新模式
- javascript ajax類(lèi)AJAXRequest2007-12-31 更新
- Node.js獲取前端ajax提交的request信息
