jQuery.ajax

参考文章：http://www.cnblogs.com/zhangziqiu/archive/2009/05/08/jquery-learn-6.html

A。load方法：能够载入远程HTML文件代码并插入至DOM中。Returns: jQuery包装集。默认使用get方式, 如果传递了data参数则使用post方式。调用格式为load(url,[data],[callback])。
B。get方法：通过远程HTTP GET请求载入信息。Returns: XMLHttpRequest。调用格式为get(url,[data],[callback],[type])。
C。getJSON方法：通过HTTP GET请求载入JSON 数据。Returns: XMLHttpRequest。调用格式为getJSON(url,[data],[callback])。相当于:get(url,[data],[callback],"json")，getJSON函数仅仅将get函数的type参数设置为"JSON"而已，即在回调函数中获取的数据已经是按照JSON格式解析后的对象了。
D。post方法：通过远程HTTP POST请求载入信息。具体用法和get相同, 只是提交方式由"GET"改为"POST".调用格式为post(url,[data],[callback],[type])
E。ajax方法：通过HTTP请求加载远程数据。Returns: XMLHttpRequest。jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。

PS：load方法返回的是jQuery包装集，get和post返回的是XMLHttpRequest，所以使用get和post时callback函数可以得到请求的url（this.url)等信息；另外get和post可以返回json格式的数据。（其它好像都差不多）

1。load方法
test.html:

<script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{            
    $("#btnAjaxJquery").click(function(event)  //定义按钮事件,$("p").click( function (){ $(this).hide(); });
    {
        $("#divResult").load("Default.aspx", { "myParam": "myValue"},function (data, status){ alert(data); } );
        //返回的status值为success或error，用于判断请求是否成功
        //如果存在多个参数，可以用逗号连接，如：{ "myParam": "myValue" ,"otherParam" : "otherValue" }；
        //也可以直接写在url后面，如.load("Default.aspx?myParam=myValue",null,function...
        //请求Default.aspx页，参数为myParam，值为myValue，得到服务器响应后再执行alert，显示请求页的HTML输出
    });       
})        
</script>
...
<button id="Button1">使用jQuery的load方法</button><br />
<div id="div1"></div>

返回一個值: Default.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
  string myParam = "Null";
    if (!String.IsNullOrEmpty(HttpContext.Current.Request["myParam"]))
    {
        myParam = HttpContext.Current.Request["myParam"].ToString();
    }
    Response.Clear();  //清除输出，使得只返回需要的处理值
    Response.Write(myParam + "Back");
    Response.End();
}

返回一个数据窗:
Default.aspx：
<form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server">
    </asp:GridView>
</form>
Default.aspx.cs:

using System.IO;
using System.Globalization;
protected void Page_Load(object sender, EventArgs e)
{
  string myParam = HttpContext.Current.Request["myParam"].ToString();  //得到test.html的参数值
    DataSet ds = conn.GetDataSetFromParam(myParam);  //由参数值得到结果集
    GridView1.DataSource = ds;
    GridView1.DataBind();

    Response.Clear();
    Response.Write(RenderControl(form1));  //更新form1
    Response.End();
}
private string RenderControl(Control control)  //重画控件
{
    StringWriter writer1 = new StringWriter(CultureInfo.InvariantCulture);
    HtmlTextWriter writer2 = new HtmlTextWriter(writer1);

    control.RenderControl(writer2);
    writer2.Flush();
    writer2.Close();

    return writer1.ToString();
}

2。用get获取JSON格式的对象
test.html:

<script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
    $(function()
    {            
        $("#btnAjaxJquery").click(function(event)
        {
             $.get("Default.aspx", { "Name" : "Terry" , "Sex" : "Boy"}, function (data, textStatus){
       alert(this.url + "\r\n  Data:" + data.rtnName + "," + data.rtnSex);
             },"json");
    })            
    });       
</script>
...   
<button id="btnAjaxJquery">使用jQuery的get方法</button>

Deafult.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
    Response.Clear();
    Response.Write("{ rtnName:'" + Request["Name"].ToString() + "',rtnSex:'" + Request["Sex"].ToString() + "'}");  
    //返回格式 { param:'value',param2:'value2'}
    Response.End();
}

3。ajax高级实现，获取http://www.cnblogs.com/rss的订阅信息：
test.html:

<script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{            
    $("#btnAjaxJquery").click(function(event)
    {
        $.ajax({
                type: "get",
                url: "http://www.cnblogs.com/rss",
                beforeSend: function(XMLHttpRequest){
                 alert('before');
                },
                success: function(data, textStatus){
                  $("#divResult").html("");
                  $("item",data).each(function(i, domEle){
                    $("#divResult").append("<li>"+$(domEle).children("title").text()+"</li>");
                  });
                },
                complete: function(XMLHttpRequest, textStatus){
                  alert('complete');
                },
                error: function(){
                alert('error');
                }
            });

    })
});       
</script>
...
<button id="btnAjaxJquery">使用jQuery的ajax方法</button>
<br />
<div id="divResult"></div>