阅读目录
开始
第一代技术：生成客户端代理脚本调用服务端
新技术的改进方向
第二代技术：jQuery直接调用WebService
第三代技术：更简单的数据格式
第四代技术：直接提交表单
多submit按钮的提交（用jQuery.form实现）
批量输入控件的提交（用jQuery.form实现）
提交复杂表单（用jQuery.form实现）
各种AJAX开发方法的对比与总结
相关链接
本文收集了在ASP.NET平台上，一些具体代表性的AJAX开发方法，我将用实际的示例代码来演示如何使用它们，让您感受AJAX的进化历程，同时也希望将一些优秀的AJAX开发方法介绍给您。
为了方便地介绍这些AJAX开发方法，我将它们划分为四代技术。
注意：按代划分AJAX技术纯属我个人的观点，只为了更好了区分它们。
此外，一些不借助任何框架类库的原始AJAX开发方法，本文将不讨论它们。
第一代技术：生成客户端代理脚本调用服务端
这类技术展示了第一代的AJAX框架的主要设计思想：在服务端为客户端生成代理脚本， 然后由这些代理脚本调用服务端，调用者可以不必知道整个调用过程是如何实现的， 而且在客户端的调用风格也基本与服务端的代码类似。
这类技术的代表作有：ASP.NET AJAX, AjaxPro 二个服务端框架。
下面我将用ASP.NET AJAX框架来演示如何进行AJAX开发。
首先，我们可以创建一个WebService服务：
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService {
[WebMethod]
public int Add(int a, int b)
{
return a + b;
}
</div>
这段代码就是一个普通的WebService代码，唯独需要注意的是：在类的定义上加了一个ScriptService修饰特性。
接下来，我们还需要在一个ASPX页面中，用ScriptManager为它生成客户端的代理脚本：
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="/WebService1.asmx" InlineScript="true" />
</Services>
</asp:ScriptManager>
</div>
说明：InlineScript="true"的设置并不是必须的，只是为了让我们看到ScriptManager到底生成了什么代码。
从截图可以看到，除了引入了二个必要的AJAX客户端类库外，还在客户端为WebService1生成了代理脚本。
有了这些代码后，我们可以用下面的JavaScript代码调用服务端：
function Call_Add(){
WebService1.Add(1,2, ShowResult);
}
function ShowResult(result){
document.getElementById("output").value = result;
}
</div>
前面这个示例太简单了，再来个参数复杂的示例吧，还是从先服务端开始，先定义一个参数类型：
public class Customer
{
public string Name { get; set; }
public int Age { get; set; }
public string Address { get; set; }
public string Tel { get; set; }
public string Email { get; set; }
}
</div>
WebSerice的代码：
[WebMethod]
public string AddCustomer(Customer customer)
{
if( customer == null )
return "customer is null.";
// 简单地返回一个XML字符串。
// 告诉客户端：服务端收到了什么样的数据。
return XmlHelper.XmlSerialize(customer, Encoding.UTF8);
}
</div>
仍然借用前面的ScriptManager设置，来看JavaScript的调用代码：
function Call_AddCustomer(){
var customer = {Name: document.getElementById("txtName").value,
Age: document.getElementById("txtAge").value,
Address: document.getElementById("txtAddress").value,
Tel: document.getElementById("txtTel").value,
Email: document.getElementById("txtEmail").value};
WebService1.AddCustomer(customer, ShowResult);
}
</div>
基本上还是与服务端的编码方式差不多，先创建一个customer对象，再传给调用方法。
在那个年代之前（2006年），原始的AJAX实现方式非常复杂，而这种方法让客户端代码风格看起来与服务端十分类似，这确实是个了不起的设计思路。 然而各种技术一直在改进中，现在，2013年，当我们再来回顾这种方法时，会发现它确实存在一些不完善的地方， 以至于现在使用这种方法的人很少了，这种技术被淘汰了！
其实我们可以从另一外角度来思考：如果这种方法真的很优秀，它就不可能被淘汰，正是因为有更优秀的方法出现了，它才会遭到淘汰的命运。
新技术的改进方向
前面介绍的那种AJAX方法能让客户端的调用代码与服务端的代码风格基本一致，看似很完美的方法为什么会被淘汰了呢？
我来分析一下这种开发方法的缺陷：
1. 前端代码不够独立，必须要在页面中添加引用之后才能调用服务端，这其实是一种强耦合。
2. 出现了更优秀的前端框架能简少获取调用参数的代码量。
继续阅读本文，您会发现后面我将要介绍的新方法都朝着解决这些缺陷在努力， 这些缺陷也算是指出了新技术的改进方向。
由于前端在调用服务端时，需要事先生成代理脚本，这种设计会阻碍前端代码的封装性。 您可以想象一下：如果客户端需要一个【获取当前用户信息】的功能，而这个功能必须由服务端实现的， 此时，我们就只能指望服务端为客户端生成代理类来调用这个功能了。 但这个功能太有用，许多地方都需要使用，您是不是会想将它提取到一个公用的文件中？
遗憾的是：就算您将这段调用代码提取到一个公共的public.js文件中，每个页面在引用public.js后， 并不能调用【获取当前用户信息】功能，因为代理脚本并不一定存在，public.js中的代码还不能运行起来。 怎么办？
答：为每个引用public.js的页面，再添加ScriptManager引用那个服务吧。
共用性越高的功能，您会发现这种引用代码的重复度也就越高。
简单说来，这种方法将WebService, aspx页面, js代码耦合在一起了。
由于耦合，您越用越发现越麻烦。
这种生成代理脚本的开发方法虽然能让前端代码与后端代码的风格一致，然而， 前端与后端毕竟不是同一种开发语言，它们要关注的方向也是不一样的。尤其是当更优秀的前端框架出现后， 这种后端包办前端的方法不仅让后端与前端耦合在一起，而且还限制了前端技术的发展， 最终只能是被抛弃的命运！
现在请记住我们为了提交一个Customer信息写了什么样的代码：
var customer = {Name: document.getElementById("txtName").value,
Age: document.getElementById("txtAge").value,
Address: document.getElementById("txtAddress").value,
Tel: document.getElementById("txtTel").value,
Email: document.getElementById("txtEmail").value};
</div>
我在介绍第四代技术时，您会发现它们消失了！
第二代技术：jQuery直接调用WebService
随意jQuery前端类库的流行，另一种新的开发方法也开始流行起来了。
HTTP调用本来是个很简单很透明的技术，只要指定一个URL，构造一个请求体就可以了， 前端代理脚本的方法将这个过程封装了起来，由于它的封装制造了耦合并限制前端的发展。 新的AJAX技术只能突破这个限制，舍弃这些代理脚本，直接调用后端代码。
下面的示例代码还是基于前面的示例，唯独不同的是：不是需要代理类，现在是直接调用服务端。
由于后端的服务代码没有改变，我也就不再贴出它们了，而且页面也不需要再添加什么引用，我们就直接看前端代码好了：
$.ajax({
type:"POST", url: "/WebService1.asmx/Add",
contentType:"application/json",
data:"{a: 1, b: 2}",
dataType:'json',
success:function(result){
$("#output").val(result.d);
}
});
</div>
这段代码也能调用服务端的Add方法。
由于服务端采用JSON数据格式，所以需要在客户端多指定一些请求头，而这些事情以前是由代理脚本