JSONP 请求原理

林见夕
329 阅读2分钟

使用 vs code 进行jsonp请求数据

需要使用的工具为：

  • 1、编写一个 node 服务器，
  • 2、编写一个向服务器请求响应的页面

node服务器

列如:

const http = require('http');
// 导入解析 URL 地址的核心模块
const urlModule = require('url');

const server = http.createServer();
// 监听 服务器的 request 请求事件，处理每个请求
server.on('request', (req, res) => {
  const url = req.url;

  // 解析客户端请求的URL地址
  var info = urlModule.parse(url, true);

  // 如果请求的 URL 地址是 /getjsonp ，则表示要获取JSONP类型的数据
  if (info.pathname === '/getjsonp') {
    // 获取客户端指定的回调函数的名称
    var cbName = info.query.callback;
    // 手动拼接要返回给客户端的数据对象
    var data = {
      name: 'zs',
      age: 22,
      gender: '男',
      hobby: ['吃饭', '睡觉', '运动']
    }
    // 拼接出一个方法的调用，在调用这个方法的时候，把要发送给客户端的数据，序列化为字符串，作为参数传递给这个调用的方法：
    var result = `${cbName}(${JSON.stringify(data)})`;
    // 将拼接好的方法的调用，返回给客户端去解析执行
    res.end(result);
  } else {
    res.end('404');
  }
});

server.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000');
});

vs code 右键终端 输入 nodemon js文件名 打开服务器

客户端页面

列如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <!-- 
        页面中定义了一个 函数
     -->
    <script>
        function showInfoDome(data){
            console.log(data)
        }
    
    </script>

<!-- 
    jsonp 的原理 就是通过 script 允许跨域的特点，拿到不同域名，不同端口...的数据，

        scr ：http://127.0.0.1:3000/getscript?callback=showInfoDome
        
        向 端口号为 3000 的拂去器发送 请求 
        访问 /getscript
        通过 callback 
 -->
<script src="http://127.0.0.1:3000/getscript?callback=showInfoDome"></script>
</body>
</html>

vs code 安装插件 Live Server 开启本地服务器

页面右键 Open with Live Server 开启

接下来我们就可以在 客户端页面的控制台 中看到从服务器 返回的数据对象了

avatar
文章
阅读
粉丝