各种AJAX方法的使用比较(4)-优快云博客

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

第四代技术：直接提交表单

我们来看一下示例用的表单：

  
  <form id="form1" action="/AjaxDemo/AddCustomer.cspx" method="post">  
    <p><b>新增客户资料</b></p>  
    <span>Name: </span><input type="text" name="Name" value="abc" /><br />  
    <span>Age: </span><input type="text" name="Age" value="20" /><br />  
    <span>Address: </span><input type="text" name="Address" value="武汉" /><br />  
    <span>Tel:</span> <input type="text" name="Tel" value="12345678" /><br />  
    <span>Email: </span><input type="text" name="Email" value="test@163.com" /><br />  
    <br />  
    <input type="submit" name="btnAddCustomer" 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 id="form1" action="/AjaxTestAutoAction/submit.cspx" method="post">  
    <p><span>Input:</span>  
        <input type="text" name="input" style="width: 300px" value="Fish Li" /></p>  
    <p><span>Output:</span>  
        <input type="text" id="output" style="width: 300px" readonly="readonly" /></p>  
    <input type="submit" name="Base64" value="转换成Base64编码" />&nbsp;&nbsp;  
    <input type="submit" name="Md5" value="计算md5" />&nbsp;&nbsp;  
    <input type="submit" name="Sha1" value="计算sha1" />  
</form>  
 
<script type="text/javascript">  
$(function(){      
    $("#form1").ajaxForm(function(result) {  
        $("#output").val(result);  
    });  
});  
</script>

服务端代码：

  
  public class AjaxTestAutoAction  
{  
    [Action]  
    public string Base64(string input)  
    {  
        return Convert.ToBase64String(Encoding.Default.GetBytes(input));  
    }  
 
    [Action]  
    public string Md5(string input)  
    {  
        byte[] bb = Encoding.Default.GetBytes(input);  
        byte[] md5 = (new MD5CryptoServiceProvider()).ComputeHash(bb);  
        return BitConverter.ToString(md5).Replace("-", string.Empty);  
    }  
 
    [Action]  
    public string Sha1(string input)  
    {  
        byte[] bb = Encoding.Default.GetBytes(input);  
        byte[] sha1 = (new SHA1CryptoServiceProvider()).ComputeHash(bb);  
        return BitConverter.ToString(sha1).Replace("-", string.Empty);  
    }  
}