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 onclick="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)

http://blog.csdn.net/wzhibin/archive/2007/03/21/1536303.aspx

 http://www.cnblogs.com/chy710/archive/2007/04/18/718715.html

http://blog.csdn.net/wzhibin/archive/2007/03/21/1536292.aspx