码迷,mamicode.com
首页 > Web开发 > 详细

模拟image的ajaxPrefilter与ajaxTransport处理

时间:2015-01-21 19:34:44      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

    //////////////////////////////////////////////////////////////////
    // 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)
        })

模拟image的ajaxPrefilter与ajaxTransport处理

标签:

原文地址:http://www.cnblogs.com/aaronjs/p/4239743.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!