當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

写一个ajax程序就是如此简单

發布時間：2025/3/14 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了写一个ajax程序就是如此简单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

????? ajax介紹:

????????? 1:AJAX全稱為Asynchronous JavaScript and XML（異步JavaScript和XML），指一種創建交互式網頁應用的網頁開發技術。

　　??? 2:基于web標準XHTML+CSS的表示；

　　??? 3:使用 DOM進行動態顯示及交互；

　　??? 4:使用 XML 和 XSLT 進行數據交換及相關操作；

　　??? 5:使用 XMLHttpRequest 進行異步數據查詢、檢索；

???? 程序員應用ajax的途經:

????????? 1：.Net下的AjaxPro，引入AjaxPro.2.dll，在前臺頁面JS調用后臺頁面的方法；

????????? 2：微軟的AJAX組件，添加AjaxControlToolkit.dll，或者是ASP.NET AJAX；

????????? 3：開源的ajax框架。

? ? ? ? ? 4：自己寫ajax腳本。

???? 不過覺的前三種無論是哪一種,都覺的有點復雜,雖然它們如此強大,能做出很多特別優秀的無刷新效果，但開發人員都必須依賴它，開必人員只要學習怎么調用它就行，至于其中的原理大可忽略，即使你想學習它的原理，沒有相當的js水平，怕是徒勞無功。如果需求并沒有這么高，只是簡單的通過無刷新實現訪問后臺代碼然后操作DOM對象呢，還有必要引入這種大家伙嗎？個人認識沒有必要，理由如下：

????????? 1：有種殺雞用牛刀的感覺；

????????? 2：引入第三方框架會使已有應用程序更加復雜；

????????? 3：js框架都不小，在每個網頁中引入這些js文件對網絡傳輸肯定會有部分影響。

????????? 4：如果框架中沒有提供你要的功能，那又如何??如何實現個性化定制？

????? ajax雖然流行了好幾年了，但本人07年初才用上，當時公司同事有用ajaxPro的，但用過了實在了感覺不好用，有時往往會出現些莫名其妙的問題。后來在書店發現在《征服ajax系列》，才發現實現簡單的ajax程序其實并不難，一個ajax程序處理過程如下：

????? 第一：創建XMLHttpRequest，不同的瀏覽器創建的方式不同；

????? 第二：發送請求。調用XMLHttpRequest的open()和send()方法：

　　??????? 1：xmlhttp_request.open('GET', URL, true);

? ? ? ? ? ? ? ? ? 第一個參數：HTTP請求方式—GET，POST；

　　??????????? 第二個參數：請求頁面的URL；

　　??????????? 第三個參數：請求是否為異步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待服務器響應。

　　??????? 2：xmlhttp_request.send(null);

?????? 第三：服務器的響應。

??????????????? 1：告訴HTTP請求對象用哪一個函數處理這個響應。對象的onreadystatechange屬性設置為要使用的JavaScript的函數名：xmlhttp_request.onreadystatechange =FunctionName;FunctionName是用JS創建的函數名，也可直接將JS代碼創建在onreadystatechange之后，例如：

xmlhttp_request.onreadystatechange?=?function()
{
//?JavaScript代碼段
};

??????????? ?? 2：檢查請求的狀態。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。readyState的取值如下：0 (未初始化)；1 (正在裝載)；2 (裝載完畢)；3 (交互中)；4 (完成)。所以只有當readyState=4時，函數才可以處理該響應。具體代碼如下：接著，函數會檢查HTTP服務器響應的狀態值。當HTTP服務器響應的值為200時，表示狀態正常。　

