Ajax 学习总结

一、 Ajax 介绍

什么是 Ajax ？

在 2005 年 2 月 Jesse James Garrett 发表了一篇文章：

Ajax : A New Approach to Web Applications

在这篇文章中， Garrett 提出了一种不同于传统的 thin client 模式的新的 Web 开发模式。这种新的开发模式将极大地改善 Web 应用的交互设计和可用性。这种开发模式被作者称之为 Ajax ，就是 Asynchronous JavaScript +XML 的缩写。

Ajax 技术是目前在浏览器中通过 JavaScript 脚本可以使用的所有技术的集合。 Ajax 并没有创造出某种具体的新技术，它所使用的大多数技术都是在很多年以前就已经存在了，然而 Ajax 以一种崭新的方式来使用所有的这些技术，使得古老的 B/S 方式的 Web 开发焕发了新的活力，迎来了第二个春天。

具体来说， Ajax 基于下列这些核心技术：

XHTML ：对应 W3C 的 XHTML 规范，目前是 XHTML1.0 。

CSS ：对应 W3C 的 CSS 规范，目前是 CSS2.0 。

DOM ：这里的 DOM 主要是指 HTML DOM ， XML DOM 包括在下面的 XML 中。

JavaScript ：对应于 ECMA 的 ECMAScript 规范

XML ：对应 W3C 的 XML DOM 、 XSLT 、 XPath 等规范。

XMLHttpRequest ：对应 WhatWG 的 Web Applications1.0 规范的一部分。

更详尽的资料： http://ajaxcn.org/space/start/2006-03-21/2

二、常用 Ajax 框架 / 组件 (.NET)

目前比较流行的 Ajax 组件有如下几个： ASP.NET Altas(MS) ； MagicAjax.NET ； Anthem.Net ； wwHoverPanel ； Ajax.Net Pro

Altas ：微软目前提供的最新版本是 April CTP ，对此微软有详尽的学习资料： http://atlas.asp.net 。但 Altas 只支持 ASP.NET 2.0 ，并且跟 VS.NET 2005 绑定很紧密，微软提供的 Atlas 安装程序需要运行在 .Net Framework 2.0 ，并推荐结合开发工具 Visual Studio 2005 或 Visual Web Developer Express Edition 使用，对于目前我们的应用来讲，考虑使用 Atlas 似乎还早了点，而且 Atlas 目前还没有出正式版，所以 Atlas 并不是本次学习的重点，不过今后应该及时关注 Atlas 的状况。

MagicAjax.NET ： MagicAjax.NET 基于这样一种策略，即 __doPostBack 会提及整个的 ASP.NET 页面，这样会导致页面刷新，所以 MagicAjax.NET 使用 AJAXCbo.DoPostCallBack 做局部的提交，而每个 Ajax Panel 中的内容则对应客户端即时的 HTML 内容，因为在 MagicAjax.NET 中，客户端只用执行 eval(responseText) 服务器端 Rendered 返回的 HTML 就可以了 ( 很被动 ) 。如果是基于 ASP.NET 提供的控件和开发，那么 MagicAjax.NET 是非常有效的，很好的解决了 Session 和跨页面状态的问题。而且客户端的操作和工作基本可以忽略， MagicAjax.NET 设计贴近最近的 ASP.NET 的版本，目前不提供调用客户端直接调用页面的方法。但随着其发展，优势可能渐少，因为 Atlas 最新的版本提供类似的 UpdatePanel 控件，所以此次并没有将 MagicAjax.NET 列入深入学习的计划。

