说一下 JSONP 实现原理？

学习资源网

于 2023-12-27 13:00:00 发布

阅读量417

点赞数 6

文章标签： json

本文链接：https://blog.csdn.net/sanmansan/article/details/135144276

版权

说一下 JSONP 实现原理？

JSONP（JSON with Padding）是一种通过动态脚本标签（<script>）实现的跨域数据请求的方法。由于浏览器的同源策略限制，XMLHttpRequest（Ajax）只能在同一域名下进行数据请求，而JSONP是一种绕过这种限制的方法。

实现原理如下：

客户端发起请求： 客户端通过动态创建<script>标签，向目标服务器发起请求。在请求中包含一个回调函数的名称作为参数，通常是在URL中传递。
服务器返回数据： 服务器端接收到请求后，将数据包装在回调函数中，并返回给客户端。这个回调函数是客户端定义的，服务器端直接将数据作为参数传入。
客户端解析数据： 客户端收到响应后，由于响应的内容是一个JavaScript脚本，浏览器会直接解析执行，从而触发客户端事先定义好的回调函数，将数据传递给回调函数进行处理。

以下是一个简单的JSONP的代码示例：

<!-- 客户端代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP Example</title>
</head>
<body>

<script>
    // 客户端定义的回调函数
    function handleData(data) {
        console.log('Received data:', data);
    }

    // 创建动态script标签，设置src属性，发起JSONP请求
    var script = document.createElement('script');
    script.src = 'http://example.com/api/data?callback=handleData';
    document.body.appendChild(script);
</script>

</body>
</html>

// 服务器端代码（Node.js示例）
const http = require('http');

const server = http.createServer((req, res) => {
    if (req.url.startsWith('/api/data')) {
        // 获取回调函数名称
        const callback = req.url.split('=')[1];

        // 模拟数据
        const data = { message: 'Hello from server!' };

        // 构造响应数据，包装在回调函数中
        const response = `${callback}(${JSON.stringify(data)})`;

        // 设置响应头
        res.writeHead(200, { 'Content-Type': 'application/javascript' });

        // 发送响应数据
        res.end(response);
    } else {
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('Not Found');
    }
});

const PORT = 3000;
server.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

在上述示例中，客户端通过创建<script>标签，向服务器发起请求，同时通过callback参数指定了回调函数的名称。服务器接收到请求后，将数据包装在指定名称的回调函数中返回。客户端在响应中直接执行了事先定义好的回调函数，从而获取到了数据。这种方式允许跨域请求数据，但需要服务器端支持JSONP的格式返回。