A 使用JQuery 的load( ) 方法
使用load( ) 方法发送异步数据，返回的数据不需要用户考虑是文本还是XML，JQuery 都会自动进行处理。示例如下：
客户端（14-1.html ）：
| <html> |
| <head> |
| <title>jQuery简化Ajax步骤</title> |
| <script language="javascript" src="jquery.min.js"></script> |
| <script language="javascript"> |
| function startRequest(){ |
| $("#target").load("14-1.aspx"); |
| } |
| </script> |
| </head> |
| <body> |
| <input type="button" value="测试异步通讯" onClick="startRequest()"> |
| <br><br> |
| <div id="target"></div> |
| </body> |
| </html> |
服务器端（14-1.aspx ）：
| <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> |
| <%@ Import Namespace="System.Data" %> |
| <% |
| Response.Write("异步测试成功，很高兴"); |
| %> |
注意：如果服务器端返回的是XML 格式的数据，在客户端也会自动实现正确显示。
B 使用JQuery 的 $.get( ) 和 $.post( ) 方法
客户端（14-5.html ）：
| <html> |
| <head> |
| <title>GET VS. POST</title> |
| <script language="javascript" src="jquery.min.js"></script> |
| <script language="javascript"> |
| function createQueryString(){ |
| var firstName = encodeURI($("#firstName").val()); |
| var birthday = encodeURI($("#birthday").val()); |
| //组合成对象的形式 |
| var queryString = {firstName:firstName,birthday:birthday}; |
| return queryString; |
| } |
| function doRequestUsingGET(){ |
| $.get("14-5.aspx",createQueryString(), |
| //发送GET请求 |
| function(data){ |
| $("#serverResponse").html(decodeURI(data)); |
| } |
| ); |
| } |
| function doRequestUsingPOST(){ |
| $.post("14-5.aspx",createQueryString(), |
| //发送POST请求 |
| function(data){ |
| $("#serverResponse").html(decodeURI(data)); |
| } |
| ); |
| } |
| </script> |
| </head> |
| <body> |
| <h2>输入姓名和生日</h2> |
| <form> |
| <input type="text" id="firstName" /><br> |
| <input type="text" id="birthday" /> |
| </form> |
| <form> |
| <input type="button" value="GET" onclick="doRequestUsingGET();" /><br> |
| <input type="button" value="POST" onclick="doRequestUsingPOST();" /> |
| </form> |
| <div id="serverResponse"></div> |
| </body> |
| </html> |
服务器端（14-5.aspx ）：
| <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> |
| <%@ Import Namespace="System.Data" %> |
| <% |
| if(Request.HttpMethod == "POST") |
| Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]); |
| else if(Request.HttpMethod == "GET") |
| Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]); |
| %> |
C 使用JQuery 的 $.ajax( ) 方法
客户端（14-6.html ）：
| <html> |
| <head> |
| <title>$.ajax()方法</title> |
| <script language="javascript" src="jquery.min.js"></script> |
| <script language="javascript"> |
| function createQueryString(){ |
| //必须两次编码才能解决中文问题 |
| var firstName = encodeURI(encodeURI($("#firstName").val())); |
| var birthday = encodeURI(encodeURI($("#birthday").val())); |
| //组合成对象的形式 |
| var queryString = "firstName="+firstName+"&birthday="+birthday; |
| return queryString; |
| } |
| function doRequestUsingGET(){ |
| $.ajax({ |
| type: "GET", |
| url: "14-5.aspx", |
| data: createQueryString(), |
| success: function(data){ |
| $("#serverResponse").html(decodeURI(data)); |
| } |
| }); |
| } |
| function doRequestUsingPOST(){ |
| $.ajax({ |
| type: "POST", |
| url: "14-5.aspx", |
| data: createQueryString(), |
| success: function(data){ |
| $("#serverResponse").html(decodeURI(data)); |
| } |
| }); |
| } |
| </script> |
| </head> |
| <body> |
| <h2>输入姓名和生日</h2> |
| <form> |
| <input type="text" id="firstName" /><br> |
| <input type="text" id="birthday" /> |
| </form> |
| <form> |
| <input type="button" value="GET" onclick="doRequestUsingGET();" /><br> |
| <input type="button" value="POST" onclick="doRequestUsingPOST();" /> |
| </form> |
| <div id="serverResponse"></div> |
| </body> |
| </html> |
服务器端（14-5.aspx ）：
| <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> |
| <%@ Import Namespace="System.Data" %> |
| <% |
| if(Request.HttpMethod == "POST") |
| Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]); |
| else if(Request.HttpMethod == "GET") |
| Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]); |
| %> |
$.ajax( options )方法的参数非常地多，涉及Ajax 的方方面面，需要自己多多参考和实践。
本文转自钢钢博客园博客，原文链接：http://www.cnblogs.com/xugang/archive/2010/08/07/1794738.html，如需转载请自行联系原作者
