jsonp简介

原理介绍

1、使用jsonp时，通过DOM创建script标签，因为可能通信次数不止一次，所以每一次在创建放入script时，都要将之前的script标签删除，否则标签会不停的增加。
2、jsonp通信时不要使用模块脚本（即 " < script type=“module”>< /script> " ES6新增）。
3、jsonp通信是，是和JSON没有关系的。
4、jsonp实际上是创建script标签，然后设置src，通过获取js的地址来完成对于服务器的请求。
5、jsonp通过获取scr地址中GET传参的方式，传入需要发送给服务器的数据并带一个回调函数的名字，作为服务端传回调用该回调函数使用。
6、jsonp传过去的回调函数名称，客户端中必须有该函数，服务器在发回该函数时，可以传入参数在客户端执行，然后可以根据自己设置的展示方式查看一下。
（注意：不过，一般jsonp不怎么用，因为它可以实现跨域访问，这样服务器的安全性就降低了。现在通信一般使用ajax，或者websocket。找到一篇文章，jsonp跨域原理解析，感觉还不错。）

1、jsonp.html  发送请求
var script;
sendData("a=1&b=2");
function sendData(pram) {
    if (script) {
        script.remove(); //将之前的script标签删除
        script = null;
    }
    script = document.createElement("script");//普通标签，非模块化
    script.src = `http://127.0.0.1:8001/?${pram}&fn=callbacks`;//用的是本地的
    document.body.appendChild(script);
}
function callbacks(num) {
    console.log(num);
}

2、b.js  node服务
var http=require("http");
var querystring=require("querystring");
var server=http.createServer(function(req,res){
    req.on("data",function(_data){

    });
    req.on("end",function(){
        if(req.url.indexOf("favicon.ico")>-1) return;
        var data=querystring.parse(req.url.split("?")[1]);
        console.log(data);  //{ a: '1', b: '2', fn: 'callbacks' }
        var sum=Number(data.a)+Number(data.b);//转换成数值求值
        res.writeHead(200,{
            "content-type":"text/html;charset=utf-8",
            // "Access-Control-Allow-Origin":"*", //jsonp跨域，所以注释掉了
            // "Access-Control-Allow-Headers":"*"
        })       
        res.write(data.fn+'('+sum+')');//转换成js文本去执行
        res.end();
    })
});
server.listen(8001,"localhost",function(){
    console.log("服务已开启");
})

终端开启node服务：（有让它返回的data值，是一个对象，不过打印出来的是字符串）

然后打开请求页面：（可以看到有最终返回结果 sum=3）