章节
问答
课签
笔记
评论
占位
占位

jQuery.ajax做的那些事

我们知道 Ajax 的底层实现其实是很简单的(抛开IE不说),标准的 w3c 直接提供了 XMLHttpRequest 方法。我们主要站在设计的角度来理解,如何设计出低耦合高内聚的代码 jQuery 对 Ajax 的处理主要体现在对浏览器兼容,数据的处理过滤以及各种事件的封装上,主要有以下几部分扩展:

提供快捷接口
提供底层接口
提供数据序列化
提供全局 Ajax 事件处理

分析下面一个demo

给 document 绑定 ajaxStart、ajaxComplete 回调事件,trigger 绑定一个点击事件。通过 click 触发事件发送一个 ajax 请求,并且通过 complete、done、ajaxStart、ajaxComplete 返回状态回调。

$(document).ajaxStart(function() {
    console.log(arguments)
}).ajaxComplete(function() {
    $(".log").text("Triggered ajaxComplete handler.");
});

$(".trigger").click(function() {
    //发送ajax请求
    $.ajax({
        url: "php.html",
        context: document.body,
        complete: function() {
            console.log(this)
        }
    }).done(function() {
        console.log(this)
    });
});
 

这里实现比较特别的地方,针对 ajax 提供 3 种回调方式:

  1. 内部回调 beforeSend, error, dataFilter, success 和 complete等
  2. 外部的 done、fail、when、always 等
  3. 全局 document 上都能捕获到 ajax 的每一步的回调通知 .ajaxStart(), .ajaxStop(),.ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()等

换句话说,针对ajax的请求,每一步的状态、成功、失败或者进行中,我们有 3 种方式可以监听,但是每一种还是有各自的区别:

  1. Ajax的参数回调
  2. 基于 deferred 方式的 done 回调
  3. 全局的的自定义事件的回调
那么我们思考下为什么要设计这么多接口?这么多功能怎么融合在一起的?

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?