黑马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命名路由

    Vue命名路由 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. Missing Push Notification Entitlement解决方法

    原委 最近提交APP到Apple Store审核,结果很快就收到Apple很"贴心"的邮件.原文如下: Dear developer, We have discovered one ...

  3. MySQL增量备份与恢复实例

    小量的数据库可以每天进行完整备份,因为这也用不了多少时间,但当数据库很大时,就不太可能每天进行一次完整备份了,这时候就可以使用增量备份.增量备份的原理就是使用了mysql的binlog日志. 本次操作 ...

  4. Anaconda查找源及配置清华镜像

    Anaconda配置清华源 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ c ...

  5. sklearn线性回归实现房价预测模型

    目录 题目要求 单特征线性回归 方案一 方案二 多特征线性回归 两份数据 ex1data1.txt ex1data2.txt 题目要求 建立房价预测模型:利用ex1data1.txt(单特征)和ex1 ...

  6. 移动Web前端开发 3移动web开发现状

    移动端的手机浏览器内核一般都是Webkit内核,只需要适配Webkit就可以了 适配问题 屏幕尺寸不一

  7. 系统分析与设计结对项目——WordCount

    结对项目完成WordCount 合作者:201631062507  201631062526(学号) 代码地址:https://gitee.com/WordCountMC/WordCountTeam ...

  8. vue slot及用法，$slots访问具名slot

  9. 15分钟入门Markdown

    一.标题一 标题三 标题六 # 一.标题一 ### 标题三 ###### 标题六 二.字体 1.普通字体 字体加粗 斜体 斜体加粗 删除线 1.普通字体 **字体加粗** *斜体* ***斜体加粗** ...

  10. Python--编码的疑惑

    XML语法分析器在处理的时候,使用的是Unicode字符串,并且将其返回.Unicode可以处理特殊字符,但是如果将Unicode字符串转换为普通字符串,就会引发异常,比如Print, >> ...