实现 JSONP

时间：2010-11-04 来源：napoleon_liu

JSOPN使用的就是 script方式。

JSONP /*
* jsonp(url, callbacks, charset,failed,success)
*
* @param {String}
*            url 地址
* @param {Object}
*            callbacks 外部js文件的回调函数集{ "func_name": func_object};
* @param {String}
*            charset 字符集(默认utf-8)
* @param {Function}
*            failed 请求失败的回调函数
* @param {Function}
*            success 请求成功的回调函数
* @author piboyeliu
*/
var jsonp = (function(){

    var json_imp =null;
    function jsonp() {
        jsonp_imp.apply(null, arguments);
    };

    function extend(obj){
        function extendable(){};
        extendable.with = function(attrs){
            for(var attr_name in attrs) {
            obj[attr_name] = attrs[attr_name];
            }
        }
        return extendable;
    }

    extend(jsonp).with({
        requests:{},
        request_timeout:5 //5 seconds
    });

    function add_event(target, event_type, handler)
    {
        if(target.addEventListener) {
            target.addEventListener(event_type, handler, false);
        }else if(target.attachEvent){
            target.attachEvent("on"+event_type, handler);
        }else {
            target["on"+event_type] = handler;
        }
    };

    function remove_request(request) {
        var js = request.js;
        js.parentNode.removeChild(js);
        jsonp.requests[request.id] = null;
    }

    function request_ok(request){
        if(request.success) request.success();
        clearTimeout(request.id);
        remove_request(request);
    }

    var is_ie = (function(){ return !!window.ActiveXObject; })();

    function set_callback_for_request_ok(request)
    {
        var callbacks = request.callbacks;
        for(var name in callbacks) {
            window[name]=callbacks[name];
        }

        var js = request.js;
        js.onreadystatechange = function(){
            if(js.readyState == 4) {
                request_ok(request);
            }
        };

        if(!is_ie) {
            js.onload = function(){
                js.readyState = 4; js.onreadystatechange();
            };
        }
    };

    function request_timeout(request) {
        if(request.failed) request.failed();
        remove_request(request);
    }

    jsonp_imp = function(url, callbacks, charset, failed, success) {
        var js = document.createElement("script");
        if(!charset) charset = 'utf-8';
        request = {"url":url, "charset":charset,
                    "callbacks":callbacks, "failed":failed, "success":success,
                    "js":js,
                    "start_time":new Date(), "end_time":null
        };
        request.id = setTimeout(function(){request_timeout(request);}, jsonp.request_timeout*1000);
        jsonp.requests[request.id] = request;
        set_callback_for_request_ok(request);

        js.charset = charset;
        js.defer = true;
        document.getElementsByTagName("head")[0].appendChild(js);
        js.src = url;
    };

    return jsonp;
})();

测试代码：

jsonp("http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js", {"hello":function(){alert("load ok");}}, function(){alert("timeout");});