1.jQuery中的AJAX

使用jQuery在网站中应用AJAX实现各种效果将非常简单。

jQuery的AJAX工具包封装有三个层次。第一层是ajax()函数,它封装了一些基础的AJAX操作。第二层是load(),get(),post()等函数,它们是对ajax()函数的再次封装,这些函数的使用较为频繁。第三层是getScript(),getJSON()函数,它们进一步封装了get(),这些函数可以用于跨域操作。

http://kendezhu.iteye.com/blog/686888

①load(),get(),post()函数

这三个函数都是只有请求状态为success即请求成功时才调用回调函数callback

load(url,[data],[callback]) ?返回值:jQuery ?参数-url:请求的HTML页的URL地址String ? ?data:发送到服务器的key/value数据Object ? ? callback:请求完成时的回调函数(不需要是success),自动会将请求的结果,状态,XMLHttp对象传递给该函数 ? ? 载入远程HTML文件代码并插入到匹配的DOM元素中

这个函数默认使用GET方式来传递,如果[data]参数有数据,就会自动转换为POST方式。

load.aspx

<form id="form1" runat="server">

?? ?<div id="load1">

?? ? ? ?<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

?? ? ? ? jQuery-Ajax-load()

?? ?</div>

?? ?<div id="load2">

?? ? ? ?<asp:Button ID="Button1" runat="server" Text="Button" />

?? ?</div>

</form>

load()函数页面

?<input type="button" id="load1" value="load()" />

?<div id="1"></div>

?<div id="2"></div>

$(function(){

$("#load1").click(function(){$("#1").load("load.aspx")})

})

操作结果是将load.aspx页面的HTML文件代码加载并插入到了#1元素中

如将jQuery代码改成

$(function(){

$("#load1").click(function(){$("#1").load("load.aspx #load2",function(responseHtml,responseStatus,XMLHttpRequest){

$("#2").append("请求的HTML内容:"+responseHtml+"<br/>");

$("#2").append("请求状态:"+responseStatus+"<br/>");

$("#2").append("XMLHttp对象:"+XMLHttpRequest);

})})})

注意第一个参数,在请求页面后面使用了选择器来对请求的内容进行筛选,这里只向#1插入load.aspx中ID是load2的元素,另外这里又把回调函数参数加上了,请求后会将请求内容(这里为responseHtml,并且此时还没被筛选,是完整的load.aspx页面)请求状态及XMLHttp对象作为参数传给该函数。

jQuery.get(url,[data],[callback],[type]) ?返回值:jQuery ?参数-url:请求的HTML页的URL地址String ? ?data:发送到服务器的key/value数据Object ? ??callback:请求完成时的回调函数(不需要是success),自动会将请求的结果,状态,XMLHttp对象传递给该函数 ?Type:客户端请求的类型(JSON,XML,TEXT,HTML等最好大写http://kendezhu.iteye.com/blog/687110)String ?使用GET方式进行异步请求

get()函数页面

<input type="button" id="get1" value="get()" />

<div id="2"></div>

$("#get1").click(function(){$.get("get.ashx",{QQ:encodeURI("333"),PW:encodeURI("kid")},function(responseData,responseStatus){

$("#2").append("服务器返回的数据:"+eval('('+responseData+')').res2+"<br/>");

$("#2").append("请求状态:"+responseStatus+"<br/>");

},"JSON")})

get.ashx

public void ProcessRequest(HttpContext context)

?? ? ? ?{

?? ? ? ? ? ?context.Response.ContentType = "application/JSON";

?? ? ? ? ? ?string qq = context