轉(zhuǎn)帖|其它|編輯:郝浩|2009-02-20 09:37:48.000|閱讀 840 次
概述:ajax程序的簡單示例!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
ajax介紹:
1:AJAX全稱為Asynchronous JavaScript and XML(異步JavaScript和XML),指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
2:基于web標(biāo)準(zhǔn)XHTML+CSS的表示;
3:使用 DOM進行動態(tài)顯示及交互;
4:使用 XML 和 XSLT 進行數(shù)據(jù)交換及相關(guān)操作;
5:使用 XMLHttpRequest 進行異步數(shù)據(jù)查詢、檢索;
程序員應(yīng)用ajax的途經(jīng):
1:.Net下的AjaxPro,引入AjaxPro.2.dll,在前臺頁面JS調(diào)用后臺頁面的方法;
2:微軟的AJAX組件,添加AjaxControlToolkit.dll,或者是ASP.NET AJAX;
3:開源的ajax框架。
4:自己寫ajax腳本。
不過覺的前三種無論是哪一種,都覺的有點復(fù)雜,雖然它們?nèi)绱藦姶?能做出很多特別優(yōu)秀的無刷新效果,但開發(fā)人員都必須依賴它,開必人員只要學(xué)習(xí)怎么調(diào)用它就行,至于其中的原理大可忽略,即使你想學(xué)習(xí)它的原理,沒有相當(dāng)?shù)膉s水平,怕是徒勞無功。如果需求并沒有這么高,只是簡單的通過無刷新實現(xiàn)訪問后臺代碼然后操作DOM對象呢,還有必要引入這種大家伙嗎?個人認(rèn)識沒有必要,理由如下:
1:有種殺雞用牛刀的感覺;
2:引入第三方框架會使已有應(yīng)用程序更加復(fù)雜;
3:js框架都不小,在每個網(wǎng)頁中引入這些js文件對網(wǎng)絡(luò)傳輸肯定會有部分影響。
4:如果框架中沒有提供你要的功能,那又如何? 如何實現(xiàn)個性化定制?
ajax雖然流行了好幾年了,但本人07年初才用上,當(dāng)時公司同事有用ajaxPro的,但用過了實在了感覺不好用,有時往往會出現(xiàn)些莫名其妙的問題。后來在書店發(fā)現(xiàn)在《征服ajax系列》,才發(fā)現(xiàn)實現(xiàn)簡單的ajax程序其實并不難,一個ajax程序處理過程如下:
第一:創(chuàng)建XMLHttpRequest,不同的瀏覽器創(chuàng)建的方式不同;
第二:發(fā)送請求。調(diào)用XMLHttpRequest的open()和send()方法:
1:xmlhttp_request.open('GET', URL, true);
第一個參數(shù):HTTP請求方式—GET,POST;
第二個參數(shù):請求頁面的URL;
第三個參數(shù):請求是否為異步模式。如果是TRUE,JavaScript函數(shù)將繼續(xù)執(zhí)行,而不等待服務(wù)器響應(yīng)。
2:xmlhttp_request.send(null);
第三:服務(wù)器的響應(yīng)。
1:告訴HTTP請求對象用哪一個函數(shù)處理這個響應(yīng)。對象的onreadystatechange屬性設(shè)置為要使用的JavaScript的函數(shù)名:xmlhttp_request.onreadystatechange =FunctionName;FunctionName是用JS創(chuàng)建的函數(shù)名,也可直接將JS代碼創(chuàng)建在onreadystatechange之后,例如:
2:檢查請求的狀態(tài)。XMLHttpRequest 提供了readyState屬性來對服務(wù)器響應(yīng)進行判斷。readyState的取值如下:0 (未初始化);1 (正在裝載);2 (裝載完畢);3 (交互中);4 (完成)。所以只有當(dāng)readyState=4時,函數(shù)才可以處理該響應(yīng)。具體代碼如下:接著,函數(shù)會檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值。當(dāng)HTTP服務(wù)器響應(yīng)的值為200時,表示狀態(tài)正常。
第四:處理從服務(wù)器得到的數(shù)據(jù)。有兩種方式可以得到這些數(shù)據(jù):
1: 以文本字符串的方式返回服務(wù)器的響應(yīng);
2: 以XMLDocument對象方式返回響應(yīng)
具體案例:我們有一批禮品想要送給用戶,一般都會以文字列表的形式列出來,禮品名稱上給個鏈接,當(dāng)用戶點擊鏈接時彈出一個窗口顯示這個禮品的詳細(xì)描述信息,當(dāng)用戶選中下拉框按鈕時判斷這個禮品在送給用戶前需要不需要用戶填寫地址,如果要則動態(tài)在頁面加載相應(yīng)的輸入框。下面是兩張效果圖,一張時無需用戶錄入聯(lián)系地址的,一張需要。
第一:引用封裝好的XmlHttp.js,這個包含了創(chuàng)建XMLHttpRequest對象,以及發(fā)送請求與加載回調(diào)方法的函數(shù),前端開發(fā)人員只需要傳遞簡單的幾個參數(shù)就可以實現(xiàn)異步調(diào)用,代碼如下:
//------------------------------------------------------------------------------------------
//封裝XMLHTTP的Request類的代碼
var Request = new Object();
//定義一個XMLHTTP的數(shù)組
Request.reqList = [];
//創(chuàng)建一個XMLHTTP對象,兼容不同的瀏覽器
function getAjax()
{
var ajax=false;
try
{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!='undefined')
{
ajax = new XMLHttpRequest();
}
return ajax;
}
//封裝XMLHTTP向服務(wù)器發(fā)送請求的操作
//url:向服務(wù)器請求的路徑;method:請求的方法,即是GET還是POST;callback:當(dāng)服務(wù)器成功返回結(jié)果時,調(diào)用的函數(shù)
//data:向服務(wù)器請求時附帶的數(shù)據(jù);urlencoded:url是否編碼;callback2;當(dāng)服務(wù)器返回錯誤時調(diào)用的函數(shù)
Request.send = function(url, method, callback, data, urlencoded, callback2)
{
var req=getAjax(); //得到一個XMLHTTP的實例
//當(dāng)XMLHTTP的請求狀態(tài)發(fā)生改變時調(diào)用
req.onreadystatechange = function()
{
// 當(dāng)請求已經(jīng)加載
if (req.readyState == 4)
{
// 當(dāng)請求返回成功
if (req.status < 400)
{
// 當(dāng)定義了成功回調(diào)函數(shù)時,執(zhí)行成功回調(diào)函數(shù)
if(callback)
callback(req,data);
}
// 當(dāng)請求返回錯誤
else
{
//當(dāng)定義了失敗回調(diào)函數(shù)時,執(zhí)行失敗回調(diào)函數(shù)
if (callback2)
callback2(req,data);
}
//刪除XMLHTTP,釋放資源
try {
delete req;
req = null;
} catch (e) {}
}
}
//如果以POST方式回發(fā)服務(wù)器
if (method=="POST")
{
req.open("POST", url, true);
//請求需要編碼
if (urlencoded)
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(data);
Request.reqList.push(req);
}
//以GET方式請求
else
{
req.open("GET", url, true);
req.send(null);
Request.reqList.push(req);
}
return req;
}
//全部清除XMLHTTP數(shù)組元素,釋放資源
Request.clearReqList = function()
{
var ln = Request.reqList.length;
for (var i=0; i<ln; i++) {
var req = Request.reqList[i];
if (req)
{
try
{
delete req;
} catch(e) {}
}
}
Request.reqList = [];
}
//進一步封裝XMLHTTP以POST方式發(fā)送請求時的代碼
//clear:是否清除XMLHTTP數(shù)組的所有元素;其他參數(shù)的意義參見Request.send
Request.sendPOST = function(url, data, callback, clear, callback2)
{
if (clear)
Request.clearReqList();
Request.send(url, "POST", callback, data, true, callback2);
}
//進一步封裝XMLHTTP以GET方式發(fā)送請求時的代碼
Request.sendGET = function(url,args, callback,clear, callback2)
{
if (clear)
Request.clearReqList();
return Request.send(url, "GET", callback, args, false, callback2);
}[SPAN]第二:引用一個工具js:CommJM.js,一般是為了代碼共享而引入的。
第三:創(chuàng)建ajax請求頁面:ajax_promotion.aspx,把這個頁面的HTML代碼除了<%@ Page Language="C#"這行之外,全部刪除。
第四:在ajax_promotion.aspx頁面的后臺代碼中寫相關(guān)業(yè)務(wù)操作。
第四:在前端頁面中實現(xiàn)異步調(diào)用。
第一:頁面頭部代碼。
第二:頁面代碼:
總結(jié):從整個過程來看,對于開發(fā)員來說代碼量并不大,如果有了上面兩個封裝好的js文件,以后的開必就輕松多了,只關(guān)心復(fù)雜業(yè)務(wù)邏輯的處理以及頁面效果,頁面效果倒是需要額外的工作,最好具備一定的js能力。我們可以從其它js框架了抽取自己需要的部分放入自己的公用類庫中,這樣就形式了一套適合自己的js框架,方便又實用。
補充:這篇文章并不在于技術(shù)有多深,而在于一種工作模式,做適合自己項目的框架,遠(yuǎn)比用些看起來功能特別強大的框架來的方便。據(jù)園友的問題我想說明幾點:
1:從性能上來講,有的框架十來個js文件,而且還是壓縮的,在網(wǎng)絡(luò)傳輸時會有一定影響;
2:具體項目能調(diào)用的功能占整個框架功能的百分比。如果只是整個框架功能的10%,或者更少,引入框架值得嗎?
3:自己開發(fā)腳本庫時間長了,不也成了一個框架了嗎?和其它的框架有什么區(qū)別呢?
第一:當(dāng)然會成為一個框架;
第二:自己寫的框架怎么會和別人寫的框架一樣呢?
<1>:自己的框架是自己根據(jù)具體項目具體需求來寫的,很多框架中不實用的功能并不會引進來;
<2>:在調(diào)試上,自己的框架當(dāng)然占優(yōu)勢,自己寫的東西肯定能第一時間知道問題的出處。
4:自己開發(fā)框架,時間長了不也鍛煉了自己的js能力嗎?
5:本文并不是排斥框架,也不是說在項目中不能用框架,而是希望從實際項目考慮,全面比較框架在項目中優(yōu)劣性。
6:不要過分依賴框架,試想下在沒有框架前,你的工作怎么辦?用框架永遠(yuǎn)在別人之后。
7:ajax框架支持很多特別復(fù)雜的動畫效果,這是手工完成難度特別大的地方,而且框架對程序員要求相對要抵,而且容易形成統(tǒng)一的代碼風(fēng)格,理性分析利弊再決定是否用框架。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:博客園