Jquery关于ajax有一系列的方法函数,单单知道$.ajax()显然是不够的,接下来我们对该系列的方法函数逐一研究下。
ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)
把这一套方法归到一起说,因为他们实现的功能相近,方法本身也并不复杂。
他们的作用是,为 ajax 指定全局事件的回调函数,回调函数的参数与对应事件相关。
下面是对应关系
方法 | 执行时段 | 回调函数的参数 | 执行顺序 |
ajaxComplete(callback) | 请求完成后 | event, xhr, settings | 4 |
ajaxError(callback) | 请求失败时 | event, xhr, settings, statusText | 3 |
ajaxSend(callback) | 请求发送前 | event, xhr, settings | 2 |
ajaxStart(callback) | 请求开始时 | event | 1 |
ajaxStop(callback) | 请求结束时 | event | 5 |
ajaxSuccess(callback) | 请求成功时 | event, xhr, settings, data | 3 |
如果不是特殊需求,我们都应该将这一系列全局事件处理函数绑定到document对象上:(Jquery1.8版本以上,必须绑定到document对象上才能生效)
$(document).ajaxStart(function(){ ... });
$.ajax() 方法的 global 设置可以控制是否触发这些全局事件回调,默认是true。如果不想触发全局事件回调,请将 global 设置成 false。
$.get(url, [data], [callback], [type])、$.post(url, [data], [callback], [type])
这两个方法其实是对 $.ajax() 方法的再封装,将 method 默认设成 get/post。然后4个参数分别对应 $.ajax() 设置中的 url,data,success,dataType。返回值和 $.ajax() 方法一模一样。
$.getJSON(url, [data], [callback])、$.getScript(url, [data], [callback])
这两个方法其实是对 $.get() 方法的再封装,也就是对 $.ajax() 的二次再封装,将 method 默认设成 get, dataType 默认设成 json/script。然后4个参数分别对应 $.ajax() 设置中的 url,data,success。返回值和 $.ajax() 方法一模一样。
这里补充说明一下的就是,虽然 $.getJSON() 方法通过在url拼加参数的方式,也可以实现 jsonp 请求,但这种做法不推荐就是了。
load(url, [data], [callback])
载入远程 HTML 文件代码并插入至 DOM 中。三个参数分别对应:待装入 HTML 内容网址,发送至服务器的数据,载入成功时回调函数
//加载 feeds.html 文件内容到 id 为 feeds 的容器中。 $("#feeds").load("feeds.html");
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
//功能同上面的例子,但由于传递了附加参数,改用 post 形式发送请求 $("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });
Jquery1.2以上版本,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。
//下面的代码会根据选择器,对加载到的内容进行筛选后再插入到 DOM 中 $("#links").load("/Main_Page #p-Getting-Started li");
$.ajaxSetup(settings)
设置全局 AJAX 默认选项。具体参数可参照 $.ajax()。设置全局默认选项后,所有 ajax 系列方法发出的请求在没有重新对 settings 设置的情况下,都会使用 $.ajaxSetup() 方法设定的默认值。
当然,就算未经过 $.ajaxSetup() 方法的设置,本身 settings 对象各个属性也是有默认值的, $.ajaxSetup()方法的作用仅仅是重新设定这些默认值而已。
$.ajaxPrefilter([dataTypes], handler(settings, originalSettings, jqXHR))
这个方法用于定义 ajax 请求预处理器,指定特性类型的请求,在请求发出前的处理函数。
dataTypes 参数为可选参数,类型为 string,可以指定对应 datatype 的请求才执行预处理函数。支持指定多种类型,不同的 datatype 以空格符隔开。
handler 参数为必选参数,类型为 function,它就是在请求发出前的处理函数。它包含3个参数:
settings —— ajax 请求的设置选项对象,除了既包含了调用 $.ajax() 方法传入的 settings,也包含其他默认设置属性
originalSettings —— 调用 $.ajax() 方法传入的 settings 参数对象
jqXHR —— 请求的jqXHR对象
//下面的代码定义了一个AJAX预处理器 //作用是,根据用户的自定义属性 abortOnRetry 来对请求进行检测,检测当前正在等待响应的请求中,是否有与本次相同的请求,如果有,则把尚未响应的请求给取消掉 var currentRequests = {}; $.ajaxPrefilter(function (settings, originalSettings, jqXHR) { if (settings.abortOnRetry) { if (currentRequests[settings.url]) { currentRequests[settings.url].abort(); } currentRequests[settings.url] = jqXHR; } });
我们也可以用 $.ajaxPrefilter() 方法来修改 settings 选项
$.ajaxPrefilter(function(settings, originalSettings, jqXHR) { settings.method = 'post'; });
通过 dataTypes 参数指定某些类型的 ajax 请求才执行预处理函数
//下面的预处理器仅对 dataType 为 json 和 script 的请求适用 $.ajaxPrefilter("json script", function(settings, originalSettings, jqXHR) { ... });
$.ajaxPrefilter() 方法也可以将请求重定向到另一个数据类型,并且返回该数据类型。例如,如果 URL 中含有在 isActuallyScript() 函数中设定的指定属性,那么设置成一个“script”的请求:
$.ajaxPrefilter(function (settings) { if (isActuallyScript(settings.url)) { return "script"; } });
这将确保请求被认为是“script”类型的,而且也保证了所有对 script 数据类型有效的预前过滤器,也将被应用到它。