zoukankan      html  css  js  c++  java
  • 模拟image的ajaxPrefilter与ajaxTransport处理

        //////////////////////////////////////////////////////////////////
        // options 是请求的选项                                               //
        // originalOptions 值作为提供给Ajax方法未经修改的选项,因此,没有ajaxSettings设置中的默认值 //
        // jqXHR 是请求的jqXHR对象                                            //
        //////////////////////////////////////////////////////////////////
        $.ajaxPrefilter("image", function(options, originalOptions, jqXHR) {
            //通过预处理器转化类型
            if (options.test) {
                options.type = 'GET'
            }
            //增加前缀
            options.url = "http://img.mukewang.com/" + options.url
        });
    
    
        ///////////////////////
        // 请求分发器 transports //
        ///////////////////////
        $.ajaxTransport("image", function(s) {
            if (s.type === "GET" && s.async) {
                var image;
                return {
                    send: function(_, callback) {
                        image = new Image();
                        function done(status) {
                            if (image) {
                                var statusText = (status == 200) ? "success" : "error",
                                    tmp = image;
                                image = image.onreadystatechange = image.onerror = image.onload = null;
                                callback(status, statusText, {
                                    image: tmp
                                });
                            }
                        }
                        image.onreadystatechange = image.onload = function() {
                            done(200);
                        };
                        image.onerror = function() {
                            done(404);
                        };
                        show(s.url)
                        image.src = s.url;
                    },
                    abort: function() {
                        if (image) {
                            image = image.onreadystatechange = image.onerror = image.onload = null;
                        }
                    }
                };
            }
        });
    
    
        $("#test").click(function(){
    
             //执行一个异步的HTTP(Ajax)的请求。
            var ajax = $.ajax({
                test     : true, //测试
                url      : '547d5a45000156f406000338-590-330.jpg',
                dataType : 'image',
                type     : 'POST',
                data: {
                    foo: ["bar1", "bar2"]
                },
                //这个对象用于设置Ajax相关回调函数的上下文
                context: document.body,
                //请求发送前的回调函数,用来修改请求发送前jqXHR
                beforeSend: function(xhr) {
                    xhr.overrideMimeType("text/plain; charset=x-user-defined");
                    show('局部事件beforeSend')
                },
                //请求完成后回调函数 (请求success 和 error之后均调用)
                complete: function() {
                    show('局部事件complete')
                },
                error: function() {
                    show('局部事件error请求失败时调用此函数')
                },
                success: function() {
                    show('局部事件success')
                }
            })
    
            ajax.done(function() {
                show('done')
            }).fail(function() {
                show('fail')
            }).always(function() {
                show('always')
            })
  • 相关阅读:
    第八周总结和实验六
    第七周总结与实验五
    遍历目录中的所有文件和目录,并生成全路径
    python watchdog
    Offer_answer_with_SDP_rfc3264
    [转]UML八大误解
    leetcode周赛220
    Codeforces Round #690 (Div. 3)
    学习资料
    鱼眼图与六面图转换(python)
  • 原文地址:https://www.cnblogs.com/aaronjs/p/4239743.html
Copyright © 2011-2022 走看看