jquery源码对jsonp的解读


/**
 * Created by ANN on 2017/6/8.
 */
基本语法
$.ajax({
    url: "http://localhost:18080/get",
    type: "get",
    dataType: 'jsonp',
    jsonpCallback: "baiducallback"
}).done(function (data) {
    console.log(data)
})

首先要了解ajaxSetip方法



ajax方法会将两个参数进行覆盖,拷贝,最后返回

ajaxSetup: function( target, settings ) {
    return settings ?

        // Building a settings object
        ajaxExtend( ajaxExtend( target, jQuery.ajaxSettings ), settings ) :

        // Extending ajaxSettings
        ajaxExtend( jQuery.ajaxSettings, target );
},

function ajaxExtend( target, src ) {
    var key, deep,
        flatOptions = jQuery.ajaxSettings.flatOptions || {};

    for ( key in src ) {
        if ( src[ key ] !== undefined ) {
            ( flatOptions[ key ] ? target : ( deep || (deep = {}) ) )[ key ] = src[ key ];
        }
    }
    if ( deep ) {
        jQuery.extend( true, target, deep );
    }

    return target;
}

jsonCallback分两种情况
一.不穿参数:


$.ajax({
    url: "http://localhost:18080/get",
    type: "get",
    dataType: 'jsonp',
}).done(function (data) {
    console.log(data)
})
// Default jsonp settings
1.
首先在jquery内部执行
进入ajax内部执行
s = jQuery.ajaxSetup( {}, options ),
jQuery.ajaxSetup({
    jsonp: "callback",
    jsonpCallback: function () {
        var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( nonce++ ) );
        this[callback] = true;
        return callback;
    }
此时setting不存在


执行 ajaxExtend( jQuery.ajaxSettings, target );
    ajaxSettings
    在jquery初始会有定义

ajaxSettings: {
        url: ajaxLocation,
        type: "GET",
        isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
        global: true,
        processData: true,
        async: true,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",

    },


    此时target是我们传递的参数
    {
        url: "http://localhost:18080/get",
        type: "get",
        dataType: 'jsonp',
    }
此时url会被覆盖,平增加dataType参数
ajaxSettings此时是:

ajaxSettings: {
    url: ajaxLocation,
        type: "GET",
        isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
        global: true,
        processData: true,
        async: true,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        dataType: 'jsonp',
        jsonpCallback: function () {
        var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( nonce++ ) );
        this[callback] = true;
        return callback;
    }

},




jquery的ajaxSetup方法会使用自定义的jsonpCallback
,
返回如
callback = jQuery21402091185757493652_1496931076460 & _ = 1496931076461
其中对应方法是
jQuery21402091185757493652_1496931076460 =
》
jqueryexpando: "jQuery" + ( version + Math.random() ).replace(/\D/g, "")
产生
1496931076461 =
》
var nonce = jQuery.now();


2.对上面方法进行调用
callbackName = s.jsonpCallback = jQuery.isFunction(s.jsonpCallback)
s.jsonpCallback():s.jsonpCallback;


3.定义该方法
overwritten = window[callbackName];
window[callbackName] = function () {
    responseContainer = arguments;
};

4.动态产生一个script标签并引用该链接

script = jQuery("
                    
                    

你可能感兴趣的:(jquery源码对jsonp的解读)