if?(http_request.readyState?==?4)?
{?//?收到完整的服務器響應?}
else?{?//?沒有收到完整的服務器響應?}

????? 第四：處理從服務器得到的數據。有兩種方式可以得到這些數據：

　　?????? 1：以文本字符串的方式返回服務器的響應；

???? ?????? 2：以XMLDocument對象方式返回響應

????? 具體案例：我們有一批禮品想要送給用戶，一般都會以文字列表的形式列出來，禮品名稱上給個鏈接，當用戶點擊鏈接時彈出一個窗口顯示這個禮品的詳細描述信息，當用戶選中下拉框按鈕時判斷這個禮品在送給用戶前需要不需要用戶填寫地址，如果要則動態在頁面加載相應的輸入框。下面是兩張效果圖，一張時無需用戶錄入聯系地址的，一張需要。

????? 第一：引用封裝好的XmlHttp.js,這個包含了創建XMLHttpRequest對象，以及發送請求與加載回調方法的函數，前端開發人員只需要傳遞簡單的幾個參數就可以實現異步調用，代碼如下：

//------------------------------------------------------------------------------------------

//封裝XMLHTTP的Request類的代碼
var?Request?=?new?Object();
//定義一個XMLHTTP的數組

Request.reqList?=?[];
//創建一個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向服務器發送請求的操作
//url:向服務器請求的路徑；method：請求的方法，即是GET還是POST；callback：當服務器成功返回結果時，調用的函數
//data：向服務器請求時附帶的數據；urlencoded：url是否編碼；callback2;當服務器返回錯誤時調用的函數
Request.send?=?function(url,?method,?callback,?data,?urlencoded,?callback2)
?{
????var?req=getAjax();??//得到一個XMLHTTP的實例

????//當XMLHTTP的請求狀態發生改變時調用
????req.onreadystatechange?=?function()
????{
????//?當請求已經加載

????if?(req.readyState?==?4)
????{
????????????//?當請求返回成功

????????????if?(req.status?<?400)
????????????{
????????????//?當定義了成功回調函數時，執行成功回調函數
????????????if(callback)
????????????????callback(req,data);
????????????}
????????????//?當請求返回錯誤

????????????else
????????????{
????????????????
????????????????//當定義了失敗回調函數時，執行失敗回調函數
????????????????if?(callback2)
????????????????callback2(req,data);
????????????}
????????????
????????????//刪除XMLHTTP，釋放資源

????????????try?{
????????????????delete?req;
????????????????req?=?null;
????????????}?catch?(e)?{}
????????}
????}
????//如果以POST方式回發服務器

????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數組元素，釋放資源

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方式發送請求時的代碼

//clear：是否清除XMLHTTP數組的所有元素；其他參數的意義參見Request.send
Request.sendPOST?=?function(url,?data,?callback,?clear,?callback2)
{
????if?(clear)
????????Request.clearReqList();
????Request.send(url,?"POST",?callback,?data,?true,?callback2);
}
//進一步封裝XMLHTTP以GET方式發送請求時的代碼

Request.sendGET?=?function(url,args,?callback,clear,?callback2)
{
????if?(clear)
????????Request.clearReqList();
????return?Request.send(url,?"GET",?callback,?args,?false,?callback2);
}

????? 第二：引用一個工具js:CommJM.js，一般是為了代碼共享而引入的。

var?controleID="";
var?innerHtml="";
//給控件賦值
function?$$(controleID?,innerHtml?)
{
??var?_controleID=$(controleID?);
??_controleID?.innerHTML=innerHtml?;

}
//隱藏控件
function?hideObject(controleID)
{
??var?_controleID=$(controleID?);
??_controleID.style.display?=?"none";
?
}
//顯示控件
function?showObject(controleID)
{
??var?_controleID=$(controleID?);
??_controleID.style.display?=?"block";
}
var?controlsID="";
????//by?minjiang?07-11-02
????function?$(controlsID)
????{
??????return?document?.getElementById?(controlsID?);?????
????}

????? 第三：創建ajax請求頁面：ajax_promotion.aspx，把這個頁面的HTML代碼除了<%@ Page Language="C#"這行之外，全部刪除。

????? 第四：在ajax_promotion.aspx頁面的后臺代碼中寫相關業務操作。

//取得獎品ID
????????string?giftID?=?"";
????????//當前促銷活動方案ID
????????string?currentTarget?=?"";
????????xmlProvider?_xmlProvider?=?null;
????????protected?void?Page_Load(object?sender,?EventArgs?e)
????????{
????????????
????????????this.action();?????????
????????}
????????private?void?action()
????????{
????????????//業務處理類型
????????????string?sAction?=?"";
????????????if?(Request.QueryString["action"]?!=?null?&&?Request.QueryString["action"]?!=?"")
????????????{
????????????????sAction?=?Request.QueryString["action"].Trim();
????????????
????????????}
????????????switch?(sAction)
????????????{
????????????????case?"getInput":
????????????????????//判斷用戶選擇的禮品是否需要錄入聯系方式
????????????????????this.getInput();
????????????????????break;
????????????????case?"getDescription":
????????????????????this.getDescription();
???????????????????break;??????????
????????????}???????
????????}
????????///?<summary>
????????///?判斷是否需要錄入聯系方式
????????///?</summary>
????????private?void?getInput()
????????{
???????????????????
????????}
????????///?<summary>
????????///?取某一獎品的詳細說明信息
????????///?</summary>
????????private?void?getDescription()
????????{
?????????????????
????????}

?????? 第四：在前端頁面中實現異步調用。

?????????????? 第一：頁面頭部代碼。

//引入相關js文件
<script?language?="javascript"?type?="text/javascript"?src?="XmlHttp.js"></script>
<script?language?="javascript"?type?="text/javascript"?src?="CommJM.js"?></script>
<script?language?="javascript"?>
//獎品ID
var?giftID=1;
//根據獎品ID讀取獎品的描述信息
function?getDescription(giftID)
{
????var?sUrl="ajax_promotion.aspx?id="+giftID+"&i="+Math.random()+"&action=getDescription";
???Request.sendGET(sUrl,null,getCallBack,true,null);
}
//根據獎品ID讀取獎品的描述信息的回調方法
??function?getCallBack(req,data)
??{
????????//alert("進入回調方法");
?????????var?strResult=req.responseText;
?????????//alert(strResult);
????????if(strResult!="")
????????{
???????????$$("jl01_layer",strResult);
????
????????}??????
??}
??//根據獎品ID取得這獎品是否需要錄入用戶的聯系方式
??function?getInput(giftID)
??{
???????var?sUrl="ajax_promotion.aspx?id="+giftID+"&i="+Math.random()+"&action=getInput";
???????//alert(sUrl);
???????Request.sendGET(sUrl,null,getInputCallBack,true,null);
??}
??//getInput回調方法
??function?getInputCallBack(req,data)
??{
????????//alert("進入回調方法");
?????????var?strResult=req.responseText;
?????????//alert(strResult);
????????if(strResult=="true")
????????{
???????????showObject("<%=?this?.BlkBlackTabcontent_11?.ClientID?%>");
????
????????}
????????else
????????{
????????????hideObject("<%=?this?.BlkBlackTabcontent_11?.ClientID?%>")
????????}
??}
</script>

?????????????? 第二：頁面代碼：

<input?id="ctl08_rbl_Gift_0"?type="radio"?name="ctl08$rbl_Gift"?value="1"?onclick="getInput('1');"?/>
<label?for="ctl08_rbl_Gift_0">
<a?href="#"?onclick="cc(this,'jl01_layer','1')">
?禮品名稱
</a>
</label>

????? 總結：從整個過程來看，對于開發員來說代碼量并不大，如果有了上面兩個封裝好的js文件，以后的開必就輕松多了，只關心復雜業務邏輯的處理以及頁面效果，頁面效果倒是需要額外的工作，最好具備一定的js能力。我們可以從其它js框架了抽取自己需要的部分放入自己的公用類庫中，這樣就形式了一套適合自己的js框架，方便又實用。

????? 補充：這篇文章并不在于技術有多深，而在于一種工作模式，做適合自己項目的框架，遠比用些看起來功能特別強大的框架來的方便。據園友的問題我想說明幾點：

????????????? 1：從性能上來講,有的框架十來個js文件，而且還是壓縮的,在網絡傳輸時會有一定影響；

??????????????2：具體項目能調用的功能占整個框架功能的百分比。如果只是整個框架功能的10%，或者更少,引入框架值得嗎？

????????????? 3：自己開發腳本庫時間長了，不也成了一個框架了嗎？和其它的框架有什么區別呢？

?????????????????? 第一：當然會成為一個框架；

?????????????????? 第二：自己寫的框架怎么會和別人寫的框架一樣呢？

??????????????????????????? <1>:自己的框架是自己根據具體項目具體需求來寫的，很多框架中不實用的功能并不會引進來；

????????????????????????????<2>:在調試上，自己的框架當然占優勢，自己寫的東西肯定能第一時間知道問題的出處。

???????????? 4:自己開發框架，時間長了不也鍛煉了自己的js能力嗎？

???????????? 5：本文并不是排斥框架,也不是說在項目中不能用框架,而是希望從實際項目考慮,全面比較框架在項目中優劣性。

???????????? 6：不要過分依賴框架，試想下在沒有框架前，你的工作怎么辦？用框架永遠在別人之后。

???????????? 7：ajax框架支持很多特別復雜的動畫效果，這是手工完成難度特別大的地方，而且框架對程序員要求相對要抵,而且容易形成統一的代碼風格，理性分析利弊再決定是否用框架。

???????????? 8：自己寫腳本，并不代表每個項目或者是每個頁面都需要自己把所有方法都重寫一次，當然會考慮到代碼復用了，誰會在每個頁面中都寫 documemt.getelememtById啊，你不覺得煩，別人看起來也煩，如果封閉一個$()方法，不更好？而且這種方式都是從框架中學來的，要消化成自己的。

? ? ? ? ? ?? 9：自己寫腳本的目的：吸取多個框架的特點，取長補短，做適合自己的，如果你的項目中對動畫什么的沒有要求，那么就不會引入這些額外的沒用的js，無論怎么寫，肯定不能都自己寫，需要借助已有成熟的產品，但不能拿來主義。

注：

?? 本文引用：http://baike.baidu.com/view/1641.htm

轉載于:https://www.cnblogs.com/ASPNET2008/archive/2009/02/19/1394044.html

總結

以上是生活随笔為你收集整理的写一个ajax程序就是如此简单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。