JSONP 请求原理

时间 2019-11-29

标签 jsonp 请求原理栏目 JSON 繁體版

原文原文链接

使用 vs code 进行jsonp请求数据

须要使用的工具为：

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

node服务器

列如:html

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文件名打开服务器

客户端页面

列如:vue

<!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 开启node

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

JSONP 请求原理

使用 vs code 进行jsonp请求数据

须要使用的工具为：

node服务器

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

客户端页面

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

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