关于
jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第二层是$.load(),$.get(),和$.post()方法,第三层是$.getScript()和$.getJSON()方法。首先介绍第二层的方法,因为其使用频率很高.
load()方法
1.载入HTML文档
load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。它的结构为:
1 2 | load(url [,data] [,callback]) |
load()方法参数解释如下
load()方法参数解释 | ||
---|---|---|
参数名称 | 类型 | 说明 |
url | String | 请求HTML页面的URL地址 |
data(可选) | Object | 发送至服务器的key/value数据 |
callback(可选) | Function | 请求完成时的回调函数 |
2.筛选载入的HTML文档
load()方法的URL参数的语法结构为:”url selector”.注意,URL和选择器之间有一个空格.
例如,只需要加载test.html页面中class为para的内容,可以使用下面的代码来完成:
1 | $("resText").load("test.html .para"); |
3.传递方式
load()方法的传递方式根据参数data来自动指定,如果没有传递参数,则采用GET方式传递;反之,则会自动转换为POST方式。
//无参数传递,则是GET方式.
$(“#resText”).load(“test.php”,function(){
//…
});
//有参数传递,则是POST方式
$(“#resText”).load(“test.php”,{name:”rain”,age:”22″},function(){
//…
});
4.回调参数
对于必须在加载完成后才能将继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容,请求状态和XMLHttpRequest对象,jQuery代码如下:
1 2 3 4 5 | $("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){ //responseText: 请求返回的内容 //textStatus:请求状态:success,error,notmodified,timeout //XMLHttpRequest:XMLHttpRequest对象 }); |
注意:在load()方法中,无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发.对应下面将介绍的$.ajax()方法中的complete回调函数
$.get()方法和$.post()方法
load()方法通常用来从WEB服务器上获取静态的数据文件,然而这并不能体现Ajax的全部价值.在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是后面要讲解的$.ajax()方法).
注意:$.get()和$.post()方法是jQuery中的全局函数,而在此之前讲的jQuery方法都是对jQuery对象进行操作的. 1.$.get()方法
$.get()方法使用GET方式来进行异步请求。
它的结构为:
1 | $.get(url [,data] [, callback] [,type]) |
示例
1 | $("#feeds").load("feeds.html");//加载feeds.html的内容 |
$.get()方法参数解释如下:
$.get()方法参数解释 | ||
---|---|---|
参数名称 | 类型 | 说明 |
url | String | 请求的HTML页的URL地址 |
data(可选) | Object | 发送至服务器的key/value数据会作为QueryString附加到请求的URL中 |
callback(可选) | Function | 载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法 |
type(可选) | String | 服务器端返回内容的格式,包括xml,html,script,json,text和_default |
示例
1 2 3 | $.get("test.php", function(data){ alert("Data Loaded: " + data); }); |
2.$.post()方法
它与$.get()方法的结构和使用方式相同,不过它们之间仍然有以下区别:
- GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然, 在Ajax请求中,这种区别对用户是不可见的。
- GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)。
- GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说就可以避免这些问题。
- GET方式和POST方式传递的数据在服务器端的获取也不相同,在PHP中,GET方式的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取.
由于POST和GET方式提交的所有数据都可以通过$_REQUEST[]来获取,因此只需要改变jQuery函数就可以将程序在GET请求和POST请求之间切换。代码如下:
1 2 3 4 5 6 7 8 9 10 | $(function(){ $("#send").click(function(){ $.post("post1.php",{ username : $("#username").val(), content : $("#content").val() },function (data,textStatus){ $("#resText").appent(data); //将返回的数据添加到页面上 }); }); }) |
另外,当load()方法带有参数传递时,会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能.代码如下:
1 2 3 4 5 6 7 8 | $(function(){ $("#send").click(function(){ $("#resText").load("post1.php",{ username : $("#username").val(), content : $("#content").val() }) }) }) |
上面使用load(),$.get()和$.post()方法完成了一些常规的Ajax程序,如果还需要编写一些复杂的Ajax程序,那么就要用到jQuery中的$.ajax方法.$.ajax()方法不仅能实现与load(),$.get()和$.post()方法同样的功能,而且还可以设定beforeSend(提交前回调函数),error(请求失败后处理),success(请求成功后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数,可以给用户更多的Ajax提示信息.另外,还有一些参数,可以设置的超时时间或者页面的“最后更改”状态等等。
$.getScript()方法和$.getJson()方法
1.$.getScript()
有时候,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时,动态地创建<scrip>标签,jQuery代码如下:
1 2 3 | $(document.createElement(“script”)).attr(“src”,”test.js”).appendTo(“head”); //或者 $(“<script type=’text/javascript’ src=’test.js’ />”).appendTo(“head”); |
但这种方式并不理想。为此,jQuery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方便,并且不需要对JavaScript文件进行处理,JavaScript文件会自动执行.jQuery代码如下:
1 2 3 4 5 | $(function(){ $(‘#send’).click(function(){ $.getScript(‘test.js’); }); }) |
与其他Ajax方法一样,$.getScript()方法也有回调函数,它会在JavaScript文件成功载入后运行。例如想载入jQuery官方颜色动画插件(jquery.color.js).成功后给元素绑定颜色变化动画,就可以用到$.getScript()方法的回调函数.代码如下:
1 2 3 4 5 6 7 8 9 | $(function(){ $.getScript ('http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js',function(){ $("#go").click(function() { $(".block").animate({backgroundColor:'pink'},1000) .animate({backgroundColor:'blue'},1000); }) }) }) |
当jquery.color.js动画插件加载完毕后,单击id为”go”的按钮时,class为block的元素就有了颜色变化.
2.$.getJSON()
$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同.jQuery代码如下:
1 2 3 4 5 | $(function(){ $("#send").click(function() { $.getJSON('test.json'); }); }) |
当单击”加载”按钮后,网页上卡不到任何效果,虽然函数加载了JSON文件,但是并没有告诉JavaScript对返回的数据如何处理。为此,jQuery提供了回调函数,在回调函数里处理返回的数据。代码如下:
1 2 3 4 5 6 7 | $(function(){ $("#send").click(function() { $.getJSON('test.json',function(data){ //data:返回的数据 }); }); }) |
可以在函数中通过data变量来遍历相应的数据。$.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数。回调函数拥有两个参数,第一个为对象的成员或数组的索引,第二个为对应的变量或内容.代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(function(){ $("#send").click(function() { $.getJSON('test.json',function(data){ $('#resText').empty(); var html = '' ; $.each(data,function(commentIndex,comment){ html += '<div class="comment"><h6>' + comment['username']+':</h6><p class="para">' + comment['content'] + '</p></div>' ; }); $('#resText').html(html); }); }); }) |
在上面的代码中,当返回数据成功后,首先清空id为”resText”的元素的内容,以便重新构造新的HTML,然后通过$.each()循环函数依次遍历每个项,并将遍历出来的内容构建成HTML代码拼接起来,最后将构建好的HTML添加到id为”resText”的元素中.
不仅如此,还能通过使用JSONP姓氏的回调函数来加载其他网站的JSON数据,例如从图片网站(Flickr)搜索汽车类别的4张最新图片.代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ $("#send").click(function() { $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',function(data){ $.each(data.items,function(i,item){ $("<img class='para'/>").attr("src",item.media.m).appendTo("#resText"); if (i==3){ return false; } }); }); }); }) |
在$.each()函数中,如果需要退出each循环,只要返回false即可.
注意:
- jQuery将自动把URL里的回调函数,例如”url?callback=?”中的后一个”?”替换为正确的函数名,以便执行互调函数.
- JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Scripttags返回至客户端,通过JavaScript Callback的姓氏实现跨域访问。由于JSON只是一种含有简单括号结构的纯文本,因此许多通道都可以交换JSON消息,而由于同源策略的限制,开发人员不能在与外部服务器进行通信的时候使用XMLHttpRequest.而JSONP是一种可以绕过同源策略的方法,即通过使用JSON与<scrip>>标记相结合的方法,从服务器端直接返回可执行的JavaScript函数调用或者JavaScript对象。目前JSONP已经成为各大公司的Web应用程序跨域首选,例如Youtube GData,Goole Social Graph,Digg,豆瓣等.
$.ajax()方法
$.ajax()方法是jQuery最底层的Ajax实现.它的结构为:
1 | $.ajax(options) |
该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的,常用参数如下:
$.ajax()方法常用参数解释 | ||||
---|---|---|---|---|
参数名称 | 类型 | 说明 | ||
url | String | (默认为当前页地址)发送请求的地址 | ||
type | String | 请求方式(POST或GET)默认为GET。注意其他HTTP请求方法,例如PUT和DELETE也可以使用,但仅部分浏览器支持 | ||
timeout | Number | 设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置 | ||
data | Object或String | 发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。GET请求中将附加在URL后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如:{foo1 : “bar1”, foo2: “bar2”}转换为&foo1=bar1&foo2=bar2.如果是数组,jQuery将自动为不同值对应同一个名称.例如:{foo:[“bar1″,”bar2”]}转换为&foo=bar1&foo=bar2 | ||
dataType | String | 预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递. 可用的类型如下: xml:返回XML文档,可用jQuery处理. html:返回纯文本HTML信息,包含的script标签会在插入DOM时执行. script:返回纯文本JavaScript代码.不会自动缓存结果.除非设置了cache参数.注意在远程请求时(不在同一个域下),所有POST请求都将转为GET请求. json:返回JSON数据. jsonp:JSONP格式。使用SONP形式调用函数时,例如:myurl?callback=?,jQuery将自动替换后一个”?”为正确的函数名,以执行回调函数. text:返回纯文本字符串 | ||
beforeSend | Function | 发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求.XMLHttpRequest对象是唯一的参数.
| ||
complete | Function | 请求完成后调用的回调函数(请求成功或失败时均调用).参数:XMLHttpRequest对象和一个描述成功请求类型的字符串.
| ||
success | Function | 请求成功后调用的回调函数,有两个参数.
| ||
error | Function | 请求失败时被调用的函数.该函数有3个参数,即XMLHttpRequest对象,错误信息,捕获的错误对象(可选).Ajax事件函数如下.
| ||
global | Boolean | 默认为true.表示是否触发全局Ajax事件.设置为false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件. |
如果需要使用$.ajax()方法来进行ajax开发,那么上面这些常用的参数都必须了解。此外,$.ajax方法还有其他参数.前面用到的$.load(),$.get(),$.post(),$.getScript()和$.getJSON()这些方法,都是基于$.ajax()方法构建的,$.ajax()方法是jQuery最底层的Ajax实现,因此可以用它来代替前面的所有方法.
例如,可以使用下面的jQuery代码代替$.getScript()方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $(function(){ $("#send").click(function() { $.ajax({ type:"GET", url:"test.js", dataType:"script" }); }); }) //再例如,可以使用以下jQuery代码来代替$.getJSON()方法: $(function(){ $("#send").click(function() { $.ajax({ type:"GET", url:"test.json", dataType:"json", success: function(data){ $("#resText").empty(); var html = ""; $.each(data,function(commentIndex,comment){ html += '<div class="comment"><h6>' + comment['username']+':</h6><p class="para">' + comment['content'] + '</p></div>'; }); $('#resText').html(html); } }); }); }) |
序列化元素
1.serialize()方法
做项目的过程中,表单是必不可少的,经常用来提供数据,例如注册,登陆等。常规的方法是使表单提交到另一个页面,整个浏览器都会被刷新,而使用Ajax技术则能够异步的提交表单,并将服务器返回的数据显示在当前页面中.
前面在讲解$.get()和$.post()方法的时候,表单的HTML代码如下;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <form id="form1" action="#"> 评论: 姓名:<input type="text" name="username" id="username" /> 内容:<textarea name="content" id="content" rows="2" cols="20"></textarea> <input type="button" id="send" value="提交"/> </form> 为了获取姓名和内容,必须将字段的值逐个添加到data参数中。代码如下: $(function(){ $("#send").click(function() { $.get("get1.php",{ username : $("#username").val(), content : $("#content").val() },function(data , textStatus){ $("#resText").html(data); }); }); }) |
这种方式在只有少量字段的表单中,勉强还可以使用,但如果表单元素越来越复杂,使用这种方式在增大工作量的同时也使表单缺乏弹性。jQuery为这一常用的操作提供了一个简化的方法————serialize()。与jQuery中其他方法一样,serialize()方法也是作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。通过使用serialize()方法可以把刚才的jQuery代码改为如下:
1 2 3 4 5 6 7 | $(function(){ $("#send").click(function() { $.get("get1.php",$("#form1").serialize(),function(data , textStatus){ $("#resText").html(data); }); }); }) |
当单击”提交”按钮后,也能达到同样的效果.
即使在表单中再增加字段,脚本仍然能够使用,并且不需要做其他多余工作。
需要注意的是,$.get()方法中data参数不仅可以使用映射方式,如以下jQuery代码:
1 2 3 4 5 6 7 | { username : $("#username").val(), content : $("#content").val() } //也可以使用字符串方式,如以下jQuery代码: "username="+encodeURIComponent($('#username').val())+ "&content="+encodeURIComponent($('#content').val()) |
用字符串方式时,需要注意对字符编码(中文问题),如果不希望编码带来麻烦,可以使用serialize()方法,它会自动编码.
因为serialize()方法作用于jQuery对象,所以不光只有表单能使用它,其他选择器选取的元素也都能使用它,如以下jQuery代码:
1 | $(“:checkbox,:radio”).serialize(); |
把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化.
2.serializeArray()方法
在jQuery中还有一个与serialize()类似的方法serializeArray(),该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。jQuery代码如下:
1 2 | var fields = $(“:checkbox,:radio”).serializeArray(); console.log(fields); //用Firebug输出 |
既然是一个对象,那么就可以使用$.each()函数对数据进行迭代输出。代码如下:
1 2 3 4 5 6 7 | $(function(){ var fields = $(":checkbox,:radio").serializeArray(); console.log(fields); //用Firebug输出 $.each(fields,function(i,field){ $("#results").append(field.value+","); }); }) |
3.$.param()方法
它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化.
比如将一个普通的对象序列化:
1 2 3 | var obj = {a:1,b:2,c:3}; var k = $.param(obj); alert(k);//输出a=1&b=2&c=3 |
jQuery中的Ajax全局事件
当Ajax请求开始时,会出发ajaxStart()方法的回调;当Ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们.
jQuery的Ajax全局时间中还有几个方法,也可以在使用Ajax方法的过程中为其带来方便。
另外几个方法 | |||
---|---|---|---|
方法名称 | 说明 | ||
ajaxComplete(callback) | Ajax请求完成时执行的函数 | ||
ajaxError(callback) | Ajax请求发生错误时执行的函数,捕捉到的错误可以作为最后一个参数传递 | ||
ajaxSend(callback) | Ajax请求发送前执行的函数 | ||
ajaxSuccess(callback) | Ajax请求成功时执行的函数 | ||
注意 如果想使某个Ajax请求不受全局方法的影响,那么可以在使用$.ajax(options)方法时,将参数中的global设置为false,jQuery代码如下:
|
jQuery速查表
单击查看大图或者右键下载图片: