AJAX.dll使用教學貼

原創   AJAX.dll使用教學貼 收藏

這篇文章我不會引用網上任何一篇文章的原話,全是自己的感受,相信會幫助不少想知道AJAX是什麼東西和怎麼應用的人,因爲我也是初學者,所以寫的 可能會有不對的,不對的地方希望老程序員們能指出來千萬不要誤人子弟,這也是我寫這篇文章的另一個目的,好開始

注:我是使用 ASP.NET的

AJAX的長篇理論我不想說,什麼全稱,什麼DOM,XMLHTTP什麼的網上資料一大堆自己去查,我們瞭解一下就 行。

[不用AJAX的頁面不叫WEB2.0,是WEB2.0的頁面都會用AJAX的]
使用AJAX的目的沒別的,就是實現無 刷新更新頁面,所謂異步就是不用執行後臺程序,前臺就會得到相應的改變值,從而實現前臺頁面改變數據的目的,而這個改變的值還是通過後CS代碼操作改變 的,聽起來會很不可意,這是怎麼作到的那,聽我慢慢說。

經過我這幾天的研究,在ASP.NET裏實現AJAX的方法可不只一種
1. 有直接用框架的:這種我比較喜歡,因爲比較乾淨,用自己的框架,我試過Ajaxpro和Prototype,這兩種我用過了,覺得不錯,以後我還會繼續 用,Jquery其實也屬於這一範疇,今天研究半天,沒太明白,可能是我沒找到現成的框架吧,所以就不研究了
2.還有一種就是用微軟專門爲 Ajax開發的控件包,叫作ASP.NET AJAX Control Toolkit,這個我沒太研究,網上有相關資料,想知道的可以自己去查,裏面有很多現成的控件可以實現AJAX。
3.用VS2005的可以下 個ASPAJAXExtSetup.msi,裏面有updatepanel控件也可以實現AJAX,這個我只初步試了一下,也好用,不過原理還不太明白。

以上三種是我收集到的一些AJAX的實現方法,我要講的是第一種方法的應用,因爲第一種能叫你明白AJAX的運行原理,比較適合初學 者。
我主要講Ajaxpro,這是個組件,必須去網上下載,其實就是一個Ajaxpro.dll文件,注意,網上有兩種一種叫Ajax.dll 一種叫Ajaxpro.dll,這兩種功能上是一樣的,就是添加引用的語句有些不同,下面我會分別說的。其實用AJAX都要下相關組件的,開始我也不習慣 下什麼插件,可後來還是下了,不下不行呀。我下到的是Ajax.dll,所以講時以Ajax.dll爲準。

應用篇,這以下的東西會借鑑網上其他人的文章,在這裏聲明一下

1. 先把Ajax.dll添加引用到項目中,別告訴我不會,如果連這個也不會就太那個了,和添加其他DLL一樣,在項目上右擊,菜單上有個[添加引用],然後 一步一步把那個.DLL文件添加進來,之後你會在項目的引用中看到那個Ajax.dll就是添加成功了
2.修改Web.config。在 <system.web> 元素中添加以下代碼。這裏的Ajax.dll和Ajaxpro.dll引用方法是不一樣的,一定要注意
<configuration>
<system.web>
<httpHandlers>
<!-- Ajax.dll的配置文件寫法爲,我下載到的是這個 -->
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
<!-- AjaxPro.dll的配置文件寫法爲,根據你下載到的DLL文件選擇不同的配置語句-->
<add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
</system.web>
</configuration>

3對AjaxPro用到的 頁Page_Load事件中進行運行時註冊。如:
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(_Default));// 是Ajax.dll的
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));//Ajaxpro.dll 的
}
//這的_Default是指頁面類的類名,就是這個頁面的名字。如是放在命名空間,則需要寫上完整的命名空間 (如:namespaces._Default)

4創建服務器端方法
[Ajax.AjaxMethod]//這句一定要有, 如果你是Ajaxpro.dll就寫成[AjaxPro.AjaxMethod]
public string getValue(int a,int b)
{
//該方法我們將實現從客戶端傳入兩個數,在服務器端相加計算後返回到客戶端。這裏可以寫在原來的頁後臺中也可以 單獨寫一個類。
return Convert.ToString(a+b);//這裏返回的就是前臺得到的值,反正參數已經進CS文件了,想怎麼操作就怎麼操作,包括讀庫都可以。
}
5 客戶端調用。
<%@ Page language="c#" Codebehind="WebPage1.aspx.cs" AutoEventWireup="false" Inherits="Web.WebPage1" %>
<script language="javascript">
function getValue()
{

//這裏如果是AjaxPor.dll就加Web._Default.getValue,如果是 Ajax.dll就不用加命名空間如下
_Default.getValue(1,2,getGroups_callback);//該處即調用 服務器端的_Default.getValue方法。
//_Default就是寫getValue的那個類,如果寫在本頁CS裏就是 WebPage1.getValue,1和2是參數。
//這在裏邊getGroups_callback指定的是個回調函數,以接受服務器端處 理完後返回客戶端結果。
}

//這個方法用戶接受並處理服務器端返回的結果。
function getGroups_callback(response)
{
var dt=response.value;//這個值就是最終傳回來的值,想怎麼用就怎麼用,反正回前臺了。
document.getElementById("Div_1").innerHTML=dt;
}
</script>
<body>
<div id="Div_1"> </div>
<button οnclick=getValue()>開始 </botton>
</body>

現在我們來分析一下如果點擊開始按鈕都執行了些什麼,首先在前臺執行getValue()函數,getValue函數裏的 _Default.getValue(1,2,getGroups_callback);會執行後臺的CS函數,我覺得這裏纔是AJAX的精髓,因爲這裏 的執行是通過Ajax組件無刷新的執行後臺CS函數的,通常我們要調用後臺的CS函數都是通過正常方法刷新一下頁面執行後臺綁定好的CS函數,這裏用 Ajax就不用刷新的執行後臺的那個getValue函數了,1和2是參數,要在getValue裏計算了,getGroups_callback這個參 數是必須要有了,要不然你在CS裏傳東西回來用什麼接收呀,getValue函數在後臺計算出結果來後,這種計算已經在後臺了,想怎麼算就怎麼算,你想讀 庫都沒問題,然後通過return返回值,這個值是什麼都行,那怕是一段" <table> <tr> <td>HelloWorld </td> </tr> </table>"這樣的HTML代碼也行,前臺用getGroups_callback()這個JS函數接收這個值,然後就是前臺調用了, 想怎麼用就怎麼用了唄,隨你喜歡,這就是AJAX運行的一個過程,從前臺無刷新到後臺,計算後再返回前臺

 

 

 

 

 

 

 

 

 

 

//總結:  

             1.引用ajax.dll     

             2.配置web.config

             3.cs 後臺pageload註冊

 

 

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Ajax.Utility.RegisterTypeForAjax(typeof(_Default ));
    }
    [Ajax.AjaxMethod]       //這個不能少
    public string getvalue(string a)
    {

        return "恭喜你,回傳成功!!";

    }
}

 

 

 

前臺js 調用後臺事件

 

<script type="text/javascript">
        function getGroups_callback(response ) {
            var dt = response.value; //這個值就是最終傳回來的值,想怎麼用就怎麼用,反正回前臺了。
            $("#abc").val(dt);
        }
        function getvalue() {
            _Default.getvalue ("1", getGroups_callback);            //  此處getvalue 爲後臺事件的名稱,“1”爲傳的   參數數,getGroups_callback 爲客戶端獲取 回傳值的 js函數
        }
   
    </script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章