$.ajax()

  $.Callbacks()

  $.Deferred()

  .then()

  $.when()

-----------------------------------------------------------------

  $.ajax()

向后端请求数据。

  参数:obj  对象

对象里面放啥, 放下面这些   ↓    以下为常用的 属性。

  url : 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person'       (渡一教育提供)

  type : 请求方式, 一般最常用的 有 GET 和 POST

  data : { }  一般,接口的 文档, 会告诉你,你需要什么数据,就传什么参数

  success : 请求成功后的处理函数

  error : 请求失败后的处理函数

  complete : 请求完成后的处理函数 最后执行。  无论 请求是否成功, 到最后都会执行

  context : 改变函数执行上下文。   ajax 里面的函数, this  为 ajax 对象。但是把,我们一般操作的时候,并不希望是他, 所以可以传 外面的 值来改变

  timeout :  这个值一般不会用到。设置请求超时时间(毫秒)  设置一个值, 如果 请求的时间超过 这个时间,那么就不请求了。

  async : true  false  是否异步,  默认是 true, 本身 ajax 就是异步的,因为js 是单线程, 不可能一直在等你 请求完后 再执行其他js 操作吧

  dataType :  预期服务器返回的数据类型。  你期待服务器给你返回的是 什么类型的数据。  一般不会用到他的,他会智能识别。

无论请求成功或者失败, 函数都要接受一个参数,成功,接受的是数据,失败接受的是 错误信息

下面看看 请求成功 : 

请求失败 :

  $.Callbacks()

管理回调函数 

var callbacks = $.Callbacks() 

方法:.add()  把 回调函数, 添加到 callbacks 里面去  .fire()  执行 callbacks 里面的全部函数  

var callbacks = $.Callbacks(参数)

可填参数:

once   让回调函数,只执行一次

memory  无论你在哪里执行了回调函数,  你后面添加的新 的回调函数, 都会执行。

unique  去重,  去掉重复的 回调函数

stopOnFalse  当在执行回调函数,回调函数里面有 return false 的时候,会停止。不会执行下个回调函数

 

once

memory

unique

stopOnFalse

 callbacks() 原理: 这里只实现了 once  和 memory 参数的处理

 1 jQuery.MyCallbacks = function () { //once memory
2 var ags = arguments[0] || ''; //拿 传进来的 参数 ↑
3 var list = []; // 装 add进来的 函数,
4 var fireIndex = 0;
5 var fireAgs = [];
6 var lock = false; //控制 memory 参数
7
8 function fire() { //执行 add进去的 函数
9 lock = true;
10 for (; fireIndex < list.length; fireIndex++) {
11 list[fireIndex].apply(window, fireAgs);
12 }
13 if (ags.indexOf('once') != -1) { //判断, 如果有 once 参数,就 清空 list数组
14 list = [];
15 fireIndex = 0;
16 }
17
18 }
19
20 return { // 返回 add 函数, 和 fire 函数,供通过callbacks调用
21 add: function (func) {
22 list.push(func);
23 if (lock && ags.indexOf('memory') != -1) {
24 fire();
25 }
26 return this;
27 },
28 fire: function () {
29 fireIndex = 0; //再次调用的时候, 把索引归0 让他再循环一遍,就可以达到 再次执行
30 fireAgs = arguments;
31 fire(); //执行
32 }
33 }
34 }

  $.Deferred()

方法如下:

  .done()    注册 成功时执行的回调函数  

  .fail()  注册 失败时执行的回调函数

  .progress()  注册 正在进行时 执行的回调函数

  .resolve()  要执行成功的回调函数 得使用该方法  .resolve()

  .reject()   要执行失败的回调函数 得使用该方法  .reject()

  .notify()  要执行 正在进行时的回调函数, 得使用该方法 .notify()

  .promise()  如果在函数里面 创建 deferred变量, 在函数里面 return deferred.promise() 方法, 那么外部只能拿到 注册方法, 使用不了 执行方法。

 原理如下:

 1 jQuery.MyDeferred = function(){
2 var deferred = {};
3 var lock = true;
4
5 var arr = [
6 [jQuery.MyCallbacks('once memory'), 'done', 'resolve'],
7 [jQuery.MyCallbacks('once memory'), 'fail', 'reject'],
8 [jQuery.MyCallbacks('memory'), 'progress', 'notify']
9 ];
10
11 for(var i = 0; i < arr.length; i ++){
12 deferred[arr[i][1]] = (function(index){
13 return function(func){
14 arr[index][0].add(func);
15 }
16 })(i);
17 deferred[arr[i][2]] = (function(index){
18 return function(){
19 var ags = arguments;
20 if(lock){
21 arr[index][0].fire.apply(window, ags);
22 arr[index][2] == 'resolve' || arr[index][2] == 'reject' ? lock = false : '';
23 }
24 }
25 })(i)
26 }
27 return deferred;
28 }

  .then()

简化$.Deferred() 注册回调函数的写法, 第一个函数 为 done,  第二个函数为 fail,  第三个函数为 progress。

回调函数可以返回值 给 下个 .then() 接收处理,如果返回的是 延迟对象 Deferred。 那么下个 .then 注册的回调函数 就是你返回的 Deferred 上注册详细使用请看以下 小例子、

简化 写法:

返回值

返回新的 deferred 对象

  $.when()

参数: 可以是一个或多个延迟对象(Deferred)

