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

$.ajxa() ——基本使用

前提：先了解js的执行机制

$.Callbacks()——回调

$.Deferred()——异步

$.when()

网络服务器链接由《渡一教育》提供

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

$.ajxa()

        //$.ajax() -- 基本使用

        // 参数 obj
        // 属性 url: 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person'   此服务器链接由《渡一教育》提供
        //      type: 请求方式                                                      如要使用转载请注明出处为渡一教育
        //      data: {} 参数 信息
        //      success: 请求成功的处理函数
        //      error:  请求失败的处理函数
        //      complete: 请求完成的处理函数 最后执行
        //      context: 改变函数上下文本
        //      timeout: 设置再规定的时间内拿不到数据，就放弃获取数据
        //      async: true false 是否异步
        //      dataType: 'jsonp'  返回数据的一个类型

        $.ajax({
            url: 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person', //发送网络请求
            type: 'GET', //获取数据的方式 
            success: function (res) {   //请求成功后处理的函数
                $.each(res.data, function (index, ele) {
                    console.log(ele);
                });
                console.log(this); //由于被下方的context的改变，所以this指向wrapper
            },
            error: function (e) { //请求失败处理的函数
                console.log(e.status, e.statusText);
            },
            complete: function () { //请求完成的处理函数，最后才会执行

            },
            context: $('.wrapper')   //改变函数上下文
        });

 

发送网络请求，请求数据

$.Callbacks()  回调

参数有：noce、memory、unique、stopOnFlase    (常用的有noce、memory)

 

callbacks（）还可以传入参数，我们先来看下不传参数noce输出的结果是什么样子的

接下来我们再来看下传入参数noce的结果

 我们来看一下不传入memory

先fire后add是什么结果

 我们再来看一下传入参数memory

 

 我们再来看一下参数unique有传跟没传的区别

不传入参数：

 

 

 传入参数：

 

 我们再来看一下参数stopOnFalse有传跟没传的区别

不传入参数：

 

传入参数的区别：

 

$.Deferred()  异步

 

     done 注册成功   fail 注册失败   progress 正在进行
　　　  resolve       reject           notify 

 

        var df = $.Deferred();
        //done 成功   fail 失败   progress 正在进行
        //resolve     reject       notify   //触发方法

        
        //注册成功的回调函数
        df.done(function(){
            console.log('成功了！');
        });
        //注册失败的回调函数
        df.fail(function(){
            console.log('失败了！');
        });
        //注册进行时的函数
        df.progress(function(){
            console.log('等待中···');
        })

　　　　　　
        setInterval(function(){   //做一件异步的事件
            var score = Math.random() * 100;
            if(score > 60){   //大于60为成功
                df.resolve();
            }else if(score < 50){ //小于60为失败
                df.reject();
            }else{              //随机数在60-50之间为正在进行时
                df.notify();
            }
        },1000)

 但是现在有一个问题，就是除了异步事件里面可以触发状态，别人在外面也可以直接触发状态，所以我们现在就来做不会让别人触发

 

.then()   跟deferred()是相互挂钩的

可用于优化回调地狱

        function createScore() {
            var df = $.Deferred();
            setInterval(function () {
                var score = Math.random() * 100;
                if (score > 60) {   //大于60为成功
                    df.resolve('发工资了');
                } else if (score < 50) { //小于60为失败
                    df.reject('月末了');
                } else {              //随机数在60-50之间为正在进行时
                    df.notify('正在上班');
                }
            }, 1000);

            //done fail progress
            return df.promise();  //只返回注册方法，不返回出执行方法
        }

        var df = createScore();
//.then可以传三个函数，第一个为注册成功后执行的函数，第二个为请求失败后执行的函数，第三个为正在进行时的执行函数
        df.then(function (ms) {
            console.log('有钱了' + ms);
            return '泡妞走起';  //返回出来的值会给下一个then下面的函数作为参数传进
        }, function (ms) {
            console.log('没钱了' + ms);
            return '在家宅着';
        }, function (ms) {
            console.log('继续加油' + ms);
            return '努力上班';
        }).then(function (sm1) { //上一个then返回的值会被作为这个函数的参数
            console.log(sm1 + '吃大餐');
        }, function (sm2) {
            console.log(sm2 + '吃泡面');
        }, function (sm3) {
            console.log(sm3 + '免费工作餐');
        }) 

 

$.when() 

跟deferrd()是相互挂钩的

    //$.when()
    //参数可以是一个或多个延迟对象
    //返回值是promise对象
    $.when( df1, df2, df3).then(function(){
        console.log('done');
    }, function(){
        console.log('fail');
    });
    //这个方法比较简单就不演示了，我给大家用文字描述以下就可以了吧！
    //when是当的艺术，简单来说就是当什么条件下就执行下下面的函数
    //我们上面写着，括号里面的三个函数
    //相当于Ajax发送了三次请求，如果三次都请求成功就执行输出下面的done的函数
    //如果有三次中一次或两次、三次请求失败，那么就会执行fail的函数