各种AJAX方法的使用比较(2)

本文收集了在ASP.NET平台上，一些具体代表性的AJAX开发方法，我将用实际的示例代码来演示如何使用它们，让您感受AJAX的进化历程，同时也希望将一些优秀的AJAX开发方法介绍给您。

第二代技术：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);  
    }  
});  

这段代码也能调用服务端的Add方法。

由于服务端采用JSON数据格式，所以需要在客户端多指定一些请求头，而这些事情以前是由代理脚本完成的。虽然现在的代码稍微多一点，但是耦合没有了，更便于提取一些公用代码了。

事实上，如果您一直用这种方法调用WebService，那么jQuery提供了设置默认参数的功能，我们可以利用这个特性减少代码量。

还是再来看一下前面那个复杂的参数类型的前端调用代码吧：

var customer = {Name: $("#txtName").val(),   
                Age: $("#txtAge").val(),   
                Address: $("#txtAddress").val(),   
                Tel: $("#txtTel").val(),   
                Email: $("#txtEmail").val()};  
var jsonStirng = $.toJSON( {customer:  customer} );  
 
$.ajax({  
    type:"POST", url: "/WebService1.asmx/AddCustomer",   
    contentType:"application/json",  
    data: jsonStirng,  
    dataType:'json',  
    success:function(result){  
        $("#output").val(result.d);  
    }  
});  

主要的代码还是一样的，集中在获取调用参数，但是要转成JSON格式。

再次一次提醒：不要老是盯着要指定一大堆的jQuery参数，它们可以通过设置默认值的方式解决。

我之所以现在不想让它们消失，是因为后面还有更好的方法，先留着它们吧。

说明：这种方法不仅可以用于调用WebService，也可以调用WCF (basicHttpBinding)，毕竟它们都使用HTTP协议。不过，WCF还有一堆烦人的配置要设置，但这不是jQuery的问题，这是服务端框架的缺陷。