Anthem.NET : 其设计理念是通过另外一个思路，遵循这样的理念 -- 既然 ASP.NET 的各个标准控件没有实现提交功能，那么我可以产生一个提交的接口，然后继承原来的标准控件，然后再实现这个接口，这样每个控件都可以向服务器端单独进行提交（这个实现思路有点类似于我们的 Qcontrol ）。使用 Anthem.NET 控件十分简单，基本上只要在工具中将 Anthem.NET 控件添加进来，然后在设计视图上像拖 ASP.NET 的标准控件一样拖上去就好了（做法下面会具体介绍）在客户端几乎不用再写 JavaScript 代码就可以实现异步调用，但方便的同时也失去了它的灵活性 。此外， Anthem.NET 同时还支持通过客户端调用页面中的方法并获得结果 / 数据，这种情况下，你将调用 Anthem_InvokePageMethod 方法，而不是 Anthem.NET 提供的默认各个控件的提交方法。 Anthem.NET 支持返回对象， DataSet ， DataTable 和 WriteDataRow(WriteDataSet,WriteDataTable,WriteDataRow,WriteObject) 。

wwHoverPanel ： wwHoverPanel 是一个 ASP.NET 的控件，但是提供了客户端回调 ( 高级回调 ) 、客户端调用页面方法，以及双向两路的序列化功能。

wwHoverPanel 吸取了 MagicAjax.NET 和 Anthem.NET 的优点，同时又结合了 ASP.NET 的客户端回调功能，是一个轻量级的 Ajax 组件。另外 wwHoverPanel 实现了双向两路的序列化功能，遗憾的是 wwHoverPanel 提供的示例代码主要支持 .NET 2.0 。

Ajax.Net Pro ： Ajax.NET Pro 实现机制基本上与 Anthem.NET 相同，但它并没有继承所以的 ASP.NET 标准控件， Ajax.NET Pro 的强项在于调用后台的的某个方法，并在客户端获得结果的数据，这个已经够实现大部分的 Ajax 的功能了，并且支持返回 DataSet 等对象，另外支持客户端组织的 DataSet （ XML 格式）返回服务器端。

此部分主要参考 ccBoy 的文章 面向.NET开发人员的Ajax 技术平台策略

三、什么是我们所需要的

其实通过上面的分析在 ASP.NET 1.1 的基础上可供我们选择的控件就只剩下 Anthem.NET 和 Ajax.NET Pro 了。如前面所讲 Anthem.NET 使用上非常简单，几乎不用写客户端脚本都可以实现异步调用服务器端代码，其实客户端的脚本是 Anthem.NET 控件自动生成了，但这同时也带来了灵活性的降低，当然 Anthem.NET 也提供了一些方法实现让我们实现更多功能。 Anthem.NET 比较适合用于较单纯的客户端操作，如果应用在项目中我们只能有选择的运用 Anthem 控件。 Ajax.NET Pro 则不同，它只是提供了一种让客户端调用服务器端方法的一个方式，当然客户端的代码需要我们自己去实现，所以在项目运用中我们可能需要对客户端脚本进行统一规范，最好能够提取几个常用的方法将其公用，避免客户端代码冗长，给今后项目的维护增加难度。

四、AnThem.Net 应用

a)       配置

Anthem.NET 采用零配置，在使用之前只需要在项目中引用 Anthem.dll 就可以了，无需其他配置。

b)       控件应用

1)       Add a Register directive to the top of your page:

<%@ Register TagPrefix="anthem" Namespace="Anthem" Assembly="Anthem" %>

2)       Add an anthem:Button control to your page:

<anthem:Button id="button" runat="server" Text="Click Me!" />

3)       Add an anthem:Label control to your page:

<anthem:Label id="label" runat="server" />

4)       Add a handler for the button's Click event either by double-clicking on the button in the designer or by adding an OnClick attribute to the button's tag:

<anthem:Button id="button" runat="server" Text="Click Me!" OnClick="button_Click" />

5)       Implement the handler in your code behind class or in a server-side script block in your page. Set the Text property like a normal Label control but make sure you set the UpdateAfterCallBack property to true or you won't see the change reflected on the page:

<script runat="server">

void button_Click(object sender, EventArgs e)

{

              label.Text = DateTime.Now.ToString();

              label.UpdateAfterCallBack = true;

}

