Ajax,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所示。