本文共 1732 字，大约阅读时间需要 5 分钟。

原理介绍

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。找到一篇文章，，感觉还不错。）

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）

转载地址：https://blog.csdn.net/weixin_43297321/article/details/104277108 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！