微信扫一扫打赏支持

黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理

黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理

一、总结

一句话总结：

服务端可以返回js代码给script标签，那么标签会执行它，并且可带json字符串作为参数，这样就成功把数据传过去了
比如客户端有show方法，服务器返回给script标签 show()，那么show 方法会执行

 

1、跨域访问的原因是什么？

由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全

 

2、JSONP的实现原理  是什么？

可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求

 

3、jsonp只支持哪种请求？

get请求

 

4、JSONP的 具体实现过程 是什么？

1、先在客户端定义一个回调方法，预定义对数据的操作；
2、再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
3、服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
4、客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；

 

 

二、结合Node手写JSONP服务器剖析JSONP原理

1、JSONP的实现原理

  • 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
  • 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
  • 具体实现过程：
    • 先在客户端定义一个回调方法，预定义对数据的操作；
    • 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
    • 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
    • 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
 

 

2、jsonp代码实例（Node.js 做服务端）

客户端代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9 </head>
10 
11 <body>
12   <script>
13     function showInfo123(data) {
14       console.log(data)
15     }
16   </script>
17 
18 
19 <script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
20 <!-- <script>
21   show()
22 </script> -->
23 
24 </body>
25 
26 </html>

 

nodejs服务端代码

 1 // 导入 http 内置模块
 2 const http = require('http')
 3 // 这个核心模块，能够帮我们解析 URL地址，从而拿到  pathname  query 
 4 const urlModule = require('url')
 5 
 6 // 创建一个 http 服务器
 7 const server = http.createServer()
 8 // 监听 http 服务器的 request 请求
 9 server.on('request', function (req, res) {
10 
11   // const url = req.url
12   const { pathname: url, query } = urlModule.parse(req.url, true)
13 
14   if (url === '/getscript') {
15     // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
16     // var scriptStr = 'show()'
17 
18     var data = {
19       name: 'xjj',
20       age: 18,
21       gender: '女孩子'
22     }
23 
24     var scriptStr = `${query.callback}(${JSON.stringify(data)})`
25     // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
26     res.end(scriptStr)
27   } else {
28     res.end('404')
29   }
30 })
31 
32 // 指定端口号并启动服务器监听
33 server.listen(3000, function () {
34   console.log('server listen at http://127.0.0.1:3000')
35 })

 

 

 

 

 

 
posted @ 2019-10-29 21:17  范仁义  阅读(674)  评论(0)  编辑  收藏  举报