首页 > 代码库 > jQuery实现jsonp源码分析(京东2015面试)

jQuery实现jsonp源码分析(京东2015面试)

// Bind script tag hack transport
jQuery.ajaxTransport( "script", function(s) {

// This transport only deals with cross domain requests
  if ( s.crossDomain ) {

    var script,
    head = document.head || jQuery("head")[0] || document.documentElement;

    return {

      send: function( _, callback ) {

        script = document.createElement("script");

        script.async = true;

        if ( s.scriptCharset ) {
          script.charset = s.scriptCharset;
        }

        script.src = http://www.mamicode.com/s.url;

        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function( _, isAbort ) {

          if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {

            // Handle memory leak in IE
            script.onload = script.onreadystatechange = null;

            // Remove the script
            if ( script.parentNode ) {
              script.parentNode.removeChild( script );
            }

            // Dereference the script
            script = null;

            // Callback if not abort
            if ( !isAbort ) {
              callback( 200, "success" );
            }
          }
        };  

        // Circumvent IE6 bugs with base elements (#2709 and #4378) by prepending
        // Use native DOM manipulation to avoid our domManip AJAX trickery
        head.insertBefore( script, head.firstChild );
      },

      abort: function() {
        if ( script ) {
          script.onload( undefined, true );
        }
      }
    };
  }
});
var oldCallbacks = [],
rjsonp = /(=)\?(?=&|$)|\?\?/;

// Default jsonp settings
jQuery.ajaxSetup({
  jsonp: "callback",
  jsonpCallback: function() {
    var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( ajax_nonce++ ) );
    this[ callback ] = true;
    return callback;
  }
});

jsonp的实现与原理:

$.ajax({
    url: ‘http://192.168.1.114/yii/demos/test.php‘, //不同的域
    type: ‘GET‘,    // jsonp模式只有GET是合法的
    data: {
        ‘action‘: ‘aaron‘
    },          // 预传参的数组
    dataType: ‘jsonp‘, // 数据类型
    jsonp: ‘backfunc‘, // 指定回调函数名,与服务器端接收的一致,并回传回来
})
 
其实jquery内部会转化成
 
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron;
 
然后动态加载
 
<script type="text/javascript" src="http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron"></script>
问题:backfunc=jQuery2030038573939353227615_1402643146875是怎么产生的?
  jsonpCallback: function() {
    var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( ajax_nonce++ ) );
  }
  expando: "jQuery" + ( core_version + Math.random() ).replace( /\D/g, "" );
  ajax_nonce = jQuery.now();
//如果没有设置jsonpCallback的话就把callback的名字(jsonpCallback)随机设置为jQuery+版本号+随机数+_$.now()现在的时间

jQuery实现jsonp源码分析(京东2015面试)