前面我们看到了可以利用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 AddCustomer(Customer customer) { // 简单地返回一个XML字符串。 // 告诉客户端：服务端收到了什么样的数据。 return XmlHelper.XmlSerialize(customer, Encoding.UTF8); }
注意：这种AJAX技术没有与客户端的任何耦合，只要知道一个URL就可以调用了。 来看客户端的代码吧：
$.ajax({ type:"POST", url: "/AjaxDemo/Add.cspx", data: {a: 1, b: 2}, success:function(result){ $("#output").val(result); } }); // 第二个调用 var customer = {Name: $("#txtName").val(), Age: $("#txtAge").val(), Address: $("#txtAddress").val(), Tel: $("#txtTel").val(), Email: $("#txtEmail").val()}; $.ajax({ type:"POST", url: "/AjaxDemo/AddCustomer.cspx", data: customer, success:function(result){ $("#output").val(result); } });
注意：type:"POST"并不是必须的，您也可以把它们改成GET方式提交。
如果您此时用Fiddler查看请求内容，会发现请求的数据采用的是key=value&key=vlaue的格式，与浏览器的方式一致。 由于没有JSON数据格式的限制，现在的参数项简单了。
现在再看上面这段代码，主要代码量在哪里？
是不是在获取调用参数那块？
继续阅读本文，我要让它消失。
第四代技术：直接提交表单
我们来看一下示例用的表单：
<form action="/AjaxDemo/AddCustomer.cspx" method="post"> <p><b>新增客户资料</b></p> <span>Name: </span><input type="text" value="abc" /><br /> <span>Age: </span><input type="text" value="20" /><br /> <span>Address: </span><input type="text" value="武汉" /><br /> <span>Tel:</span> <input type="text" value="12345678" /><br /> <span>Email: </span><input type="text" value="test@163.com" /><br /> <br /> <input type="submit" value="保存客户资料" /> </form>
前面用了三种方法在提交这个表单，下面我们再来看一下更简单的提交方式：
<script type="text/javascript"> $(function(){ // 只需要下面这个调用就可以将表单改成异步提交方式！ $("#form1").ajaxForm({ success:function(result){ $("#output").val(result); } }); }); </script>
为了更清楚展示这种方法，我甚至把script标签也贴出来了。
如果您用过jQuery就应该能发现，真正的代码就只有ajaxForm的那个调用。
说明：ajaxForm是jQuery.form插件提供的功能。
服务端的代码继续使用前面示例的代码，所以就不贴出了。
再对比前面几种AJAX的实现方法，您说哪种方法最简单？
您对第四代AJAX技术有兴趣吗？
我还为它设计了三种不同场景下的示例，让您感受它的强大与简单，请继续阅读。
多submit按钮的提交（用jQuery.form实现）
您认为前面的示例太简单了，是吗？
可能有人会说，如果有多个submit按钮，这种方法就不合适了，我要响应每个按钮，为它们指定不同的URL ！
真是这样吗？ 看下面的示例吧。
相关的前端代码如下：
<form action="/AjaxTestAutoAction/submit.cspx" method="post"> <p><span>Input:</span> <input type="text" value="Fish Li" /></p> <p><span>Output:</span> <input type="text" readonly="readonly" /></p> <input type="submit" value="转换成Base64编码" /> <input type="submit" value="计算md5" /> <input type="submit" value="计算sha1" /> </form> <script type="text/javascript"> $(function(){ $("#form1").ajaxForm(function(result) { $("#output").val(result); }); }); </script>
服务端代码：