返回值 是 promise 对象

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <script src="./jquery/jquery.js"></script>
11 <script>
12
13 $.when(a(), b(), c()).then(function(){
14 console.log('成功');//当 三个延迟对象,都执行 resolve的时候, 才会执行 .then 的 第一个回调
15 },function(){
16 console.log('失败');//当 三个延迟对象,有一个执行了 reject 的时候 就会触发.then 的 第二个回调
17 })
18
19 function a(){
20 var de = $.Deferred();
21 setInterval(function(){
22 var value = Math.random() * 100;
23 if(value > 20){
24 de.resolve();
25 }else{
26 de.reject();
27 }
28 }, 1000);
29 return de.promise();
30 }
31
32 function b(){
33 var de = $.Deferred();
34 setInterval(function(){
35 var value = Math.random() * 100;
36 if(value > 20){
37 de.resolve();
38 }else{
39 de.reject();
40 }
41 }, 1000);
42 return de.promise();
43 }
44
45 function c(){
46 var de = $.Deferred();
47 setInterval(function(){
48 var value = Math.random() * 100;
49 if(value > 20){
50 de.resolve();
51 }else{
52 de.reject();
53 }
54 }, 1000);
55 return de.promise();
56 }
57 </script>
58 </body>
59 </html>

下一章:利用 $.Deferred() 和 .then() 优化回调地狱

jQuery 第十章 工具方法-高级方法 $.ajax() $.Callbacks() .....的更多相关文章

  1. jQuery笔记之工具方法—高级方法Ajax

    $.ajxa() ——基本使用 前提:先了解js的执行机制 $.Callbacks()——回调 $.Deferred()——异步 $.when() 网络服务器链接由<渡一教育>提供 --- ...

  2. jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()

    本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type 在javascript中对变量类型的判断中,我们讲解了了jqu ...

  3. JQuery extend()与工具方法、实例方法

    使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul' ...

  4. jQuery笔记之工具方法extend插件扩展

    jQuery工具方法 $.extend()插件扩展(工具方法) $.fn.extend()插件扩展(实例方法) 浅度克隆.深度克隆 两个方法基本是一样的,唯一不同的就是调用方式不一样 -------- ...

  5. jQuery 第九章 工具方法之插件扩展 $.extend() 和 $.fn.extend()

    $.extend() $.fn.extend() -------------------------------------------------- $.extend() 插件扩展(工具方法) jq ...

  6. jQuery笔记之工具方法—Ajax 优化回调地狱

    在上一篇文我们说到了回调地狱不好的地方,今天我们看看怎么来优化它,让它可以运用到实际开发中. 什么是回调地狱?回调地狱就是一个函数里面嵌套了所有功能函数,然后缩略图形成一个三角形. 这样的代码可复用性 ...

  7. jquery-12 jquery中的工具方法有哪些

    jquery-12 jquery中的工具方法有哪些 一.总结 一句话总结:四个较常用方法.1.isArray();2.isFunction();3.isEmptyObejct();4.trim(); ...

  8. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  9. jquery源码解析:jQuery延迟对象Deferred(工具方法)详解1

    请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, w ...

随机推荐

  1. Go 包管理历史以及 Go mod 使用

    之前也写过 Go 管理依赖工具 godep 的使用,当时看 godep 使用起来还是挺方便,其原因主要在于有总比没有强.关于依赖管理工具其实还是想从头聊聊这个需求以及大家做这个功能的各种出发点. GO ...

  2. Filebeat 根据不同的日志设置不同的索引

    平时在物理机上使用 Filebeat 收集日志时,会编写多个 filebeat 配置文件然后启动多个 filebeat 进程来收集不同路径下的日志并设置相对应的索引.那么如果将所有的日志路径都写到一个 ...

  3. Linux 系统编程 学习 总结

    背景 整理了Liunx 关于 进程间通信的 很常见的知识. 目录 与 说明 Linux 系统编程 学习:000-有关概念 介绍了有关的基础概念,为以后的学习打下基础. Linux 系统编程 学习:00 ...

  4. python 学习小记之冒泡排序

    lst =[11,22,44,2,1,5,7,8,3] for i in range(len(lst)):     i = 0     while i < len(lst)-1:         ...

  5. XJOI 夏令营501-511测试11 统计方案

    小B写了一个程序,随机生成了n个正整数,分别是a[1]..a[n],他取出了其中一些数,并把它们乘起来之后模p,得到了余数c.但是没过多久,小B就忘记他选了哪些数,他想把所有可能的取数方案都找出来.你 ...

  6. php 之根据mysql字段 批量生成 array 数组

    ci框架 验证字段 需要 生成类似为: array('field' => 'admin_id','label' => '账号ID','rules' => 'integer'),    ...

  7. 1.1 Prism安装

    Prism框架有很多安装包,即便用了很长一段时间,也可能会不知道如何安装框架.细心分析包的依赖关系,发现所有包均依赖与依赖注入扩展插件,以使用Unity为例,Prism.Unity依赖Prism.Wp ...

  8. 【故障公告】Memcached 的“惹祸”,不知在为谁背锅

    在 .NET 5.0 背锅 . Memcached 的惹祸 .缓存雪崩之后,我们没有找到问题的真正原因,我们知道没有找到根源的故障总是会再次光临的,不是在这周就是在下周,也许就在双11前后. 就在今天 ...

  9. C的输入&输出

    格式说明符 输出 %d整型输出,%ld长整型输出, %o以八进制数形式输出整数, %x以十六进制数形式输出整数,或输出字符串的地址. %u以十进制数输出unsigned型数据(无符号数).注意:%d与 ...

  10. 基于gin的golang web开发:使用数据库事务

    在前文介绍访问数据库时介绍了github.com/jmoiron/sqlx包,本文基于这个包使用数据库事务. defer 在使用数据库事务之前,首先需要了解go语言的defer关键字.defer是go ...