jqAjax

jQuery.ajax()  this 指向ajax对象

用域发送请求获取数据

基本使用 前提:看一下,《你不知道的js》课程中的UI多线程-深入剖析js执行机制

参数机制

method  请求方式 get  post 具体差异参照网络课笔记

url  注明请求地址

async: 布尔值  true表示异步操作 边请求边渲染   false 必须等到数据请求完并且执行完成success函数再继续ajax之外的代码

是该方法的阻塞机制

complete  函数 请求完成之后不论成功失败 都会触发该函数的执行 执行顺序位于success 和 error函数之后  容错处理

context: 上下文

timeout: 设置请求时间 超过后结束请求, 但是依然会执行conplete函数

datatype:期待服务器如何处理数据格式  json  jsonp(跨域用) jsonp + data()使用 

设置之前

之后:

$.Callbacks() 回调  异步编程回调机制

异步编程离不开回调机制

js单线程的特点  为提高用户体验 防止页面阻塞  引入回调机制 回调函数

var cb = $.Callbacks();
        // 创建一个回调对象用于管理回调函数
        // 可以传递参数
        // once  只可以执行一次fire()
        // memory fire()之后任然可以add()添加函数 并且与前面的一起执行
        // uniqe  多次fire()一样的函数只可以运行一次
        function test(num,type) {
            console.log(num,type);
        }
        function test2(num,type) {
            console.log(num,type);
        }
        cb.add(test,test2);
        // 将函数放入特定的数组 add()方法
        cb.fire(10,"nihao");
        cb.fire(10,"nihao");
        cb.fire(10,"nihao");
        cb.fire(10,"nihao");
        cb.fire(10,"nihao");

        // 驱动加入执行队列的回调函数一般在不同条件下去执行
        // fire()方法可以传递参数作为回调函数的实际参数

$.Deferred() 异步    延迟对象

分三种 成功  失败  等待  一直到出现结果为止  done  或者   fail  

划分纤细的回调事件

可以将注册的三种事件封装到一个函数  该函数返回一个df.promise()对象 相当于一个简易版的延迟对象

只有事件注册没有事件触发  触发留给外部异步任务依据不同条件触发 所有触发函数都可以携带参数作为注册函数的实参

  var df = $.Deferred();
        // 回调状态                            触发函数   可以携带参数
        // done:成功之后执行                    resolve
        // fail:失败之后执行                    reject
        // progress:进行过程中执行              notify

        // 做一件异步的事情
        df.done(function () {
            console.log('大哥好了');
        })
        df.fail(function () {
            console.log('大哥糟了');

        })
        df.progress(function () {
            console.log('大哥稍等');

        })
        setInterval(function () {
            var score = Math.random() * 100;
            console.log(score);
            if(score > 70) {
                df.resolve();
                //驱动成功事件
            }
            if(30 < score < 50) {
                df.notify();
                // 驱动等待事件
            }
            if(score <30 ) {
                df.reject();
                // 驱动失败事件
            }
        },2000)

延迟对象核心    .then()

1、简化延迟对象注册函数的代码

        //延迟对象.then()
        var dff = $.Deferred();
        dff.then(function () {
            console.log('hahahh');
            //新创建一个延迟对象 
            var dd = $.Deferred();
            // 异步触发
            setTimeout(function () {
                dd.resolve(1500);
            })
            //返回的不再是具体的值而是一个只有注册事件没有触发事件的延迟对象
            return dd.promise();
        },function () {
            console.log('wwuwuwuwu')
        },function () {
            console.log('yyyy');
        }).then(function (me) {
            //这个done函数由上一个done函数触发根据其返回值将作为下一个then的参数实现连续调用
            console.log(me)
        })
        setInterval(function () {
            var score = Math.random() * 100;
            // console.log(score);
            if(score > 70) {
                dff.resolve();
                //驱动成功事件
            }
            if(30 < score < 50) {
                dff.notify();

                // 驱动等待事件
            }
            if(score <30 ) {
                dff.reject();
                // 驱动失败事件
            }
        },2000)

$.when() 

发布了56 篇原创文章 · 获赞 1 · 访问量 1192

猜你喜欢

转载自blog.csdn.net/qq_40819861/article/details/102579796