基于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获取选择文本所在的句子详解 
            
            

                
最新资源
                

                     
群星《说唱梦工厂 第11期》[320K/MP3][63.25MB]
 
群星《说唱梦工厂 第11期》[FLAC/分轨][343.07M
 
群星《闪光的夏天 第5期》[320K/MP3][79.35MB]
 
秀兰玛雅.1999-友情人【大旗】【WAV+CUE】
 
小米.2020-我想在城市里当一个乡下人【滚石】【
 
齐豫.2003-THE.UNHEARD.OF.CHYI.3CD【苏活音乐】
 
黄乙玲1986-讲什么山盟海誓[日本东芝版][WAV+CU
 
曾庆瑜1991-柔情陷阱[台湾派森东芝版][WAV+CUE]
 
陈建江《享受男声》DTS-ES6.1【WAV】
 
群星《闪光的夏天 第5期》[FLAC/分轨][392.38MB


                
            
            

一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。