jsonp的实现原理

由于浏览器的安全性(同源策略)限制，不允许AJAX访问协议不同或域名不同或端口号不同的数据接口；
可以通过动态创建script标签的方式，把script标签的src属性指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式称为jsonp[由原理可知其只支持get请求]；
具体实现过程：
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')

     }

})

秒客网

jsonp的实现原理

jsonp的实现原理

相关文章