jQuery源码分析系列(35) : Ajax - jsonp的实现与原理

$.ajax({
    async: false, // 同步加载数据,即等到ajax执行完毕再接着执行下面的语句
    url: ‘http://192.168.1.114/yii/demos/test.php‘, //不同的域
    type: ‘GET‘, // jsonp模式只有GET是合法的
    data: {
        ‘action‘: ‘aaron‘
    }, // 预传参的数组
    dataType: ‘jsonp‘, // 数据类型
    jsonp: ‘backfunc‘, // 指定回调函数名，与服务器端接收的一致，并回传回来
    success: function(json) {
        console.log(json);
    }
})

<?php
$act = trim($_GET[‘action‘]);

if($act == ‘aaron‘ ){
    echo trim($_GET[‘backfunc‘]).‘(‘. json_encode(array(‘status‘=>1,‘info‘=>‘OK‘)) .‘)‘;  
}
?>

$_GET[‘backfunc‘]).‘(‘. json_encode(array(‘status‘=>1,‘info‘=>‘OK‘)) .‘)

$.ajax({
    url: ‘http://192.168.1.114/yii/demos/test.php‘, //不同的域
    type: ‘GET‘, // jsonp模式只有GET是合法的
    data: {
        ‘action‘: ‘aaron‘
    }, // 预传参的数组
    dataType: ‘jsonp‘, // 数据类型
    jsonp: ‘backfunc‘, // 指定回调函数名，与服务器端接收的一致，并回传回来
})

var dataTypeOrTransport = prefilterOrFactory(options, originalOptions, jqXHR);
            /**
             * 针对jonsp处理
             */
            if (typeof dataTypeOrTransport === "string" && !seekingTransport && !inspected[dataTypeOrTransport]) {
                //增加cache设置标记
                //不需要缓存
                //dataTypes: Array[2]
                // 0: "script"
                // 1: "json"
                options.dataTypes.unshift(dataTypeOrTransport);
                inspect(dataTypeOrTransport);
                return false;
            } else if (seekingTransport) {
                return !(selected = dataTypeOrTransport);
            }

// Detect, normalize options and install callbacks for jsonp requests
// 向前置过滤器对象中添加特定类型的过滤器
// 添加的过滤器将格式化参数，并且为jsonp请求增加callbacks
jQuery.ajaxPrefilter("json jsonp", function(s, originalSettings, jqXHR) {

    var callbackName,
        overwritten,
        responseContainer,
        // 如果是表单提交，则需要检查数据
        jsonProp = s.jsonp !== false && (rjsonp.test(s.url) ?
            "url" :
            typeof s.data === "string" 
            && !(s.contentType || "").indexOf("application/x-www-form-urlencoded") 
            && rjsonp.test(s.data) && "data"
        );

    // Handle iff the expected data type is "jsonp" or we have a parameter to set
    // 这个方法只处理jsonp，如果json的url或data有jsonp的特征，会被当成jsonp处理
    if (jsonProp || s.dataTypes[0] === "jsonp") {

        // Get callback name, remembering preexisting value associated with it
        // s.jsonpCallback时函数，则执行函数用返回值做为回调函数名
        callbackName = s.jsonpCallback = jQuery.isFunction(s.jsonpCallback) ?
            s.jsonpCallback() :
            s.jsonpCallback;

        // Insert callback into url or form data
        // 插入回调url或表单数据
        // "test.php?symbol=IBM&callback=jQuery20309245402452070266_1402451299022"
        if (jsonProp) {
            s[jsonProp] = s[jsonProp].replace(rjsonp, "$1" + callbackName);
        } else if (s.jsonp !== false) {
            s.url += (ajax_rquery.test(s.url) ? "&" : "?") + s.jsonp + "=" + callbackName;
        }

        // Use data converter to retrieve json after script execution
        s.converters["script json"] = function() {
            if (!responseContainer) {
                jQuery.error(callbackName + " was not called");
            }
            return responseContainer[0];
        };

        // force json dataType
        // 强制跟换类型
        s.dataTypes[0] = "json";

        // Install callback
        // 增加一个全局的临时函数
        overwritten = window[callbackName];
        window[callbackName] = function() {
            responseContainer = arguments;
        };

        // Clean-up function (fires after converters)
        // 在代码执行完毕后清理这个全部函数
        jqXHR.always(function() {
            // Restore preexisting value
            window[callbackName] = overwritten;

            // Save back as free
            if (s[callbackName]) {
                // make sure that re-using the options doesn‘t screw things around
                s.jsonpCallback = originalSettings.jsonpCallback;

                // save the callback name for future use
                oldCallbacks.push(callbackName);
            }

            // Call if it was a function and we have a response
            if (responseContainer && jQuery.isFunction(overwritten)) {
                overwritten(responseContainer[0]);
            }

            responseContainer = overwritten = undefined;
        });

        // Delegate to script
        return "script";
    }
});

transport = inspectPrefiltersOrTransports(transports, s, options, jqXHR);

jQuery.ajaxTransport("script", function(s) {
    // This transport only deals with cross domain requests
    if (s.crossDomain) {
        var script, callback;
        return {
            send: function(_, complete) {
                script = jQuery("<script>").prop({
                    async: true,
                    charset: s.scriptCharset,
                    //"http://192.168.1.114/yii/demos/test.php?backfunc=jQuery20308569577629677951_1402642881663&action=aaron&_=1402642881664"
                    src: s.url
                }).on(
                    "load error",
                    callback = function(evt) {
                        script.remove();
                        callback = null;
                        if (evt) {
                            complete(evt.type === "error" ? 404 : 200, evt.type);
                        }
                    }
                );
                document.head.appendChild(script[0]);
            },
            abort: function() {
                if (callback) {
                    callback();
                }
            }
        };
    }
});