利用Script元素实现JSONP跨域请求

作者:桌面漫游时间:2026-10-30 08:55:01浏览:70

本文介绍如何通过动态创建Script元素来发送JSONP请求。核心逻辑是生成唯一回调函数名,将其作为查询参数附加至URL,插入页面后由服务端执行回调并返回数据。代码展示了完整的请求封装、执行及清理机制,适用于解决浏览器跨域限制问题。

JSONP请求实现原理

利用Script元素发送JSONP请求的方法

核心代码实现


// 根据指定URL发送一个JSONP请求 
//然后把解析得到的相应数据传递给回调函数 
//在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称 
function getJSONP(url, callback){ 
 //为本次请求创建一个唯一的回调函数名称 
 var cbnum = "cb"+getJSONP.counter++; 
 var cbname = "getJSONP."+cbnum;   
 
 if(url.indexof("?") === -1){ 
  url += "?jsonp="+cbname; 
 }else { 
  url += "&jsonp="+cbname; 
 } 
 
 var script = document.createElement("script"); 
 
 getJSONP[cbnum] = function(response){ 
  try{ 
   callback(response); 
  }finally{ 
   delete getJSONP[cbnum]; 
   script.prentNode.removeChild(script); 
   }  
  }; 
 
  script.src = url; 
  document.body.appendChild(script); 
 
} 
 
getJSONP.counter = 0;

总结

以上这篇使用Script元素发送JSONP请求的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持本站。

作者最新文章