JSONP原理及实现

Posted 2022-12-13 橘猫吃不胖～

JSONP原理及实现

• 1 概述
• 2 优点
• 3 缺点
• 4 实现

1 概述

JSONP是是一种跨域通信的手段，它可以让网页从别的域名（网站）中获取数据，即跨域读取数据，兼容性好，但是只能处理GET请求。

它的原理是利用script标签的src属性没有跨域限制来解决跨域。通过前端将回调函数传递到服务器端（将回调函数的名称放到这个请求的query参数里），然后由服务器端注入参数之后再返回，并将需要响应的数据放到回调函数的参数里，实现服务器端向客户端通信。

2 优点

• 不受同源策略的限制
• 兼容性更好
• 请求完毕后可以通过调用callback的方式回传结果

3 缺点

• 只支持GET请求
• 只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行javascript 调用
• 不会返回任何的状态码，需要后端配合返回指定格式的数据

4 实现

一个简单的JSONP实现，其实就是拼接URL，然后将动态添加一个script元素到头部。

function jsonp(req) 
    let script = document.createElement("script"); // 创建一个script标签
    let url = req.url + "?callback=" + req.callback.name; // 拼接url
    script.src = url; // 设置script标签的src属性
    document.getElementsByTagName("head")[0].appendChild(script); // 将script标签添加到head标签中

可以搭建一个简单的服务器测试一下，服务器端代码如下：

const http = require("http");
const urllib = require("url");

const port = 3000; // 定义端口

const server = http.createServer((req, res) => 
    let params = urllib.parse(req.url, true); // 解析url
    let callback = params.query.callback; // callback是函数名，解析出来
    if (callback) 
        let data =  data: "橘猫吃不胖" ; // 定义要向前端返回的数据
        res.end(callback + "(" + JSON.stringify(data) + ")"); // 相应数据，callback(参数)的形式
    
)

server.listen(port, function () 
    console.log("jsonp server is on");
);

启动 上面定义的服务器，并在html文件中调用jsonp函数：

function sayHello(res) 
    console.log("hello", res.data);


jsonp(
    url: "http://localhost:3000",
    callback: sayHello
)

从浏览器打开html页面，就可以在控制台看到返回的内容了。