【前端框架学习】结合Node手写JSONP服务器剖析JSONP原理

本文链接：https://blog.youkuaiyun.com/qq_38594872/article/details/122977469

本文介绍了如何使用Node.js创建一个HTTP服务器，实现实时响应JSONP请求。通过解析URL获取参数，服务器端动态拼接JavaScript方法调用，并将数据转化为JSON字符串传递给客户端。客户端通过预先定义的方法接收并执行返回的脚本，从而实现跨域数据交换。此外，还展示了如何在服务器端添加数据并在调用方法时传递给客户端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：本篇需要用到一些node.js的知识

一、创建一个http服务器

//导入http内置模块
const http = require("http");

//创建一个http服务器
const server = http.createServer();
//监听http服务器的request请求
server.on("request", function (req, res) {
  //write your code here...

  const url = req.url;

  if (url === "/getscript") {
    //拼接一个合法的Js脚本，这里拼接的是一个方法的调用
    var scriptStr = "show()";
    res.end(scriptStr);
  } else {
    //xes.end 发送给客户端，客户端去把 这个字符串，当作xs代码去解析执行
    res.end("404");
  }
});

//指定端口号并启动服务器监听
server.listen(3000, function () {
  console.log("server listen at http://127.0.0.1:3000");
});

需要注意的是，上面的拼接方法调用中的方法不能写死，主要是为了保证代码块的适用性。这里我们添加一个urlModule的核心模块，帮助我们解析url地址，从而拿到pathname和query。

//导入http内置模块
const http = require("http");
// 这个核心模块，能够帮我们解析 URL地址，从而拿到 pathname query
const urlModule = require("url");

//创建一个http服务器
const server = http.createServer();
//监听http服务器的request请求
server.on("request", function (req, res) {
  //write your code here...

  const { pathname: url, query } = urlModule.parse(req.url, true);

  if (url === "/getscript") {
    //拼接一个合法的Js脚本，这里拼接的是一个方法的调用
    var scriptStr = `${query.callback}()`;
    res.end(scriptStr);
  } else {
    //xes.end 发送给客户端，客户端去把 这个字符串，当作xs代码去解析执行
    res.end("404");
  }
});

//指定端口号并启动服务器监听
server.listen(3000, function () {
  console.log("server listen at http://127.0.0.1:3000");
});

二、编写客户端jsonp页面

创建一个如下所示的页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <script>
        function show() {
            console.log('ok!');
        };
    </script>

    <script src="http://127.0.0.1:3000/getscript?callback=show"></script>
</body>

</html>

第一个<script>标签用于定义一个方法。

第二个<script>标签的作用是通过前面我们写的服务器端，返回的脚本会执行我们客户端中已经定义好的方法。

三、一些其他的功能

可以发现上面的服务器端只是单纯的调用了show()这个方法，那么我们在调用这个方法的时候能不能为这个方法传递一些数据呢？答案是可以的，而且这里的数据可以由服务端拼接好。

我们在这里在服务器端创建一个data：

  if (url === "/getscript") {
    //拼接一个合法的Js脚本，这里拼接的是一个方法的调用
    var data = {
      name: "lbw",
      age: 18,
      gender: "girl",
    };

    var scriptStr = `${query.callback}()`;
    res.end(scriptStr);
  } else {
    //xes.end 发送给客户端，客户端去把 这个字符串，当作xs代码去解析执行
    res.end("404");
  }

我们在调用方法的时候把数据对象一起传递过去。但是我们这里不能直接传递data，如果写上的话，会调用obj.toString()，那么得到的就不是一个真正的字符串，而是 '[obj Obj]' 。

所以我们在返回的时候先把date JSON对象转成JSON字符串再发送回去。

即：

var scriptStr = `${query.callback}(${JSON.stringify(data)})`;

再在客户端接收一下data：

    <script>
        function show(data) {
            console.log(data);
        };
    </script>

运行后，可以发现我们是拿到了这个字符串的。

这里客户端定义一个方法的调用并不是客户自己调用，而是服务器返回一个具体的方法调用。

如果需要拿到某些数据，服务器端先把数据组织好，再传到括号中，客户端就可以接收到了。