JSONP的原理是什么?

2019-07-08118次阅读javascript

尽管浏览器有同源策略,但是<script>标签的src属性不会被同源策略所约束,可以获取任意服务器上的脚本并执行。jsonp通过插入<script>标签的方式来实现跨域,参数只能通过url传入,仅能支持get请求。

实现原理:

  1. 创建callback方法
  2. 插入script标签
  3. 后台接受到请求,解析前端传过去的callback方法,返回该方法的调用,并且数据作为参数传入该方法
  4. 前端执行服务端返回的方法调用

jsonp源码实现

function jsonp({url,params,callback}){

    return new Promise((resolve,reject)=>{

        //创建script标签
        let script = document.createElement('script');

        //将回调函数挂在window上
        window[callback] = function(data){
            resolve(data);
            //代码执行后,删除插入的script标签
            document.body.removeChild(script);
        };

        //回调函数加在请求地址上
        params = {...params,callback};//name=xinran001&callback=show
        let ary = [];
        for(let key in params){
            ary.push(`${key}=${params[key]}`);
        }

        script.src = `${url}?${ary.join('&')}`;

        document.body.appendChild(script);

    });

}

jsonp使用:

jsonp({
    url:'//localhost:8080/show',
    params:{
        //code
    },
    callback: 'show'
}).then(data=>{
    console.log( data );
})


jsonp服务端代码(node):

//express启动一个后台服务器
let express = require('express');
let app = express();

app.get('/show',(req,res)=>{

    let {callback} = req.query;

    res.send(`${callback}('Hello world!')`);

});

app.listen( 8080 );

 

上一篇: git中如何正确删除指定的文件和目录并与远程同步  下一篇: new的实现原理是什么?  

JSONP的原理是什么?相关文章