您好,登錄后才能下訂單哦!
小編給大家分享一下如何使用AJAXRequest進(jìn)行AJAX應(yīng)用程序開發(fā),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
準(zhǔn)備
在使用AJAXRequest進(jìn)行AJAX開發(fā)之前,你需要做以下準(zhǔn)備:
準(zhǔn)備知識(shí):JavaScript基本語法,文檔對(duì)象模型(DOM)的相關(guān)知識(shí),以及至少掌握一種后臺(tái)編程的語言(我寫的例子以ASP為編程語言)。
準(zhǔn)備工具:EditPlus或者其他文本編輯器(Dreamweaver或者Visual Web Developer也可以),以及本地測(cè)試用的Web服務(wù)器(IIS或者Apache或者NetBox或其他都可以)。
下載AJAXRequest類:你可以在http://www.xujiwei.cn/works/ajaxrequest/下載到最新版的AJAXRequest類。
要進(jìn)行AJAX開發(fā),你需要了解JS編程,這是AJAX中J的需要,以及后臺(tái)編程,這是需要在服務(wù)端進(jìn)行動(dòng)態(tài)處理,DOM用來處理信息,將結(jié)果呈現(xiàn)給用戶。而工具方面,文本編輯器可以選擇你自己喜歡的,我比較喜歡用EditPlus。
至于測(cè)試用的Web服務(wù)器,就取決于你所用的后臺(tái)編程語言了,如ASP或ASP.NET是IIS,PHP可以選擇Apache等。運(yùn)行ASP的另外一個(gè)選擇是NetBox,不過NetBox對(duì)UTF-8支持不太好,如果不涉及非英文的輸出,可以考慮選擇這個(gè)輕量級(jí)的服務(wù)器軟件。
至于為什么要在本地建立測(cè)試服務(wù)器而不是直接在瀏覽器中運(yùn)行,是因?yàn)閺囊婚_始就在與服務(wù)器相近的環(huán)境中開發(fā),可以在以后的開發(fā)過程中減少許多莫名的錯(cuò)誤。
開始
在之后教程的例子中,我都將以JS代碼與XHTML代碼分開的方式來書寫,其中AJAXRequest類文件ajaxrequest.js放在例子代碼的同一目錄下。
Hello,World!
按照慣例,以一個(gè)“Hello,World!”來開始。
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類文件 -->
<script type="text/javascript" src="ajaxrequest.js"></script>
<!-- 包含頁面需要的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è)陧撁嫔戏胖昧艘粋€(gè)button,用于觸發(fā)showHello函數(shù),顯示從服務(wù)端獲取的信息。
helloworld.js
程序代碼:
復(fù)制代碼 代碼如下:
// 創(chuàng)建AJAXRequest對(duì)象,以全局變量的方式來保存這個(gè)對(duì)象,這樣在整個(gè)頁面應(yīng)用程序中就只需要?jiǎng)?chuàng)建一次AJAXRequest類對(duì)象,而不用重復(fù)創(chuàng)建。
var ajax=new AJAXRequest();
/////////////////////////////////////////
// showHello
// 描述:向服務(wù)端發(fā)送請(qǐng)求并顯示返回信息
// 參數(shù):無
// 返回:無
/////////////////////////////////////////
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ù)端返回信息
// 返回:無
/////////////////////////////////////////
function mycallback(obj) {
// 用alert來顯示服務(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類實(shí)例,只需要直接使用ajax就行了。因?yàn)锳JAXRequest類中具有連接池的特性,因此不會(huì)出現(xiàn)在網(wǎng)絡(luò)延遲較大時(shí)后來的請(qǐng)求覆蓋前面的請(qǐng)求的情況。
helloworld.txt
程序代碼:
Hello,World!
helloworld.txt為客戶端需要的內(nèi)容,歡迎信息“Hello,World!”。
以上是“如何使用AJAXRequest進(jìn)行AJAX應(yīng)用程序開發(fā)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。