【jQuery ajax实战】
参考lulu Studio的jQuery Ajax全解析以及jQuery参考文档。
1.load(url,[data],[callback]):载入远程HTML文件代码并插入到DOM中。
url(String):请求的HTML页的URL地址。
data(Map):(可选参数)发送至服务器的key/value数据。在jQuery1.3中也可以接受一个字符串。
callback(Callback):(可选参数)请求完成时的回调函数。
这个方法默认使用GET方式传递的，如果[data]参数有传递数据进去，就会自动转为POST方式。示例：加载一个HTML页
代码
2 $( " #divLoad " ).load( " http://www.cnblogs.com/hongtao/archive/2010/09/07/1820741.html " , function (responseText,textStatus,XMLHttpRequest){
3 // alert(this);//这里this指向当前DOM对象，即$("#divLoad")对象
4 // alert(responseText);//请求返回的内容
5 // alert(textStatus);//请求状态：success，error
6 // alert(XMLHttpRequest);//XMLHttpRequest对象
7 });
8 });
示例：加载一个HTML页中部分内容
2 $( " #divLoad " ).load( " Default.aspx #GridView1 " ); // 加载Default.aspx中ID为GridView1的元素
3 });
2.jQuery.get(url,[data],[callback],[type]):使用GET方式进行异步请求。
url(String):发送请求的URL地址。
data(Map):(可选)要发送给服务器的数据，以Key/Value的键值对形式表示，会作为QueryString附加到请求URL中。
callback(Function):(可选)载入成功时回调函数(只有当Response的返回状态时success才调用该方法)。
type(String):(可选)返回内容格式，xml、html、script、json、text，_default。
这是一个简单的GET请求功能以取代复杂的$.ajax。请求成功可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例：
代码
2 $.get( " ImageSlider2.aspx " ,{Action: " get " ,Name: " TonyZhang " }, function (data,textStatus){
3 // 返回的data可以是xmlDoc、jsonObj、html、text等
4 // alert(this); //指向ajax请求的配置信息
5 // alert(data);
6 // alert(textStatus);//请求状态，success、error等
7 });
8 });
jQuery.get()回调函数里德this，指向的是Ajax请求的选项配置信息(该图转载自lulu Studio)：
3.jQuery.post(url,[data],[callback],[type]):使用POST方式来进行异步请求。
url(String):发送请求的URL地址。
data(Map):(可选)要发送给服务器的数据，以key/value的键值对形式表示。
callback(Function):(可选)载入成功时的回调函数。只有当response的返回状态是success才调用该方法。
type(String):(可选)客户请求的类型。
这是一个简单的POST请求功能以取代复杂的$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例：
代码
$.post( " AjaxTest.aspx " ,{Action: " post " ,Name: " TonyZhang " }, function (data,textStatus){
// data可以是xmlDoc、jsonObj、html、text等
// this指ajax请求的选项配置信息，请参考jQuery.get()方法
// 返回的data可以是xmlDoc、jsonObj、html、text等
alert( " 访问地址： " + this .url); // 指向ajax请求的配置信息
alert( " 返回数据： " + data);
alert( " 访问状态： " + textStatus); // 请求状态，success、error等
});
});
4.jQuery.getScript(url,[callback]):通过GET方式请求载入并执行一个JavaScript文件。
url(String):待载入JS文件地址。
callback(Function):(可选)成功载入后的回调函数。
jQuery1.2之前，getScript只能调用同域JS文件。1.2中可以跨域调用JavaScript文件。注意：Safari 2或更早的版本不能再全局作用域中同步执行脚本。如果通过个体S成日配套加入脚本，请加入延时函数。这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件。示例：加载并执行test。js。
$.getScript( " JS/AjaxTest.js " , function (){
alert( " JS已执行！ " );
});
});
5.jQuery.getJSON(url,[data],[callback]):通过HTTP GET请求载入JSON数据。
url(String):发送请求地址。
data(Map):(可选)待发送key/value参数。
callback(Function):(可选)载入成功时回调函数。
示例：用GetJSON方法载入图片
代码
$.getJSON( " http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? " ,
function (data){
$.each(data.items, function (i,item){
$( " <img/> " ).attr( " scr " ,item.media.m).appendTo( " #divLoad " );
if (i == 3 ) return false ;
});
});
});
6.jQuery Ajax 事件
Ajax请求会产生若干不同的事件，可以订阅这些事件并在其中处理我们的逻辑。在jQuery里有两种Ajax事件：局部事件和全局事件。
局部事件就是在每次的Ajax请求时在方法内定义的，例如：
beforeSend: function (){
// 开始发送请求前订阅事件，写要处理的代码
},
complete: function (){
// 请求成功
}
});
全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，全局事件的定义：
$( this ).show();
}).bind( " ajaxComplete " , function (){
$( this ).hide();
});
可以在特定的请求将全局事件禁用，只要设置global就可以了:
url: " test.html " ,
global: false // 禁用全局Ajax事件
});
jQuery官方给出的完整Ajax事件列表：
ajaxStart(全局事件):当Ajax请求开始而且没有其他并行请求，事件将执行。
beforeSend(局部事件):在Ajax请求开始前触发，允许修改XMLHttpRequest对象。
ajaxSend(全局事件)：同样在Ajax请求开始前触发。
success(局部事件)：当Ajax请求成功时触发，服务器和数据错误则不会触发该事件。
ajaxSuccess(全局事件)：当Ajax请求成功时触发。
error(局部事件)：服务器或数据错误都会触发该事件。
ajaxError(全局事件)：服务器或数据错误都会触发该事件。
complete(局部事件)：无论请求成功或失败都会触发该事件。
ajaxComplete(全局事件)：无论请求成功或失败都会触发该事件。
ajaxStop(全局事件)：当没有请求时触发该事件。
7.jQuery.ajax(options):通过HTTP协议请求加载远程数据。
这是jQuery的底层AJAX实现。$.ajax()返回其创建的XMLHttpRequest对象，大多数情况下无需直接操作该对象，但特殊情况下可用于手动终止请求。options:参数列表，key/value对象。
示例：获取博客园RSS。
代码
$.ajax({
type: " get " ,
url: " http://www.cnblogs.com/rss " ,
beforeSend: function (XMLHttpRequest){
$( " #loadRssResult " ).html( " <p style='color:red;'>正在读取内容，请稍后...<p> " );
},
success: function (data,textStatus){
var str = " <ul> " ;
$( " item " ,data).each( function (i,domEle){
str += " <li> " + $(domEle).children( " title " ).text() + " </li> " ;
});
str += " </ul> " ;
$( " #loadRssResult " ).html(str);
},
error: function (xhr,msg){
$( " #loadRssResult " ).text(msg);
}
});
});
8。jQuery.ajaxSetup(options)：设置全局AJAX默认选项。
示例：设置AJAX请求默认地址为"/xmlhttp/",禁止触发全局AJAX事件，用POST代替默认GET方法。其后的AJAX请求不再设置任何选项参数。
url: " /xmlhttp/ " ,
global: false ,
type: " POST "
});
$.ajax({data:myData});
9.serialize()与serializeArray():serialize序列表表格内容为字符串,serializeArray序列化表格元素(类似".serialize()"方法)返回JSON数据结构数据。示例：
HTML代码：
代码
2 < form >
3 < select name ="single" >
4 < option > Single </ option >
5 < option > Single2 </ option >
6 </ select >
7 < select name ="multiple" multiple ="multiple" >
8 < option selected ="selected" > Multiple </ option >
9 < option > Multiple2 </ option >
10 < option selected ="selected" > Multiple3 </ option >
11 </ select >< br />
12 < input type ="checkbox" name ="check" value ="check1" /> check1
13 < input type ="checkbox" name ="check" value ="check2" checked ="checked" /> check2
14 < input type ="radio" name ="radio" value ="radio1" checked ="checked" /> radio1
15 < input type ="radio" name ="radio" value ="radio2" /> radio2
16 </ form >
serialize()的jQuery代码：
serialize()结果：
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
serializeArray()的jQuery代码：
jQuery.each( fields, function(i, field){
$( " #results " ).append(field.value + " " );
});
serializeArray()结果：
Single Multiple Multiple3 radio1
9.$.ajax()访问asp.net后台方法以及WebService的示例。
访问asp.net后台不带参数方法。后台代码：
public static string SayHello()
{
return " Hello World jQuery Ajax!!! " ;
}
jQuery代码:
代码
$( " #loadAspnet " ).click( function (){
$.ajax({
type: " POST " ,
url: " AjaxTest.aspx/SayHello " ,
contentType: " application/json;charset=utf-8 " ,
dataType: " json " ,
success: function (data){
$( " #loadAspnet " ).text( $( " #loadAspnet " ).text() + " : " + data.d);
},
error: function (xhr,err){
$( " #loadAspnet " ).text( $( " #loadAspnet " ).text() + " : " + err);
}
});
});
访问asp.net后台带参数的方法。后台代码：
public static string CombinationString( string firstName, string lastName)
{
return firstName + " " + lastName;
}
jQuery代码：
代码
$( " #loadAspnet2 " ).click(function(){
$.ajax({
cache: false ,
type: " POST " ,
url: " AjaxTest.aspx/CombinationString " ,
data: " {'firstName':'tony','lastName':'zhang'} " ,
contentType: " application/json;charset=utf-8 " ,
dataType: " json " ,
success:function(data){
$( " #loadAspnet2 " ).text( $( " #loadAspnet2 " ).text() + " : " + data.d);
},
error:function(xhr,err){
$( " #loadAspnet2 " ).text( $( " #loadAspnet2 " ).text() + " : " + err);
}
});
});
[System.Web.Script.Services.ScriptService]
[WebMethod]
public string HelloWorld()
{
return " Hello World jQuery!!! " ;
}
jQuery方法：
代码
$( " #loadAspnet3 " ).click(function(){
$.ajax({
type: " POST " ,
url: " WebServiceAjaxTest.asmx/HelloWorld " ,
data: " {} " ,
contentType: " application/json " ,
dataType: " json " ,
success:function(data){
$( " #loadAspnet3 " ).text( $( " #loadAspnet3 " ).text() + " : " + data.d);
},
error:function(xhr,err){
$( " #loadAspnet3 " ).text( $( " #loadAspnet3 " ).text() + " : " + err);
}
});
});
调用带参数的WebService方法。WebService方法：
public string SayHello( string firstName, string lastName)
{
return string .Format( " Hello {0} {1} " , firstName, lastName);
}
jQuery 方法：
代码
$( " #loadAspnet4 " ).click( function (){
$.ajax({
type: " POST " ,
url: " WebServiceAjaxTest.asmx/SayHello " ,
data: " {firstName:'tony',lastName:'zhang'} " ,
contentType: " application/json " ,
dataType: " json " ,
success: function (data){
$( " #loadAspnet4 " ).text( $( " #loadAspnet4 " ).text() + " : " + data.d);
},
error: function (xhr,err,errorThrown){
$( " #loadAspnet4 " ).text( $( " #loadAspnet4 " ).text() + " : " + err);
}
});
});
调用返回集合的WebService方法。WebService方法：
public List < int > GetArray( int i)
{
List < int > list = new List < int > ();
while (i >= 0 )
list.Add(i -- );
return list;
}
jQuery方法：
代码
$( " #loadAspnet5 " ).click( function (){
$.ajax({
cache: false ,
type: " POST " ,
contentType: " application/json " ,
url: " WebServiceAjaxTest.asmx/GetArray " ,
data: " {i:10} " ,
dataType: " json " ,
success: function (result){
$(result.d).each( function (){
$( " #loadAspnet5 " ).text($( " #loadAspnet5 " ).text() + " " + this .toString());
});
},
error: function (xhr,msg){
$( " #loadAspnet5 " ).text($( " #loadAspnet5 " ).text() + " " + msg);
}
});
});
调用返回 类 的WebService方法。WebService方法：
代码
{
public int ID { get ; set ; }
public string Name { get ; set ; }
}
[WebMethod]
public Person GetClass( int id, string name)
{
return new Person { ID = id,Name = name};
}
jQuery代码：
代码
$( " #loadAspnet6 " ).click( function (){
$.ajax({
cache: false ,
type: " POST " ,
contentType: " application/json " ,
url: " WebServiceAjaxTest.asmx/GetClass " ,
data: " {id:20,name:'TonyZhang'} " ,
dataType: " json " ,
success: function (result){
$(result.d).each( function (){
$( " #loadAspnet6 " ).text($( " #loadAspnet6 " ).text() + " 编号： " + this [ " ID " ] + " ,姓名： " + this [ " Name " ]);
});
},
error: function (xhr,msg){
$( " #loadAspnet6 " ).text($( " #loadAspnet6 " ).text() + " " + msg);
}
});
});
调用返回XML的WebService方法。WebService方法：
代码
public DataSet GetDataSet()
{
DataSet ds = new DataSet();
DataTable dt = new DataTable();
dt.Columns.Add( " ID " ,System.Type.GetType( " System.String " ));
dt.Columns.Add( " Value " ,System.Type.GetType( " System.String " ));
DataRow dr = dt.NewRow();
dr[ " ID " ] = " 1 " ;
dr[ " value " ] = " Happy New Year " ;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[ " ID " ] = " 2 " ;
dr[ " Value " ] = " Happy EveryThing " ;
dt.Rows.Add(dr);
ds.Tables.Add(dt);
return ds;
}
jQuery代码：
代码
$( " #loadAspnet7 " ).click( function (){
$.ajax({
type: " POST " ,
url: " WebServiceAjaxTest.asmx/GetDataSet " ,
data: " {} " ,
dataType: " XML " ,
success: function (result){
try { // js捕获异常
$(result).find( " Table1 " ).each( function (){
$( " #loadAspnet7 " ).text($( " #loadAspnet7 " ).text() + " "
+ $( this ).find( " ID " ).text() + " " + $( this ).find( " Value " ).text());
});
} catch (e){
$( " #loadAspnet7 " ).text($( " #loadAspnet7 " ).text() + " " + e);
return ;
}
},
error: function (xhr,status){
$( " #loadAspnet7 " ).text($( " #loadAspnet7 " ).text() + " " + status);
}
});
});
最后附个专门生成Loading图片的站点：http://ajaxload.info/ 。