jsonp的实现原理

Posted 2020-11-29 梦中飞雪

jsonp的实现原理

1 由于浏览器的安全性(同源策略)限制，不允许AJAX访问协议不同或域名不同或端口号不同的数据接口；
2 可以通过动态创建script标签的方式，把script标签的src属性指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式称为jsonp[由原理可知其只支持get请求]；
3 具体实现过程：
    a、先在客户端定义一个回调函数，预定义对数据的操作； //客户端定义回调函数名传给服务器，这样服务器端返回数据的方法名不用写死，客户端灵活设置而服务端不用变化。
    b、再把这个回调方法的名称通过URL传参的形式提交到服务器的数据接口；
    c、服务器数据接口组织好要发送给客户的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析；
    d、客户端拿到服务器返回的字符串之后，添加到script脚本去解析执行，这样就能够拿到jsonp的数据了；
例如：//下面结合node搭建个服务器实现jsonp

 

客户端：<script> function show(data){ console.log(data)}</script>
<script src="http://127.0.0.1:3000/getscript?callback=show"></script>

服务器端：const http = require(‘http‘)  //导入http内置模块
const urlModule = require(‘url‘)  //这个核心模块能解析URL地址拿到pathname query等
const server = http.createServer()  //创建一个http服务器
server.on(‘request‘,function(req,res){  //监听http服务器的request请求
    const { pathname: url,query} = urlModule.parse(req.url,true) //node的结构赋值
    if (url ===‘getscript‘){
       var data = {
          id:‘1‘,
          name: ‘宝马‘,
          createtime: new Date()}
       var scriptStr = `${query.callback}(${JSON.stringify(data)})` //拼接一个合法的JS脚本，这里拼接的是一个方法的调用
       res.end(scriptStr)   //res.end把这个字符串发送给客户端，客户端当做JS代码去解析执行
     }else{
       res.end(‘404‘)
     }
})