AjaxPro 使用說明 1

目錄 2

修改歷史紀錄 3

1 、什么是 Ajax 4

２、為什么使用 Ajax 4

３、 Ajax 應用場景 4

４、 Ajax 開發(fā)框架 5

5 、 AjaxPro 說明 6

6 、 AjaxPro 實例說明 6

2.1 、添加 AjaxPro.dll 應用 6

2.2 、配置 web.config 8

2.3 、添加服務端方法 9

2.4 、添加前臺代碼 11

2.5 、運行程序，檢驗結果 12

1、什么是Ajax

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

２、為什么使用Ajax

• 減輕服務器的負擔。Ajax的原則是"按需取數(shù)據(jù)"，可以最大程序地減少冗余請求，減輕服務器的負擔。
• 無需刷新頁面，減少用戶心理和實際的等待時間。特別是在讀取大量數(shù)據(jù)時，不會像刷新頁面那樣出現(xiàn)白屏的情況，Ajax使用XMLHttpRequest對象發(fā)送請求并且得到服務器響應，在不重新載入整個頁面的情況下，用Javascript操作ＤＯＭ更新頁面。因此在讀取數(shù)據(jù)的過程中，用戶所面對的不是白屏，是原來的頁面內容（也可以加入一個"loading"的提示框讓用戶知道目前正在讀取的數(shù)據(jù)），只有在數(shù)據(jù)接收完畢之后才更新社會相應部分的內容。這種更新是瞬間的，用戶幾乎感覺不到。
• 帶來更好的用戶體驗
• 可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器負擔，充分利用帶寬資源，節(jié)約空間和寬帶租用成本。
• 可以調用外部數(shù)據(jù)
• 基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。
• 進一步促進頁面呈現(xiàn)與數(shù)據(jù)的分離

３、Ajax應用場景

場景１：數(shù)據(jù)驗證

場景２：按需取數(shù)據(jù)

場景３：自動更新頁面

４、Ajax開發(fā)框架

• JQuery
• Ext
• YUI
• Qooxdoo
• DWR(Direct Web Remoting)

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

• AjaxPro

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

可以在Javascript中訪問Session和Application數(shù)據(jù);

緩存查詢結果

免費使用源代碼

所有類支持Javascript客戶端返回數(shù)據(jù)，可以在Javascript中使用DataSet

使用HtmlControls組件訪問和返回數(shù)據(jù)

頁面無需重載，用事件代理（數(shù)據(jù)訪問層）

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

• Ｍagicajax

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

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

只用一個AJAXPANEL就實現(xiàn)Ajax功能，只要把需要無刷的控件放進AJAXPANEL就可以了。

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

VIEWSTATE的內容對于POSTBACK和CALLBACK來說，都是可見的，因此，無論是CALLBACK產生的VIEWSTATE,還是POSTBACK產生的，都是可見的；

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

支持IE和Firefox

• Anthem.NET

和傳統(tǒng)的Ajax技術相比，Anthem.NET有以下優(yōu)點：

不需要任何技術升級，以前不會使用Ajax技術的人員，按照以往的編程方式就可以實現(xiàn)異步交互；

支持asp.net 1.1和asp.net 2.0

5、AjaxPro說明

本文檔將使用 AjaxPro.Net 框架實現(xiàn) Ajax 功能：在客戶端異步調用服務端方法。 AjaxPro.Net 是一個優(yōu)秀的 .net 環(huán)境下的 Ajax 框架 , 用法很簡單 , 可以查閱相關資料 , 本文檔以一個簡單的實例講述使用 AjaxPro 的幾個關鍵點，本例實現(xiàn)一個簡單的功能，服務器端將頁面中輸入的數(shù)字加 1 后的結果返回給客戶端（ 注意，必須有 AjaxPro 包，即 AjaxPro.dll 文件，可以在 VSS 上下載 ）。

6、AjaxPro實例說明

6.1、添加AjaxPro.dll應用

2 . 1 . 1 用 VS 打開項目，在其資源管理器中，右擊引用，左擊"添加引用"，如圖 1_1 所示

圖 1-1

2 . 1 . 2 出現(xiàn)如圖 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> 后添加以下代碼，

如圖2_1所示。

圖 2-1

2.3 、添加服務端方法

2.3.1 打開后臺代碼，在 Page_Load 方法體 內加上如下代碼，

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

如圖 3-1 所示。

圖 3-1

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

2.3.2 、添加數(shù)字加一的方法，首先在方法前加 [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、運行程序，檢驗結果

按以上四個步驟，就可以實現(xiàn)預期的效果，如圖 5-1 所示。

圖5-1

AjaxPro使用說明