jQuery(五)Ajax
六、jQuery with Ajax
Ajax是web应用的编程技术,它使用HTTP脚本来按需请求数据而不会导致页面刷新。Ajax在现代的Web应用中非常的重要,jQuery也包含了Ajax的一些实用工具使它的使用更加简单。
jQuery定义了1个高级别的实用方法(load),4个高级别的实用函数(getScript,getJSON,get,post)。这些高级别的方法或函数都是基于一个低级别的函数jQuery.ajax(). 接下来,我们首先了解高级别的方法和函数,然后对jQuery.ajax()进行详细地说明,虽然也许我们不会显示直接地使用jQuery.ajax(),但是理解它对于全面理解这些高级别的函数或方法会很有帮助。
1、Ajax实用方法:load()
load方法最简单,传入一个URL,异步请求url的内容,然后把请求的内容插入到所选的每一个页面元素上,或者替换元素上已有内容。如:setInterval(function(){$("#stats").load("status_report.html");},60000);
注意:如果load传入的是一个函数,其实是注册一个load事件的处理器,而不是一个ajax方法。
如果加载一个页面的部分内容,可以在页面后面跟一个选择器,用空格分开,如:$("#temp").load("weather_report.html #temperature");
除了url参数外,load还有2个可选的参数:
第二个参数用来表示请求的附加参数,可以是一个字符串或者一个对象。如果是字符串,直接附加到url后面,前面加上?或者&。如果是个对象,对象会转成用&分隔的键值对字符串然后附加到url后面。如:
$("#temp").load("weather_report.html","zipcode=518000"); $("#temp").load("weather_report.html",{zipcode:"518000",unit:"F"});
如果没有附加参数,请求是GET方式,否则为POST方式。
第三个参数为一个回调函数,回调函数在请求成功内容加载完成或者请求失败时被调用。如果没有附加参数,回调函数可以作为第二个参数,否则必须是第三个参数。
这个回调函数会在jQuery对象中的每个元素上调用一次,且调用时传递3个参数:完整的url文本,状态码字符串,用来加载url的XMLHttpRequest对象。这里的状态码不是http状态码,而是jQuery定义的状态码,它们是success,error,timeout,notmodified,parsererror。
2、Ajax实用函数
(1)jQuery.getScript()
异步加载和执行一个javascript代码文件,如:jQuery.getScript("http://www.winson.com/js/widget.js");
也可以传递一个回调方法作为第二个参数,如:jQuery.getScript("js/jquery.my_plugin.js",function(){$("div").my_plugin();});
(2)jQuery.getJSON()
(3)jQuery.get(),jQuery.post()
3、jQuery.ajax()
所有jQuery的Ajax实用函数和方法最终都是调用jQuery.ajax()函数实现的,这是jQuery库中最复杂的一个函数。这个函数只有一个参数,是一个对象。对象的属性指定了Ajax请求的方方面面的细节。
如jQuery.getScript(url,callback)等价于:jQuery.ajax({type:"GET",url:url,data:null,dataType:"script",success:callback});你可以设置更多的属性。有一些属性没有指定时会使用默认值,可以通过jQuery.ajaxSetup()来对属性的默认值进行设置,如:jQuery.ajaxSetup({timeout:2000,cache:false}); 下面来简单讲一下这些属性:
(1) 常用属性:
type: 值为:"GET", "POST" "PUT" "DELETE"
url:请求的路径
data:请求的附加数据
dataType: 响应的数据类型,合法值有:"script" "text" "xml" "json" "jsonp" "html"
contentType:请求头的HTTP Content-Type
timeout:超时设置
cache:是否缓存,对于GET请求,如果设置为false不缓存的话,会在请求的url加上 _=timestamp
ifModified:当设置为true的时候,如果请求的url在上次请求后没有更改,服务器返回一个HTTP 403. 此时jQuery也认为请求成功。
global:这个属性用来设置jQuery是否触发描述Ajax请求进度的事件,默认为true。如果设为false,将禁止所有Ajax事件的触发。(Ajax事件下一节会讲)
(2)回调属性:用来描述在Ajax请求的各个阶段的回调函数。
context:回调函数执行的上下文,即this的值。该属性没有默认值,如果不设置,它的值为ajax()的参数对象。
beforeSend:Ajax请求发送到服务器前的回调函数,可以使用它来设置自定义的HTTP头,如果改回调返回false,那么请求会被取消。
success:请求成功的回调函数。第一个参数为响应的内容,第二个为jQuery状态码,第三个为XMLHttpRequest对象。
error:请求失败的回调函数。第一个参数为XMLHttpRequest对象(如果存在),第二个为jQuery状态码,第三个为Error对象。
complete:请求结束的回调回事,在成功或者失败都会被调用。第一个参数为XMLHttpRequest对象,第二个为jQuery状态码。
(3)非常用属性及钩子(hook)
async:是否异步请求,如果设置为false,jQuery会阻塞,知道服务器返回响应。
dataFilter:使用这个回调来对响应的数据进行过滤或预处理,第一个参数为服务器返回的原始数据(字符串或者Document对象),第二个参数为dataType属性的值。
jsonp:当设置dataType为jsonp时,你的url或者data属性里会包含一个参数”jsonp=?“,这个属性指定?所表示的值,默认为callback。
jsonpCallBack:设置这个属性,将会组织success,complete回调和其他正常的回调。
processData:如果data属性是一个对象,jQuery把对象转成使用标准的HTML applcation/x-www-form-urlencoded格式的字符串,把这个属性设置为false,可以避免这个转换过程。
scriptCharset:对使用<script>元素方式的异源script或者jsonp请求,这个属性表示该元素的字符集属性。对应基于XMLHttpRequest的请求没有影响。
traditional:data属性对象转成字符串的方式在jQuery1.4中进行了更改,设置这个属性为false,仍然使用旧的方式进行转换。
username,password:如果请求需要基于密码的验证,使用这两个属性来指定用户名和密码。
xhr:这个属性指定一个获取XMLHttpRequest的工厂函数,这个函数没有参数,必须返回一个实现了XMLHttpRequest API的对象。这个低级别的回调,允许你创建自己的XMLHttpRequest包装对象,提供更多的方法。
4、Ajax事件
jQuery.ajax()有四个回调属性:beforeSend,success,error,complete。jQuery的Ajax函数在执行时会触发自定义的事件,这些事件在不同的Ajax请求阶段被触发。这些自定义的事件类型,注册事件处理器的函数,以及与回调属性的对应关系为:
Event Type | Handler Registration Method | Callback属性 |
"ajaxSend" | ajaxSend() | beforeSend |
"ajaxSuccess" | ajaxSuccess() | sucess |
"ajaxError" | ajaxError() | error |
"ajaxComplete" | ajaxComplete() | complete |
"ajaxStart" | ajaxStart() | |
"ajaxStop" | ajaxStop |
这些事件不是浏览器产生和触发的,而是jQuery自定义的,所以传递给事件处理器的事件对象中不会包含很多信息。前四个事件除了传递Event事件对象外,还有2个额外的参数,第一个为XMLHttpRequest对象,第二个为选项对象,比如ajaxSend事件处理器可以使用这个参数来设置自定义的HTTP头。ajaxError事件触发是,还会有第三个额外参数,它是一个Error对象。不过奇怪的是,这些事件处理器不会传递一个jQuery的状态码,状态码需要从XMLHttpRequest对象上获取,这点和回调属性不同。
ajaxStart和ajaxStop是表示Ajax相关网络活动的开始和结束。当没有Ajax请求时,一个新的Ajax请求产生是触发ajaxStart事件,如果一个新的ajax请求产生是,还存在之前的ajax请求没有结束,此时不会触发ajaxStart事件。ajaxStop事件时在最后一个ajax请求结束时触发,此时没有正在执行的其他ajax请求。这对事件没有对应的回调属性,事件处理器也不不想其他4个事件一样带有额外的参数。
这对事件在显示”正在加载“动画或者网络正在活动的图标时非常有用,如:
$("#loading_animation").bind({ajaxStart:function{$(this).show();},ajaxStop:function{$(this).hide();}});
需要记住的是,这个事件的触发可以通过设置global属性为false而禁止。