欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JSONP实现原理-简析

程序员文章站 2022-07-05 10:59:18
...

使用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