手写个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){}
//地址、参数、回调
-
域名是我们自己传进去的,所以只要处理?之后的内容就好了
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); })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端