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

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

批量输入控件的提交（用jQuery.form实现）

再来展示另一个现实的例子，批量输入界面的提交。

页面表单代码如下：

 
 
<form id="form1" action="/AjaxDemo/BatchAddCustomer.cspx" method="post">  
    <p><b>批量新增客户资料</b></p>  
    <table border="0">  
    <tr><td>Name</td><td>Age</td><td>Address</td><td>Tel</td><td>Email</td></tr>  
    <tr><td><input type="text" name="Name" class="Name" value="A1" /></td>  
        <td><input type="text" name="Age" class="Age" value="20" /></td>  
        <td><input type="text" name="Address" class="Address" value="武汉" /></td>  
        <td><input type="text" name="Tel" class="Tel" value="12345678" /></td>  
        <td><input type="text" name="Email" class="Email" value="test1@163.com" /></td></tr>  
    <tr><td><input type="text" name="Name" class="Name" value="A2" /></td>  
        <td><input type="text" name="Age" class="Age" value="20" /></td>  
        <td><input type="text" name="Address" class="Address" value="上海" /></td>  
        <td><input type="text" name="Tel" class="Tel" value="22222222" /></td>  
        <td><input type="text" name="Email" class="Email" value="" /></td></tr>  
    <tr><td><input type="text" name="Name" class="Name" value="A3" /></td>  
        <td><input type="text" name="Age" class="Age" value="20" /></td>  
        <td><input type="text" name="Address" class="Address" value="武汉" /></td>  
        <td><input type="text" name="Tel" class="Tel" value="" /></td>  
        <td><input type="text" name="Email" class="Email" value="test3@163.com" /></td></tr>  
    <tr><td><input type="text" name="Name" class="Name" value="" /></td>  
        <td><input type="text" name="Age" class="Age" value="" /></td>  
        <td><input type="text" name="Address" class="Address" value="" /></td>  
        <td><input type="text" name="Tel" class="Tel" value="" /></td>  
        <td><input type="text" name="Email" class="Email" value="" /></td></tr>  
    <tr><td><input type="text" name="Name" class="Name" value="A5" /></td>  
        <td><input type="text" name="Age" class="Age" value="" /></td>  
        <td><input type="text" name="Address" class="Address" value="" /></td>  
        <td><input type="text" name="Tel" class="Tel" value="12345678" /></td>  
        <td><input type="text" name="Email" class="Email" value="" /></td></tr>  
    </table>  
    <p>说明：每行数据只有当Name，Age，Tel有效时，整行数据才有效。</p>  
    <input type="submit" name="batchAddCustomer" value="保存客户资料" />  
</form>  

JavaScript代码：

 
 
<script type="text/javascript">  
$(function(){  
      
    $("#form1").ajaxForm({  
        success:function(result){  
            $("#output").val(result);  
        }  
    });  
});  

服务端代码如下：

 
 
public class BatchSubmitCustomer  
{  
    public string[] Name { get; set; }  
    public string[] Age { get; set; }  
    public string[] Address { get; set; }  
    public string[] Tel { get; set; }  
    public string[] Email { get; set; }  
}  
[Action]  
public string BatchAddCustomer(BatchSubmitCustomer input)  
{  
    List<Customer> list = new List<Customer>();  
    for( int i = 0; i < input.Name.Length; i++ ) {  
        if( input.Name[i].Length > 0 && TryToInt(input.Age[i]) > 0 && input.Tel[i].Length > 0 ) {  
            Customer c = new Customer {  
                Name = input.Name[i],  
                Age = TryToInt(input.Age[i]),  
                Address = input.Address[i],  
                Tel = input.Tel[i],  
                Email = input.Email[i]  
            };  
            list.Add(c);  
        }  
    }  
 
    return XmlHelper.XmlSerialize(list, Encoding.UTF8);  
}  
// 还可以采用下面的方法来处理表单数据  
[Action]  
public string BatchAddCustomer2(string[] name, string[] age, string[] address, string[] tel, string[] email)  
{  
    return BatchAddCustomer(new BatchSubmitCustomer {  
        Name = name,  
        Address = address,  
        Age = age,  
        Email = email,  
        Tel = tel  
    });  
}  

这个示例的全部代码就这么多，废话不想多说，您自己去想用其它方法需要多少代码！

提交复杂表单（用jQuery.form实现）

前面的示例都是直接提交表单，没有验证表单的过程，而且都以Textbox控件为主，再来个复杂的表单示例。

页面表单代码如下：

 
 
<form id="form1" action="/AjaxDemo/AddProduct.cspx" method="post">  
<p><b>商品基本资源录入</b></p>  
<table style="border: 0px">  
<tr><td>商品分类：</td><td><select name="CategoryId" style="width: 300px">  
        <option value="1" selected="selected">手机</option><option value="2">计算机</option>  
        <option value="3">衣服</option><option value="4">生活用品</option>  
    </select></td></tr>  
<tr><td>商品名称：</td><td><input type="text" name="ProductName" style="width: 300px" value="" /></td></tr>  
<tr><td>库存单位：</td><td><select name="Unit" style="width: 100px">  
        <option value="个" selected="selected">个</option><option value="双">双</option>  
        <option value="箱">箱</option><option value="只">只</option>  
    </select>  
    &nbsp;&nbsp;&nbsp;  
    单价：<input type="text" name="Price" style="width: 120px" value="123.45" />  
    </td></tr>  
<tr><td>销售方式：</td><td>  
    <label><input type="radio" name="SaleMode" value="0" checked="checked" />零售</label>  
    <label><input type="radio" name="SaleMode" value="1" />批发</label>  
    </td></tr>  
<tr><td></td><td></td></tr>  
<tr><td></td><td></td></tr>  
 
<tr><td>可选颜色：</td><td>  
    <label><input type="checkbox" name="Colors" value="Red" checked="checked" />红色</label>  
    <label><input type="checkbox" name="Colors" value="Green" />绿色</label>  
    <label><input type="checkbox" name="Colors" value="Blue" checked="checked" />蓝色</label>  
    <label><input type="checkbox" name="Colors" value="White" />白色</label>  
    <label><input type="checkbox" name="Colors" value="Black" />黑色</label>  
    </td></tr>  
<tr><td>备注信息：</td><td>  
    <textarea name="Remark" cols="20" rows="50" style="width: 300px; height: 50px">http://www.cnblogs.com/fish-li</textarea>  
    </td></tr>  
</table>  
<br />  
<input type="submit" name="submit" value="提交" />  
 
</form>  
 

JavaScript代码：

 
 
<script type="text/javascript">  
$(function(){   
    $("#form1").ajaxForm({  
        beforeSubmit: ValidateForm,  
        success:function(result){  
            $("#output").val(result);  
        }  
    });  
    function ValidateForm(formData, jqForm, options) {   
        if( jqForm.context.ProductName.value.length == 0 ){  
            alert("商品名称不能为空。");  
            $(jqForm.context.ProductName).focus();  
            return false;  
        }  
        return true;  
    }  
});  
</script> 

服务端代码：

 
 
[Action]  
public string AddProduct(Product product)  
{  
    // 简单地返回一个XML字符串。  
    // 告诉客户端：服务端收到了什么样的数据。  
    return XmlHelper.XmlSerialize(product, Encoding.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开发方法。

相关链接

1. jQuery: http://jquery.com/

2. jQuery.form: http://jquery.malsup.com/form/

3. MyMVC: http://www.cnblogs.com/fish-li/archive/2012/02/12/2348395.html

点击此处下载示例代码

原文链接：http://www.cnblogs.com/fish-li/archive/2013/01/13/2858599.html