阅读目录

开始

第一代技术：生成客户端代理脚本调用服务器。

新技术的改进方向。

第二代技术：jQuery直接调用WebService。

更简单的数据格式。

第四代技术：直接提交表格。

用多个提交按钮提交(用jQuery.form实现)。

输入批次控制的提交(由jQuery.form实现)。

提交复杂的表单(用jQuery.form实现)。

各种AJAX开发方法的比较和总结。

相关链接

本文收集了ASP.NET平台上一些有代表性的AJAX开发方法，我会用实际的示例代码来演示如何使用，让大家感受到AJAX的演进，也希望能给大家介绍一些优秀的AJAX开发方法。

为了方便介绍这些AJAX开发方法，我把它们分为四代技术。

注意：将AJAX技术分成几代纯粹是我个人的观点，只是为了更好地区分它们。

另外，一些没有任何框架类库的原创AJAX开发方法，本文就不讨论了。

第一代技术：生成客户端代理脚本调用服务器。

这种技术展示了第一代AJAX框架的主要设计思想：在服务器端为客户端生成代理脚本，然后这些代理脚本调用服务器端。调用者不需要知道如何实现整个调用过程，客户端的调用风格与服务器端的代码基本相似。

这类技术的代表作品有：ASP.NET Ajax和AjaxPro。

我将使用ASP.NET AJAX框架来演示如何开发AJAX。

首先，我们可以创建一个网络服务：

[Web服务(命名空间=' http://tempuri.org/')] [web服务绑定(conformsto=wsiprofiles . basicprofile 1 _ 1)]//要允许使用ASP.NET Ajax从脚本调用此Web服务，请取消对以下行的注释。[系统。公共类网络服务1 :系统。web . services . webservice {[WebMethod]public int Add(int a，int b){ return a b；}这段代码是一段普通的WebService代码，但唯一需要注意的是，在类的定义中添加了ScriptService修改特性。

接下来，我们还需要在ASPX页面中使用ScriptManager为客户端生成代理脚本：

asp3360 ScriptManager ID=' script manager 1 ' runat=' server ' Services asp3360 service reference Path='/webservice1 . asmx ' InlineScript='true '//Services/asp3360 script manager说明：InlineScript=' true '的设置没有必要，只是让我们看看script manager生成了什么代码。

从截图中可以看到，除了引入两个必要的AJAX客户端类库之外，还在客户端为WebService1生成了一个代理脚本。

有了这些代码，我们可以用下面的JavaScript代码来调用服务器：

函数Call_Add(){ WebService1。添加(1，2，ShowResult)；}函数show result(result){ document . getelementbyid(' output ')。值=结果；}前面的例子太简单了。我们再举一个复杂参数的例子，或者从服务器开始，先定义一个参数类型：

公共类Customer{公共字符串Name { get设置；} public int Age { get设置；}公共字符串Address { get设置；}公共字符串Tel { get设置；}公共字符串Email { get设置；}}代码，共{ }个网络服务：

