基于JSONP原理解析(推荐)

http://www.a.com/getSomething"htmlcode">

jsonp0({code:200,data:{}})


很明显，由于这是在动态加载的Script标签中包含的内容，那么这就是一段自执行代码，这段代码只有一个函数被调用———jsonp0。
当然，有执行，则必须先创建，否则就会报错。创建这一步，就需要在调用前执行。
具体实现如下：


function jsonp (url, successCallback, errorCallback, completeCallback) {

 // 声明对象，需要将函数声明至全局作用域
 window.jsonp0 = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('"color: #ff00ff">完善一下

在实际情况下，通常会有许多个jsonp的请求同时调用，
那么既然jsonp0就能满足我们的需要，为什么常常看到jsonp1，jsonp2等等依次累加的代码呢？
这是因为，请求可能是很多个异步进行。在第一次执行jsonp方法时，window.jsonp0是函数A，此时去加载js文件，在js未加载完毕的情况下，又调用了一次jsonp方法，此时，window.jsonp0指向了函数B。那么等到两次的js加载完毕以后，都会执行第二次的回调。
所以，我们需要对callback的名字做一个区别处理，累加就能满足需要。
修改一下代码：


var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback) {
 
 var jsId = 'jsonp' + jsonpCounter++;
 
 // 声明对象，需要将函数声明至全局作用域
 window[jsId] = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
  clean();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('"htmlcode">

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback, timeout) {
 // 略去上面写过的代码
 var 
  timeout = timeout || 10000
  , timer
 ;
 if (timeout) {
  timer = setTimeout(function () {
   if (errorCallback) {
    errorCallback(new Error('timeout'));
   }
   clean();
  }, timeout)
 }
 
 function clean () {
  script.parentNode.removeChild(script);
  window[jsId] = function(){};
  if (timer) clearTimeout(timer);
 }
}


这样，基本上就完成了jsonp的全部功能，剩下的可能需要做一些兼容的修改，才算是一个完整的jsonp方法。
REFER
《高性能JavaScript》
npm上的一个jsonp实现，JSONP
以上这篇基于JSONP原理解析(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

            
           
            上一篇：基于JavaScript中字符串的match与replace方法(详解)

            下一篇：利用Javascript获取选择文本所在的句子详解