黑马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. Vue字符串padStart和padEnd方法

    padStart()用于头部补全,padEnd()用于尾部补全. 'a'.padStart(3, '0') // '00a' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.pa ...

  2. Android 主Module引用依赖Module,却无法使用里面的依赖库

    如果模块化开发中遇到 多模块的AndroidManifest.xml没有合并or多模块的资源文件没有合并or模块A include了模块B,而无法使用模块B内依赖的其他aar包中的类的时候or提示Su ...

  3. Linux Ubuntu XShell连接虚拟机问题记录

    我们先用ip addr / ifconfig查看虚拟机ip地址,然后到windows下的cmd中ping 一下对应地址 一般是可以ping通的. 然后用Xshell或者其他工具连接虚拟机. 如果连不上 ...

  4. How to find Oracle EBS Weblogic Server Admin Port and URL

    How to find Oracle EBS Weblogic Server Admin Port and URL   Weblogic admin portMethod 1 Open the App ...

  5. 【Zookeeper】集群环境搭建

    一.概述 1.1 Zookeeper的角色 1.2 Zookeeper的读写机制 1.3 Zookeeper的保证 1.4 Zookeeper节点数据操作流程 二.Zookeeper 集群环境搭建 2 ...

  6. 第五章、Celery分布式系统

    Celery 官方 Celery 官网:http://www.celeryproject.org/ Celery 官方文档英文版:http://docs.celeryproject.org/en/la ...

  7. Qt 4.8.5 + MinGW32 + Qt creater 安装

    Qt 4.8.5 + MinGW32 + Qt creater 安装 下载文件 文件版本 Qt 4.8.5 MinGW 0.4.4 Qt Creator 2.8或2.8.1 gdb-7.4-MinGW ...

  8. Linux下Mysql每天自动备份

    新建目录 mkdir -p /data/mysqlbal/data mkdir -p /data/mysqlbal/scripts mkdir -p /data/mysqlbal/logs 创建备份脚 ...

  9. nginx 缓存区太小导致后台Connection reset by peer 报错

    问题概述:图片bit 64生成数据流太大,导致小程序分享弹窗的二维码图片生成失败 后台报错: 排查: Client------>nginx------->h5------>nginx ...

  10. Spring-使用注解开发

    8.使用注解开发 在Spring4之后,要使用注解开发,必须要保证AOP包已经导入了 使用注解需要导入context约束,增加注解的支持! <?xml version="1.0&quo ...