原生jsonp具体实现

先上代码:

    //http://www.baidu.com?aa=11&callback=my_jsonp04349289664328899
var jsonp = function(url,param,callback){
//处理url地址,查找?,如果没有?这个变量就有一个"?",有?这个变量接收一个&
var querystring = url.indexOf("?") == -1?"?":"&"; //处理参数{xx:xx}
for(var k in param) {
querystring += k + "=" + param[k] + '&';//?k=para[k]
} //处理回调函数名
var random = Math.random().toString().replace(".","");
var cbval = "my_jsonp" + random;
var cb = "callback="+cbval; querystring += cb; var script = document.createElement("script");
script.src = url + querystring; //把回调函数的名字附给window
window[cbval] = function(param) {
//这里执行回调的操作,用回调来处理参数
callback(param);
//拿到了就删掉这个script
document.body.removeChild(script);
};
document.body.appendChild(script);
} jsonp(
"https://www.baidu.com",
{aa:11},
function(){
console.log(param);
}
);

思路:

  1. 先抽象需要处理的字符串

  2. 处理完url,创建一个新的script标签挂到页面上

  3. 把处理好的回调函数挂到window对象上

  4. 回调完再删掉script

步骤:

随便拿个地址,比如百度。

var jsonp = function(url,para,callback){}
//地址、参数、回调

开始处理url地址

  • 域名是我们自己传进去的,所以只要处理?之后的内容就好了

var queryString = url.indexOf("?") == -1?"?":"&";
//看url里面有没有?,如果有说明只要传参数就好了,没有的话queryString默认是? //给地址传参数一般都是要好几个,所以这里的数据格式是一个对象,如{aa:11}
for(var k in para) {
queryString += k + '=' + para[k] + '&';
//?aa=11&
}

处理回调函数

  • 仿jQ的思路,函数名随机,避免和页面的某个函数重名

  • 需要一个随机非浮点数

  • 参数名

var random = Math.random().toString().replace(".","");//随机非浮点数
var cbvalue = "jp" + random;//不能用数字开头做函数名
var cb = "callback=" + cbvalue;//callback = jp016548432158485
queryString += cb;//放到处理url字符串的后面

创建一个script

var script = document.createElement("script");
script.src = queryString;
document.body.appendChild(script);

把回调函数挂载到页面上,并传参

window[cbvalue] = function(para){
callback(para);
//拿完了参数就删掉,过河拆桥
document.body.removeChild(script);
}

完成,尝试调用

jsonp("www.jd.com",{num:10},function(){
console.log(para);
})

最新文章

  1. php时间戳之间相互转换
  2. 使用doxygen制作C代码文档
  3. elasticsearch和hadoop集成,gateway.type hdfs设置
  4. NHibernate使用ICriteria分页并返回数据库记录总条数
  5. C# 释放非托管资源
  6. 分别给出BOOL,int,float,指针变量 与“零值”比较的 if 语句(假设变量名为var)
  7. XtraReport改变纸张方向
  8. Linux操作系统定时任务系统Cron入门、PHP计划任务以及rpc示例
  9. Tomcat7.0设置虚拟文件夹
  10. python中关于发邮件的示例
  11. LMAX高并发系统架构
  12. android gif动画开源框架android-gif-drawable
  13. LeetCode算法题-Minimum Index Sum of Two Lists(Java实现)
  14. 2018-09-28 用Python3和tkinter开发简单图形界面程序
  15. base64URL处理
  16. cocos2d-x3.17 整体概述
  17. excel设定备选值
  18. 简表-Java-Echart报表介绍
  19. 《剑指offer》第十五题(二进制中1的个数)
  20. 使用NativeExtension向AIR app 添加Activity和BroadCastReceiver(2)

热门文章

  1. 谷粒商城--分布式高级篇P102~P128
  2. 构建后端第1篇之---springcloud项目依赖分析
  3. 【小工具系列】Python + OpenCV 图片序列转换成视频
  4. mysql orderby limit 翻页数据重复的问题
  5. intouch/ifix嵌入视频控件2(报警视频联动初步思路)
  6. vscode配置及插件
  7. 【源码】“@Value 注入不成功”引发的一系列骚操作
  8. 还在用Postman?来,花2分钟体验下ApiPost的魅力
  9. 为什么 WordPress 镜像用起来顺手?
  10. SQL语句(六)分页查询和联合查询