JQuery 中 Ajax 事件及各个参数的含义

前言

页面请求中经常会用到 AJax,里面也有很多的事件,可能很多人没有去看它,今天给大家详细的说一下里面的事件以及用法含义,我觉得有些还是挺有用的。

有两种事件,一种是局部事件,一种是全局事件:
局部事件:通过 $.ajax 来调用并且分配。

  • $.ajax({
  • beforeSend: function(){
  • // 请求开始前触发这个
  • },
  • complete: function(){
  • // 不管是请求失败还是成功都会触发这个
  • }
  • });

全局事件,可以用 bind 来绑定,用 unbind 来取消绑定。这个跟 click/mousedown/keyup 等事件类似。但他可以传递到每一个 DOM 元素上。

  • $("#loading").bind("ajaxSend", function(){ //使用bind
  • $(this).show();
  • }).ajaxComplete(function(){ //直接使用ajaxComplete
  • $(this).hide();
  • });

当然,你某一个 Ajax 请求不希望产生全局的事件,则可以设置 global:false

  • $.ajax({
  • url: "test.html",
  • global: false,
  • });

事件的顺序如下:
ajaxStart 全局事件
开始新的 Ajax 请求,并且此时没有其他 ajax 请求正在进行。
beforeSend 局部事件
当一个 Ajax 请求开始时触发。如果需要,你可以在这里设置 XHR 对象。
ajaxSend 全局事件
请求开始前触发的全局事件
success 局部事件
请求成功时触发。即服务器没有返回错误,返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功
error 局部事件
仅当发生错误时触发。你无法同时执行 success 和 error 两个回调函数。
ajaxError 全局事件
全局的发生错误时触发
complete 局部事件
不管你请求成功还是失败,即便是同步请求,你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发
ajaxStop 全局事件
当没有 Ajax 正在进行中的时候,触发。

局部事件回调的参数在文档中写的很清楚了,这里就不累述了。

全局事件中,除了 ajaxStart 和 ajaxStop 之外,其他的事件都有 3 个参数
eventXMLHttpRequestajaxOptions
第一个是事件,第二个是 XHR 对象,第三个参数最有用,是当时调用这个 ajax 的时候的参数。
对于 ajaxError, 还有第四个参数 thrownError,只有当异常发生时才会被传递。
我们可以利用 ajaxOptions 来写一个全局的 ajax 事件。
比如:

  • $("#msg").beforeSend(function(e,xhr,o) {
  • $(this).html("正在请求"+o.url);
  • }).ajaxSuccess(function(e,xhr,o) {
  • $(this).html(o.url+"请求成功");
  • }).ajaxError(function(e,xhr,o) {
  • $(this).html(o.url+"请求失败");
  • });

对于这个例子,
这样我们就可以很方便的全局地在某个地方显示当前的 ajax 状态。
当然,之前说了,第三个参数实际上是传递给 ajax 的参数。get/post/load/getScript/getJSON 等方法本质上都是调用 ajax 方法的,所以 ajaxOptions.url 属性总是有效的。

还有更丰富的例子。
如果你用 ajax 调用,还可以传递自定义参数。下面的例子我就自定义了一个 msg 参数给了 ajax 调用
// 自定义参数 msg

  • $.ajax({url:"test1.html",type:"get",msg:"页面一"});
  • $.ajax({url:"test2.html",type:"get",msg:"页面二"});
  • $.ajax({url:"test3.html",type:"get",msg:"页面三"});
  • $.ajax({url:"test4.html",type:"get",msg:"页面四"});

// 这里就能获取到自定义参数 msg
// 这可以用来区别对待不同的 ajax 请求。

  • $("#msg").beforeSend(function(e,xhr,o) {
  • $(this).html("正在请求"+o.msg);
  • }).ajaxSuccess(function(e,xhr,o) {
  • $(this).html(o.msg+"请求成功");
  • }).ajaxError(function(e,xhr,o) {
  • $(this).html(o.msg+"请求失败");
  • });

最后对于 load 方法,还有话说。
其他的简易 ajax 方法,比如 get,post,getJSON 等,他们的回调函数都是设置了 success 回调。
而只有 load 设置的其实是 complete 回调。
所以,load 里设置的回调函数的参数应该有 2 个。
XMLHttpRequest 和 textStatus
但实际上也并非如此。
load 的回调有三个参数
XMLHttpRequest.responseTexttextStatusXMLHttpRequest
所以,你可以在 load 的回调里
通过 textStatus==”success” 或者 textStatus==”error” 来判断是否调用成功。
或者用 XMLHttpRequest.status 属性判断是 200 还是 404 或者其他的。

这点上,我认为比普通的 get/post 等方法更先进。如果要单数设置每 get 的 error 是不可能的。但是设置一个全局的 ajaxError 其实也是不错的选择。

API:http://api.jquery.com/Ajax_Events/

CTRL+D快速收藏,欢迎常来喔

未经允许不得转载:作者: 南图, 转载或复制请以 超链接形式 并注明出处 南图博客
原文地址: 《JQuery 中 Ajax 事件及各个参数的含义》 发布于2020年8月22日

本文链接:JQuery 中 Ajax 事件及各个参数的含义 - https://www.ntaaa.cn/1271.html

本文标签:

发表评论
0 评论
还没有评论,快来抢沙发吧!