JSONP实现原理-简析

最新推荐文章于 2020-12-01 20:28:07 发布

weixin_30402085

最新推荐文章于 2020-12-01 20:28:07 发布

阅读量126

点赞数 1

文章标签：前端 json 后端 ViewUI

原文链接：https://juejin.im/post/5c8c9393e51d452865236ad3

版权

使用script标签是如何实现跨域请求的，它是一个新技术，还是一个技巧？下面我们来看看，其中简单的原理：

我们写一个很平常的example.js，文件内容展示如下：

getJson({
    results: [
        {
            name: 'xxx',
            code: 1
        }
    ]
});
复制代码

接下来，再写一个简单的index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jsonp</title>
    <script>
      function getJson(data) {
        console.log(data);
      }
    </script>
    <script src="http://127.0.0.1:3000/example.js"></script>
   </head>
   <body></body>
</html>
复制代码

上面的index.html代码，当成功的请求到example.js后，相当于这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jsonp</title>
    <script>
      function getJson(data) {
        console.log(data);
      }
    </script>
    <script>
      //  这里是：src="http://127.0.0.1:3000/example.js"请求成功后，返回的代码（数据）
      getJson({
        results: [
          {
            name: 'xxx',
            code: 1
          }
        ]
      });
    </script>
   </head>
   <body></body>
</html>
复制代码

相信写到这里，是能看得明白的，下面正式开始说JSONP的实现，我用的是nodejs后台：

前端代码index.html，给"http://http://127.0.0.1:3000/example.js"请求地址加一个get请求参数?callback=getJson，代码示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jsonp</title>
    <script>
      function getJson(data) {
        console.log(data);
      }
    </script>
    <script src="http://127.0.0.1:3000/example.js?callback=getJson"></script>
   </head>
   <body></body>
</html>
复制代码

后端server.js代码如下：

const express = require('express');
const server = express();

server.use('/example.js', (req, res) => {
  // req.query.callback是getJson
  let methodName = req.query.callback; 
  let data = {
     results: [
       {
         name: 'xxx',
         code: 1
       }
     ]
   };
  let dataStr = JSON.stringify(data),
      // 相当于sendStr = `getJson(${dataStr})`
      sendStr = `${methodName}(${dataStr})`;
  res.send(sendStr);
});

server.listen(3000);
console.log('server running at 127.0.0.1:3000');
复制代码

当请求成功后，index.html代码解析如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jsonp</title>
    <script>
      function getJson(data) {
        console.log(data);
      }
    </script>
    <script>
      // 这里是：src="http://127.0.0.1:3000/example.js?callback=getJson"请求成功后，返回的代码（数据）
      getJson('{"results":[{"name":"xxx","code":1}]}')
    </script>
   </head>
   <body></body>
</html>
复制代码

最后声明，为了方便大家理解，我把请求写成了一个example.js，其实接口只要一个字符串就可以了,例如"http://127.0.0.1:3000/example?callback=getJson"，其中.js文件格式，完全是为了帮助大家理解。

转载于:https://juejin.im/post/5c8c9393e51d452865236ad3

weixin_30402085

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONP实现原理-简析

使用script标签是如何实现跨域请求的，它是一个新技术，还是一个技巧？下面我们来看看，其中简单的原理：我们写一个很平常的example.js，文件内容展示如下：getJson({ results: [ { name: 'xxx', code: 1 } ]});复制代码接下来，再写一个简单的i...
复制链接

扫一扫