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">
$(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:
代码
{
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.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">
$(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:
代码
{
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">
$(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>
