AjaxPro使用方法詳解

1、什麼是Ajax

Ajax是異步Javascript和XML(Asynchronous JavaScript and XML)的英文縮寫。"Ajax"這個名詞的發明人是Jesse James Garrett,而大力推廣并且使Ajax技術炙手可熱的是Google。Ajax的核心理念在于使用XMLHttpRequest對象發送異步請求。

２、為什麼使用Ajax

•減輕伺服器的負擔。Ajax的原則是"按需取資料"，可以最大程式地減少備援請求，減輕伺服器的負擔。

•無需重新整理頁面，減少使用者心理和實際的等待時間。特别是在讀取大量資料時，不會像重新整理頁面那樣出現白屏的情況，Ajax使用XMLHttpRequest對象發送請求并且得到伺服器響應，在不重新載入整個頁面的情況下，用Javascript操作ＤＯＭ更新頁面。是以在讀取資料的過程中，使用者所面對的不是白屏，是原來的頁面内容（也可以加入一個"loading"的提示框讓使用者知道目前正在讀取的資料），隻有在資料接收完畢之後才更新社會相應部分的内容。這種更新是瞬間的，使用者幾乎感覺不到。

•帶來更好的使用者體驗

•可以把以前一些伺服器負擔的工作轉嫁到用戶端，利用用戶端閑置的能力來處理，減輕伺服器負擔，充分利用帶寬資源，節約空間和寬帶租用成本。

•可以調用外部資料

•基于标準化的并被廣泛支援的技術，不需要下載下傳插件或者小程式。

•進一步促進頁面呈現與資料的分離

３、Ajax應用場景

場景１：資料驗證

場景２：按需取資料

場景３：自動更新頁面

４、Ajax開發架構

•JQuery

•Ext

•YUI

•Qooxdoo

•DWR(Direct Web Remoting)

目前該産品被加入到WebWork中，開源(Apache)。可以在Javascript代碼中直接調用java方法的應用架構，可以把Javascript中的請求調用轉遞到java方法中并将執行結果傳回給Javascript。

•AjaxPro

AjaxPro是首家支援以各種方式通過javascript通路服務端.net的免費庫，類似于SAJAX。它能把Javascript請求發送到.NET方法，服務端傳回給Javascript，甚至包括串行化自定義類。其主要特點如下：

可以在Javascript中通路Session和Application資料;

緩存查詢結果

免費使用源代碼

所有類支援Javascript用戶端傳回資料，可以在Javascript中使用DataSet

使用HtmlControls元件通路和傳回資料

頁面無需重載，用事件代理（資料通路層）

因為隻提供一個調用接口方法，是以服務端CPU占用非常少。

•Ｍagicajax

Magicajax以最簡單的方式将Ajax功能整合到頁面中，不需要修改asp.net控件，也不需要編寫新的控件，更不需要撰寫JAVASCRIPT,它有如下的特性：

應用配置簡單，易于上手；

隻用一個AJAXPANEL就實作Ajax功能，隻要把需要無刷的控件放進AJAXPANEL就可以了。

Ajax功能和普通的POSTBACK可以共存于一個WEBFORM,MAGICAJAX處理子產品隻處理包含在AJAXPANEL中的控件的CALLBACK動作。

VIEWSTATE的内容對于POSTBACK和CALLBACK來說，都是可見的，是以，無論是CALLBACK産生的VIEWSTATE,還是POSTBACK産生的，都是可見的；

提供一個類似POSTBACK的CALLBACK的事件模型

支援IE和Firefox

•Anthem.NET

和傳統的Ajax技術相比，Anthem.NET有以下優點：

不需要任何技術更新，以前不會使用Ajax技術的人員，按照以往的程式設計方式就可以實作異步互動；

支援asp.net 1.1和asp.net 2.0

5、AjaxPro說明

本文檔将使用AjaxPro.Net架構實作Ajax功能：在用戶端異步調用服務端方法。AjaxPro.Net是一個優秀的.net環境下的Ajax架構,用法很簡單,可以查閱相關資料,本文檔以一個簡單的執行個體講述使用AjaxPro的幾個關鍵點，本例實作一個簡單的功能，伺服器端将頁面中輸入的數字加1後的結果傳回給用戶端（注意，必須有AjaxPro包，即AjaxPro.dll檔案，可以在VSS上下載下傳）。

6、AjaxPro執行個體說明

6.1、添加AjaxPro.dll應用

2.1.1用VS打開項目，在其資料總管中，右擊引用，左擊"添加引用"，如圖1_1所示

圖1-1

2.1.2出現如圖1_2所示的對話框，點選浏覽，找到AjaxPro.dll檔案所在的位置，輕按兩下AjaxPro.dll，然後點選确定。

圖1-2

2.1.3在資料總管的引用檔案夾下，就可以看到AjaxPro了，說明添加引用成功，如圖1_3所示。

圖1-3

2.2、配置web.config

這一步的作用是保證用戶端向"ajaxpro/*.ashx"的請求（POST和GET）都被AjaxPro.AjaxHandlerFactory攔截。

打開web.config檔案，在<configuration><system.web>後添加以下代碼，

<httpHandlers>

<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>

</httpHandlers>

如圖2_1所示。

圖2-1

2.3、添加服務端方法

2.3.1打開背景代碼，在Page_Load方法體内加上如下代碼，

AjaxPro.Utility.RegisterTypeForAjax(typeof(所在類的類名));

如圖3-1所示。

圖3-1

其作用是向用戶端輸出下面的代碼：

<script type="text/javascript" src="/ch33/ajaxpro/core.ashx"></script>

<script type="text/javascript" src="/ch33/ajaxpro/ch33.Verify,ch33.ashx"></script>

2.3.2、添加數字加一的方法，首先在方法前加[AjaxPro.AjaxMethod]，然後像寫C#方法一樣寫方法，如圖3-2

圖3-2

注意：需要加上[Ajax.AjaxMethod]辨別，這樣才能夠被用戶端通路

2.4、添加前台代碼 在前台添加JS腳本，調用伺服器端方法，如圖4-1所示（Try.AjaxTest.Add(num)，Try為頁面類，即AjaxTest類所在的命名空間，這裡是Try；而AjaxTest即為類名，Add為方法名）

圖4-1

2.5、運作程式，檢驗結果

按以上四個步驟，就可以實作預期的效果，如圖5-1所示。

----本文來Net探索者，http://www.codefinds.net 轉載請說明出處!