</script>

其实1-4步我们都可以通过VS.NET设计器帮我们完成，我们需要做的可能就在在服务器端添加一句label.UpdateAfterCallBack = true;就可以了，操作十分方便。

另外如果你希望在服务器端代码执行完毕之后再向客户端抛一段脚本执行，原有的Page.RegisterStartupScript(key,script);方式已经不再有效，你需要采用如下的方式实现：Anthem.Manager.AddScriptForClientSideEval(script);

c)       调用页面内方法 ( 目前 Anthem.NET 只提供了 Page ， User Control ，和 Custom Control 内方法的调用，不支持类的调用。 )

1)       Add a public method called Add to your page so that it takes in two integers and returns their sum( 这里必须是 public 方法 )

[Anthem.Method]

public int Add(int a, int b)

{

    return a + b;

}

 

2)       Register the page with the Anthem manager when the page fires its Load event

void Page_Load()

{

       Anthem.Manager.Register(this);

}

 

3)       Add three input controls and a button to trigger the call back to your page

<input id="a" size="3" value="1">

<input id="b" size="3" value="2">

<input οnclick="DoAdd(); return false;" type="button">Add</input>

<input id="c" size="6">

 

4)       The button is invoking a client-side function called DoAdd. That function needs to be defined on the page so that it invokes the server-side Add method

<script language="javascript" type="text/javascript">

    function DoAdd() {

        Anthem_InvokePageMethod (

            'Add' ,

            [document.getElementById('a').value, document.getElementById('b').value],

            function(result) {

                document.getElementById('c').value = result.value;

            }

        );

    }

</script>

Anthem_InvokePageMethod 函数第一个参数为调用服务端函数名称，如果第一个参数指定的函数名在服务器端不存在 result.value 将返回 null 值，并在 result.error 中返回 METHODNOTFOUNT 字符串；第二个参数为该服务端所需参数，目前只支持简单的传入参数类型如： string, integer, double 和一维数组；第三个参数为回掉函数，可以在这里取得服务器端的返回值；如果执行出错会在 result.error 中返回出错信息而 result.value 为 null 值；对于返回值类型的支持。

更多示例请参照附件 或访问站点 http://hi1-timmy-wang/anthem.net/

 

五、Ajax.Net Pro 应用

a)       配置

<configuration>

 <system.web>

    <httpHandlers>

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

    </httpHandlers>

 [...]

 </system.web>

</configuration>

b)       同步方式调用服务器端方法

1)       在服务器端方法前加 [AjaxPro.AjaxMethod] 标记

[AjaxPro.AjaxMethod]

            public int AddTow(int p_intNum1,int p_intNum2)

            {

                 return p_intNum1 + p_intNum2;

      }

2)       在调用页面 Page_Load 事件中注册该方法所在的类。

private void Page_Load(object sender, System.EventArgs e)

              {

                   AjaxPro.Utility.RegisterTypeForAjax(typeof(Class1));

}

3)       在前台脚本中调用该方法：

<script>

function add() {

var intReturn =  AjaxSample.Class1.AddTow(1,2).value;

alert(intReturn);

}

</script>

 

c)       异步方式调用服务器端方法

异步调用方式只是在客户端脚本写法有不同：

<script>

function add() {

AjaxSample.Class1.AddTow(1,2, add_callback);

}

function add_callback(res){

       alert(res.value);

}

</script>

另外关于返回对象不仅仅包含 value 属性，还有 error 、 request 和 context 属性。其中 error 保存错误信息， request 保存客户端请求参数，包括方法名和传入参数， context 值只有在异步调用，且调用时候通过调用方法的后一个参数传入。如 AjaxSample.Class1.AddTow(1,2,add_callback,intContextValue); 其中 intContextValue 值即为返回对象的 context 值。

更多的 Sample 请参照作者提供的网站： http://www.schwarz-interactive.de/(.NET framework 1.1)