黑马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 做服务端）

客户端代码

 <!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">

   <title>Document</title>

 </head>

 <body>

   <script>

     function showInfo123(data) {

       console.log(data)

     }

   </script>

 <script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>

 <!-- <script>

   show()

 </script> -->

 </body>

 </html>

nodejs服务端代码

 // 导入 http 内置模块

 const http = require('http')

 // 这个核心模块，能够帮我们解析 URL地址，从而拿到  pathname  query

 const urlModule = require('url')

 // 创建一个 http 服务器

 const server = http.createServer()

 // 监听 http 服务器的 request 请求

 server.on('request', function (req, res) {

   // const url = req.url

   const { pathname: url, query } = urlModule.parse(req.url, true)

   if (url === '/getscript') {

     // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用

     // var scriptStr = 'show()'

     var data = {

       name: 'xjj',

       age: 18,

       gender: '女孩子'

     }

     var scriptStr = `${query.callback}(${JSON.stringify(data)})`

     // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行

     res.end(scriptStr)

   } else {

     res.end('404')

   }

 })

 // 指定端口号并启动服务器监听

 server.listen(3000, function () {

   console.log('server listen at http://127.0.0.1:3000')

 })
 

黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理的更多相关文章

  1. 第四章 生命周期函数--36 结合Node手写JSONP服务器剖析JSONP原理

  2. 手写butterknife来剖析其原理

    基本使用: 对于butterknife库我想基本上都非常熟了,如今在项目中用它也用得非常之频繁了,不过为了学习的完整性,先来简单的回顾一下基本用法,先新建一个工程: 然后给textview增加一个点击 ...

  3. 剖析手写Vue，你也可以手写一个MVVM框架

    剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...

  4. JavaSE 手写 Web 服务器（二）

    原文地址:JavaSE 手写 Web 服务器(二) 博客地址:http://www.extlight.com 一.背景 在上一篇文章 <JavaSE 手写 Web 服务器(一)> 中介绍了 ...

  5. JavaSE 手写 Web 服务器（一）

    原文地址:JavaSE 手写 Web 服务器(一) 博客地址:http://www.extlight.com 一.背景 某日,在 Java 技术群中看到网友讨论 tomcat 容器相关内容,然后想到自 ...

  6. 【项目】手写FTP服务器-C++实现FTP服务器

    X_FTP_server 手写FTP服务器-C++实现FTP服务器 项目Gitee链接:https://gitee.com/hsby/ftp_Server 简介 一个基于libevent的高并发FTP ...

  7. 手写Tomcat服务器

    预备知识 编写服务器用到的知识点 1) Socket 编程2) HTML3) HTTP 协议4) 反射5) XML 解析6) 服务器编写 Socket编程 https://www.cnblogs.co ...

  8. 手写Javaweb服务器

    简单web服务器 回忆socket 创建客服端(在httpClient_1包下) public class Client {    public static void main(String[] a ...

  9. node搭环境（四）--webpack启服务运行VUE模块文件（手写简单脚手架）

    webpack启服务步骤: 1.新建空文件夹webpack-vue.在空文件夹右键点击- GIt Bath here--输入cnpm init--按程序走完会生成package.json文件 2.打开 ...

随机推荐

  1. mongoose整理笔记

    一:参考学习网址 npm: https://www.npmjs.com/package/mongoose 官网API:http://mongoosejs.com/docs/guide.html 二:在 ...

  2. Cause: com.mysql.jdbc.PacketTooBigException: Packet for query is too large (16944839 > 16777216). You can change this value on the server by setting the max_allowed_packet' variable.

    今天发现task微服务的error日志报如下错误: Cause: com.mysql.jdbc.PacketTooBigException: Packet for query is too large ...

  3. 关于vue.js的部分总结

    1.MVVM和MVC的区别: MVVM:是Model-View-ViewModel的简写,即模型-视图-视图模型 模型:后端传递的数据 试图:所看到的页面 视图模型:mvvm模式的核心,它是连接vie ...

  4. js对象转数组

    1.Array.from() 方法,用于数组的浅拷贝.就是将一个类数组对象或者可遍历对象转换成一个真正的数组.eg: let obj = { 0: ‘nihao‘, 1: ‘haha‘, 2: ‘ga ...

  5. 苹果发布app，上传ipa，不显示问题

    用Xcode或者leader上传ipa,提示是上传成功,但是在网页上不显示构建版本.如下图: 那么,你先点击“活动”,进去后,如果显示你的app正在审核,那么表示上传成功,等待:如果“活动”中不显示你 ...

  6. yml格式的在线转换工具

    工具1: https://www.toolfk.com/tool-format-yaml 工具2: https://www.toyaml.com/index.html https://www.cnbl ...

  7. linux(centos)下安装supervisor进程管理工具

    在接触supervisor进程管理工具之前,使用springboot打包部署到linux服务器的流程是这样子的,如下图所示: 上图展示的就是最一般的流程,如果项目是小项目或者demo可以这样子去部署, ...

  8. Kostya the Sculptor（贪心

    这题本来  想二分.想了很久很久,解决不了排序和二分的冲突.     用贪心吧.. 题意: 给你n个长方形,让你找出2个或1个长方体,使得他们拼接成的长方体的内接球半径最大(这是要求最短边越大越好)( ...

  9. 笔记本电脑安装jupyterthemes

    上午准备在老笔记本上也装上jupyter themes,竟然遇到一堆问题: 首先直接 pip install jupyterthemes 参考:https://blog.csdn.net/Jinlon ...

  10. 从c到c++<四>

    总结一下:内联函数实际上就是用inline修饰的函数,这些函数会在编译时由编译器来将代码展开,而不用像上面第二点提到的人工展开,它的使用场景:代码很短.使用频率高. 具体代码如下: 对于这两者实际上还 ...