手写个jsonp
2024-10-20 06:32:24
原生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);
}
);
思路:
先抽象需要处理的字符串
处理完url,创建一个新的script标签挂到页面上
把处理好的回调函数挂到window对象上
回调完再删掉script
步骤:
随便拿个地址,比如百度。
http://www.baidu.com?aa=11&callback=my_jsonp04349289664328899
要处理的就是地址(?及之前的内容)
参数(?后面的内容)
回调函数
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);
})
最新文章
- php时间戳之间相互转换
- 使用doxygen制作C代码文档
- elasticsearch和hadoop集成,gateway.type hdfs设置
- NHibernate使用ICriteria分页并返回数据库记录总条数
- C# 释放非托管资源
- 分别给出BOOL,int,float,指针变量 与“零值”比较的 if 语句(假设变量名为var)
- XtraReport改变纸张方向
- Linux操作系统定时任务系统Cron入门、PHP计划任务以及rpc示例
- Tomcat7.0设置虚拟文件夹
- python中关于发邮件的示例
- LMAX高并发系统架构
- android gif动画开源框架android-gif-drawable
- LeetCode算法题-Minimum Index Sum of Two Lists(Java实现)
- 2018-09-28 用Python3和tkinter开发简单图形界面程序
- base64URL处理
- cocos2d-x3.17 整体概述
- excel设定备选值
- 简表-Java-Echart报表介绍
- 《剑指offer》第十五题(二进制中1的个数)
- 使用NativeExtension向AIR app 添加Activity和BroadCastReceiver(2)