jQuery中的Ajax

关于

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第二层是$.load(),$.get(),和$.post()方法,第三层是$.getScript()和$.getJSON()方法。首先介绍第二层的方法,因为其使用频率很高.

load()方法

  1.载入HTML文档
  

 load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。它的结构为:

load()方法参数解释如下

load()方法参数解释
参数名称类型说明
urlString请求HTML页面的URL地址
data(可选)Object发送至服务器的key/value数据
callback(可选)Function请求完成时的回调函数

2.筛选载入的HTML文档

  load()方法的URL参数的语法结构为:”url selector”.注意,URL和选择器之间有一个空格.
例如,只需要加载test.html页面中class为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代码如下:

注意:在load()方法中,无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发.对应下面将介绍的$.ajax()方法中的complete回调函数

$.get()方法和$.post()方法

load()方法通常用来从WEB服务器上获取静态的数据文件,然而这并不能体现Ajax的全部价值.在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是后面要讲解的$.ajax()方法).

注意:$.get()和$.post()方法是jQuery中的全局函数,而在此之前讲的jQuery方法都是对jQuery对象进行操作的. 1.$.get()方法

$.get()方法使用GET方式来进行异步请求。
它的结构为:

示例

$.get()方法参数解释如下:

$.get()方法参数解释
参数名称类型说明
urlString请求的HTML页的URL地址
data(可选)Object发送至服务器的key/value数据会作为QueryString附加到请求的URL中
callback(可选)Function载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选)String服务器端返回内容的格式,包括xml,html,script,json,text和_default

示例

jQuery LOGO
image-1931

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请求之间切换。代码如下:

另外,当load()方法带有参数传递时,会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能.代码如下:

上面使用load(),$.get()和$.post()方法完成了一些常规的Ajax程序,如果还需要编写一些复杂的Ajax程序,那么就要用到jQuery中的$.ajax方法.$.ajax()方法不仅能实现与load(),$.get()和$.post()方法同样的功能,而且还可以设定beforeSend(提交前回调函数),error(请求失败后处理),success(请求成功后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数,可以给用户更多的Ajax提示信息.另外,还有一些参数,可以设置的超时时间或者页面的“最后更改”状态等等。

$.getScript()方法和$.getJson()方法

1.$.getScript()

有时候,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时,动态地创建<scrip>标签,jQuery代码如下:

  但这种方式并不理想。为此,jQuery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方便,并且不需要对JavaScript文件进行处理,JavaScript文件会自动执行.jQuery代码如下:

与其他Ajax方法一样,$.getScript()方法也有回调函数,它会在JavaScript文件成功载入后运行。例如想载入jQuery官方颜色动画插件(jquery.color.js).成功后给元素绑定颜色变化动画,就可以用到$.getScript()方法的回调函数.代码如下:

当jquery.color.js动画插件加载完毕后,单击id为”go”的按钮时,class为block的元素就有了颜色变化.

2.$.getJSON()

$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同.jQuery代码如下:

当单击”加载”按钮后,网页上卡不到任何效果,虽然函数加载了JSON文件,但是并没有告诉JavaScript对返回的数据如何处理。为此,jQuery提供了回调函数,在回调函数里处理返回的数据。代码如下:

可以在函数中通过data变量来遍历相应的数据。$.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数。回调函数拥有两个参数,第一个为对象的成员或数组的索引,第二个为对应的变量或内容.代码如下:

  在上面的代码中,当返回数据成功后,首先清空id为”resText”的元素的内容,以便重新构造新的HTML,然后通过$.each()循环函数依次遍历每个项,并将遍历出来的内容构建成HTML代码拼接起来,最后将构建好的HTML添加到id为”resText”的元素中.
不仅如此,还能通过使用JSONP姓氏的回调函数来加载其他网站的JSON数据,例如从图片网站(Flickr)搜索汽车类别的4张最新图片.代码如下:

在$.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()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的,常用参数如下:

$.ajax()方法常用参数解释
参数名称类型说明
urlString(默认为当前页地址)发送请求的地址
typeString请求方式(POST或GET)默认为GET。注意其他HTTP请求方法,例如PUT和DELETE也可以使用,但仅部分浏览器支持
timeoutNumber设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置
dataObject或String发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。GET请求中将附加在URL后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如:{foo1 : “bar1”, foo2: “bar2”}转换为&foo1=bar1&foo2=bar2.如果是数组,jQuery将自动为不同值对应同一个名称.例如:{foo:[“bar1″,”bar2”]}转换为&foo=bar1&foo=bar2
dataTypeString预期服务器返回的数据类型。如果不指定,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:返回纯文本字符串
beforeSendFunction 发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求.XMLHttpRequest对象是唯一的参数.
completeFunction请求完成后调用的回调函数(请求成功或失败时均调用).参数:XMLHttpRequest对象和一个描述成功请求类型的字符串.
successFunction请求成功后调用的回调函数,有两个参数.

  1. 由服务器返回,并根据dataType参数进行处理后的数据.
  2. 描述状态的字符串

errorFunction请求失败时被调用的函数.该函数有3个参数,即XMLHttpRequest对象,错误信息,捕获的错误对象(可选).Ajax事件函数如下.

globalBoolean默认为true.表示是否触发全局Ajax事件.设置为false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件.

如果需要使用$.ajax()方法来进行ajax开发,那么上面这些常用的参数都必须了解。此外,$.ajax方法还有其他参数.前面用到的$.load(),$.get(),$.post(),$.getScript()和$.getJSON()这些方法,都是基于$.ajax()方法构建的,$.ajax()方法是jQuery最底层的Ajax实现,因此可以用它来代替前面的所有方法.
例如,可以使用下面的jQuery代码代替$.getScript()方法:

序列化元素

1.serialize()方法

做项目的过程中,表单是必不可少的,经常用来提供数据,例如注册,登陆等。常规的方法是使表单提交到另一个页面,整个浏览器都会被刷新,而使用Ajax技术则能够异步的提交表单,并将服务器返回的数据显示在当前页面中.
前面在讲解$.get()和$.post()方法的时候,表单的HTML代码如下;

  这种方式在只有少量字段的表单中,勉强还可以使用,但如果表单元素越来越复杂,使用这种方式在增大工作量的同时也使表单缺乏弹性。jQuery为这一常用的操作提供了一个简化的方法————serialize()。与jQuery中其他方法一样,serialize()方法也是作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。通过使用serialize()方法可以把刚才的jQuery代码改为如下:

当单击”提交”按钮后,也能达到同样的效果.
即使在表单中再增加字段,脚本仍然能够使用,并且不需要做其他多余工作。
需要注意的是,$.get()方法中data参数不仅可以使用映射方式,如以下jQuery代码:

用字符串方式时,需要注意对字符编码(中文问题),如果不希望编码带来麻烦,可以使用serialize()方法,它会自动编码.

因为serialize()方法作用于jQuery对象,所以不光只有表单能使用它,其他选择器选取的元素也都能使用它,如以下jQuery代码:

把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化.

2.serializeArray()方法

在jQuery中还有一个与serialize()类似的方法serializeArray(),该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。jQuery代码如下:

既然是一个对象,那么就可以使用$.each()函数对数据进行迭代输出。代码如下:

3.$.param()方法

它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化.
比如将一个普通的对象序列化:

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速查表

单击查看大图或者右键下载图片:

jQuery速查表
image-1932

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据