认识

2023年06月16日

柏拉文

越努力，越幸运

原理

前端: 定义callback函数，通过<script></script> 发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现 JSONP</title>
</head>
<body>
    <script>
        function callback(result){
            console.log("JSONP 回调函数",result);
        }
    </script>
    <script src="http://localhost:3000/jsonp?name=abc&age=23&callback=callback"></script>
</body>
</html>

服务端: 服务端返回响应类型为text/javascript类型的callback()即可

const Koa = require("koa");
const Router = require("koa-router");

const app = new Koa();
const router = new Router({ prefix: "/" });

router.get("jsonp", async (ctx) => {
  const { callback,...params } = ctx.request.query;
  const { name, age} = params;
  console.log("传入的参数为:",name,age);
  const data = {
    code: 200,
    msg: "JSONP 请求成功！",
    data: {},
  };
  ctx.type = "text/javascript";
  ctx.body = `${callback}(${JSON.stringify(data)})`;
});

app.use(router.routes());
app.listen(3000, () => {
  console.log("jsonp 服务启动成功！");
});

实现

前端

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现 JSONP</title>
  </head>
  <body>
    <script>
      function jsonp({ url, params, callback }) {
        return new Promise((resolve, reject) => {
          const generateURL = () => {
            let paramsStr = "";
            for (let key in params) {
              paramsStr += `${key}=${params[key]}&`;
            }
            paramsStr += `callback=${callback}`;
            return `${url}?${paramsStr}`;
          };
          callback =
            callback ||
            `callback${Math.floor(Math.random() * (10 - 0 + 1)) + 0}`;
          const script = document.createElement("script");
          script.src = generateURL();
          document.body.append(script);
          window[callback] = function (data) {
            resolve(data);
            delete window[callback];
            document.body.remove(script);
          };
        });
      }

      jsonp({
        url: "http://localhost:3000/jsonp",
        params: {
          name: "abc",
          age: 23,
        },
      }).then((result) => {
        console.log(result);
      });
    </script>
  </body>
</html>

服务端

const Koa = require("koa");
const Router = require("koa-router");

const app = new Koa();
const router = new Router({ prefix: "/" });

router.get("jsonp", async (ctx) => {
  const { callback,...params } = ctx.request.query;
  const { name, age} = params;
  console.log("传入的参数为:",name,age);
  const data = {
    code: 200,
    msg: "JSONP 请求成功！",
    data: {},
  };
  ctx.type = "text/javascript";
  ctx.body = `${callback}(${JSON.stringify(data)})`;
});

app.use(router.routes());
app.listen(3000, () => {
  console.log("jsonp 服务启动成功！");
});

原理​

实现​

原理

实现