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 >