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>
複製代碼