[WebMethod]公共字符串AddCustomer(Customer Customer){ if(Customer==null)返回“Customer为null。”；//只需返回一个XML字符串。//告诉客户端服务器收到了什么样的数据。返回XmlHelper。XmlSerialize(客户，编码。UTF8)；}仍然借用以前的ScriptManager设置来查看JavaScript调用代码：

函数Call _ AddCustomer(){ var customer={ name : document . getelementbyid(' txt name ')。值，age : document . getelementbyid(' TxTage ')。值，address : document . getelementbyid(' txtAddress ')。值，Tel : document . GetElementByID(' TxtTel ')。值，email : document . getelementbyid(' TxTemail ')。值}；WebService1。添加客户(客户，显示结果)；}基本上类似于服务器的编码方法，先创建一个customer对象，然后传递给调用方法。

在此之前(2006年)，最初的AJAX实现非常复杂，这种方法使客户端代码看起来与服务器非常相似，这确实是一个很好的设计思想。然而，各种技术一直在进步。现在我们在2013年再次回顾这个方法的时候，会发现它确实有一些不完善的地方，以至于现在很少有人用这个方法，而且这个技术已经被淘汰了！

其实我们可以换一个角度思考：如果这个方法真的很优秀，那么它是无法被淘汰的，也正是因为有更好的方法才会被淘汰。

新技术的改进方向。

上述的AJAX方法可以使客户端的调用代码与服务器的代码风格基本一致。为什么看似完美的方法会被淘汰？

我来分析一下这种开发方法的缺陷：

1.前端代码不够独立，需要在调用服务器之前添加对页面的引用，这其实是一种强耦合。

2.出现了更好的前端框架，可以减少获取调用参数的代码量。

继续看这篇文章，你会发现我后面介绍的新方法都是在试图解决这些缺陷，而这些缺陷也为新技术指明了改进方向。

由于前端调用服务器时需要代理脚本，这种设计会阻碍前端代码的封装。你可以想象一下：如果客户端需要一个【获取当前用户信息】的函数，并且这个函数必须由服务器来实现，那么我们只能期望服务器为客户端生成代理类来调用这个函数。但是这个功能非常有用，需要在很多地方使用。是否要将其提取到一个通用文件中？

不幸的是，即使您将此调用代码提取到public.js文件中，在每个页面引用public.js后，也无法调用[获取当前用户信息]函数，因为代理脚本不一定存在，public.js中的代码还无法运行。怎么办？

答：对于引用public.js的每个页面，添加ScriptManager来引用该服务。

共享的功能越多，引用代码就越重复。简单地说，这个方法将WebService、aspx页面和js代码耦合在一起。因为耦合，用得越多越觉得麻烦。

虽然这种生成代理脚本的开发方法可以使前端代码和后端代码的风格保持一致，但毕竟前端和后端不是同一个开发语言，要注意不同的方向。尤其是在出现了更好的前端框架之后，这种由后端安排前端的方法，不仅将后端和前端耦合在一起，还限制了前端技术的发展，最终只能被抛弃！

现在，请记住我们为提交客户消息而编写的代码：

var customer={ name : document . getelementbyid(' txt name ')。值，age : document . getelementbyid(' TxTage ')。值，address : document . getelementbyid(' txtAddress ')。值，Tel : document . GetElementByID(' TxtTel ')。值，email : document . getelementbyid(' TxTemail ')。值}；当我介绍第四代技术时，你会发现它们已经消失了！

第二代技术：jQuery直接调用WebService。

随着jQuery前端类库的普及，另一种新的开发方法也开始流行。

HTTP调用是一种非常简单透明的技术，只要指定一个URL，构造一个请求体，前端代理脚本方法就封装了这个过程，因为它的封装造成了耦合，限制了前端的发展。新的AJAX技术只能突破这个限制，抛弃这些代理脚本，直接调用后端代码。

下面的示例代码仍然基于前面的示例，只是不需要代理类，现在直接调用服务器。

由于后端服务代码没有变化，我就不再贴了，页面也不需要再添加任何引用。让我们直接看前端代码：

$.ajax({ type:'POST '，url: '/WebService1.asmx/Add '，content type : ' application/JSON '，data:'{a: 1，b: 2} '，dataType:'json '，success : function(result){ $(' # output ')。val(结果d)；}});这段代码还可以调用服务器的Add方法。

因为服务器使用JSON数据格式，所以有必要在客户端指定更多的请求头，这在之前是由代理脚本完成的。虽然现在代码多了一点，但是耦合没有了，这使得提取一些常用代码变得更加容易。

事实上，如果您总是以这种方式调用WebService，jQuery提供了设置默认参数的功能，我们可以使用这个功能来减少代码量。

让我们看看复杂参数类型的前端调用代码：

var customer={ name : $(' # txt name ')。val()，Age: $('#txtAge ')。val()，Address: $('#txtAddress ')。val()，Tel: $('#txtTel ')。val()，Email: $('#txtEmail ')。val()}；var jsonStirng=$。to JSON({ customer : customer })；$.ajax({ type:'POST '，URL : '/webservice1 . asmx/AddCustomer '，content type : ' application/JSON '，data: jsonStirng，dataType:'json '，success : function(result){ $(' # output ')。val(结果d)；}});主要代码是一样的，重点是获取调用参数，但是需要转换成JSON格式。

再次提醒：不要总是盯着指定很多jQuery参数，设置默认值就可以解决。我现在不想让它们消失的原因是有更好的方法保存它们。

说明：这个方法不仅可以用来调用WebService，还可以用来调用WCF(basichtpbinding)。毕竟，它们都使用HTTP协议。但是，WCF还有很多烦人的配置要设置，但这不是jQuery的问题，而是服务器端框架的缺陷。

更简单的数据格式。

正如我们前面看到的，我们可以使用jQuery调用WebService，但是JSON的转换过程感觉有点多余，所以浏览器提交没有这个转换步骤。有时候我很反感看到一些家伙还在JavaScript中拼接JSON字符串，所以这个示例代码并没有抹黑那个方法。我采用了一个JSON插件。

第三代技术完美解决了输入输出必须采用JSON的问题，也解决了POST的局限性。

因为这个改变改变了数据格式，所以服务器也改变了。新框架解决了这些问题。例如，ASP.NET MVC框架和MyMVC框架都支持这种开发方法。

让我们看看当前的服务器代码：

[Action]public int Add(int a，int b){ return a b；}[action]public string add customer(customercustomer){//只是返回一个XML字符串。//告诉客户端服务器收到了什么样的数据。返回XmlHelper。XmlSerialize(客户，编码。UTF8)；}注意：这种AJAX技术没有和客户端耦合，所以只要知道一个URL就可以调用。看看客户端代码：

$.ajax({ type:'POST '，url: '/AjaxDemo/Add.cspx '，data: {a: 1，b: 2}，success : function(result){ $(' # output ')。val(结果)；}});//第二个调用是varcustomer={ name : $(' # txt name ')。val()，age: $ ('# txtage ')。val()，address: $ ('# txtaddress ')。val()，tel: $(')。$.ajax({ type:'POST '，URL : '/AJaxDemo/addCUstomer . cspx '，data: customer，success : function(result){ $(' # output ')。val(结果)；}});注意：无需键入：“开机自检”。您也可以将它们更改为GET并提交。

如果此时使用Fiddler查看请求的内容，会发现请求的数据格式为key=valuekey=vlaue，与浏览器一致。因为没有JSON数据格式的限制，所以现在参数项很简单。

现在看看上面的代码，主要的代码量在哪里？

你拿到通话参数了吗？

继续看这篇文章，我想让它消失。

第四代技术：直接提交表格。

让我们看一下示例表单：

form id=' form 1 ' action='/Ajax demo/add customer . cspx ' method=' post ' padew customer data/p spanname :/span input Type=' text ' name=' name ' value=' ABC '/br/spanage :/span put Type=' text ' name=' age ' value=' age ' value=' 20 '/br/span address :/span put Type=' text ' name=' address ' value='武汉'/br/span tern 3366让我们看看更简单的提交方法：

脚本类型=' text/JavaScript ' $(function(){//您只需要下面的调用就可以将表单更改为异步提交模式！$('#form1 ')。Ajax form({ success : function(result){ $(' # output '))。val(结果)；} });});/script为了更清晰的展示这个方法，我甚至贴了脚本标签。

如果您使用过jQuery，您应该会发现唯一真正的代码是对ajaxForm的调用。

说明：ajaxForm是jQuery.form插件提供的一个函数。

服务器代码继续使用前面示例中的代码，因此不会发布。

与之前的AJAX实现方法相比，你认为哪一种最简单？

你对第四代AJAX技术感兴趣吗？

我还为它设计了三个不同场景的例子，让你感受到它的力量和简约。请继续阅读。

用多个提交按钮提交(用jQuery.form实现)。

你认为前面的例子太简单了，不是吗？

有人可能会说，如果有多个提交按钮，这种方法不适合。我必须回应每个按钮，并为它们指定不同的网址！

是真的吗？请看下面的例子。

相关前端代码如下：

form id=' form 1 ' action='/AJaxtestauto action/submit . cspx ' method=' post ' pspaninput :/Span输入类型=' text ' name=' Input ' style=' width : 300px ' value=' Fish Li '/p pspanoutput :/Span输入类型=' text ' id=' output ' style=' width : 300px ' readonly=' readonly '/p输入类型=' submit' name='表格1’)。ajaxForm(函数(结果){ $('#output '))。val(结果)；});});/script服务器代码：

公共类Ajaxtestautatoaction {[Action]公共字符串Base64(字符串输入){返回Convert。ToBase64String(编码。默认值. GetBytes(输入))；} [Action]公共字符串M5(字符串输入){ byte[] bb=Encoding。默认值。GetBytes(输入)；byte[] md5=(新的MD5CryptoServiceProvider())。ComputeHash(bb)；返回BitConverter。ToString(md5)。替换('-'，字符串。空的)；} [Action]公共字符串Sha1(字符串输入){ byte[] bb=Encoding。默认值。GetBytes(输入)；字节[] sha1=(新的SHA1CryptoServiceProvider())。ComputeHash(bb)；返回BitConverter。ToString(sha1)。替换('-'，字符串。空的)；}}代码依然清晰：

1.服务器定义了三种方法，对应三个提交按钮。

2.前端仍然只调用一个ajaxForm来解决所有问题。

该方法由前端的jQuery、jQuery.form和服务器端的MyMVC框架实现。想象一下使用其他三种方法需要多少代码。

批处理输入控件的提交(由jQuery.form实现)将展示另一个现实的例子，批处理输入界面的提交。

页面代码如下：

JavaScript代码：

脚本类型=' text/JavaScript ' $(function(){ $(' # form 1 '))。Ajax form({ success : function(result){ $(' # output '))。val(结果)；} });});

服务器代码如下：

这个例子代码太多了，不想废话。你自己想想，你需要多少代码才能使用其他方法！

提交复杂表单(用jQuery.form实现)前面的例子都是直接提交表单，没有验证表单的过程，主要基于Textbox控件。我们再举一个复杂形式的例子。

页面代码如下：

JavaScript代码：

脚本类型=' text/JavaScript ' $(function(){ $(' # form 1 '))。Ajax form({ BeforeSubmit : validate form，success : function(result){ $(' # output ')。val(结果)；} });函数validate form (formdata，jqform，options){ if(jq form . context . product name . value . length==0){ alert('商品名称不能为空。);$(jqForm.context.ProductName)。焦点()；返回false}返回true}});/script服务器代码：

[action]公共字符串add product(product product){//只返回一个XML字符串。//告诉客户端服务器收到了什么样的数据。返回XmlHelper。XmlSerialize(产品，编码。UTF8)；}各种AJAX开发方法的比较和总结。

读完这些例子，让我们回顾一下这些AJAX方法的发展：

1.以ASP.NET AJAX为代表的“生成客户端代理脚本调用服务器”技术，为了封装原AJAX的复杂流程，服务器为客户端生成代理脚本。这种打包的客户端与调用模式下的服务器基本相同，似乎简化了很多，降低了开发门槛。但是，它的优点也是它最大的缺点：服务器已经照顾到了客户端的事务，它完全没有想到客户端的技术也在提升！当更好的前端技术出现时，其末端只能被淘汰。

2.【jquery直接调用WebService】可以看作是对第一代技术的改进，抛弃了在服务器端生成代理脚本的功能，直接在客户端准备服务器端所需的数据格式，通过在jQuery内部封装XmlHttpRequest可以方便地调用服务器端。这种方法解决了客户端、服务和页面之间的耦合，但是数据格式受限于序列化，这就很奇怪了。这种奇怪的感觉其实是一种不方便的表达。

3.为了让前端更方便地调用服务器，只能更改服务器帧。ASP.NET MVC框架和MyMVC框架都支持更简单的数据格式，不需要冗余的asmx文件，使用类库可以直接响应客户端请求。这种技术的主要特点是可以用更简单的数据格式调用服务器。由于数据格式的简化，这为未来的进一步改进留下了机会。

4.因为服务器不需要序列化的数据格式，而且前端技术还在提升，最后jQuery.form插件可以让我们不需要关注表单数据的采集过程。它可以模拟浏览器的提交行为，正确识别[成功的控件]并提交给服务器，因此代码最小化，AJAX开发过程更容易。

jQuery.form前面的例子也表明，无论表单是什么，只需要一次调用。

而且，它很好地封装了jQuery的调用过程，所以我认为这是使用AJAX最简单的方法。