黑马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. Go 字符串使用

    Go语言中的字符串 Go 中的字符串是兼容 Unicode 编码的,并且使用 UTF-8 进行编码,这样每一个Unicode字符根据代码点的大小使用1.2.3或4个字节表示代码点.Go 语言中的字符串 ...

  2. Android开发之图像处理那点事——滤镜

    在Android开发中,一般对图像的处理就是Bitmap(位图),它包含了图像的全部数据,即点阵和颜色值,点阵就是包含像素点的矩阵,而颜色值就是ARGB,分别代表透明.红色.绿色.蓝色通道,它们共同决 ...

  3. ubuntu创建kvm虚拟机

    CPU虚拟化支持 [root@ubuntu~]# egrep -o '(vmx|svm)' /proc/cpuinfo vmx vmx vmx vmx KVM环境 [root@ubuntu ~]# a ...

  4. 二〇一八-网易秋招面试解析（Java）

    一轮面试: Java内存模型讲一下 GC算法,知道的都讲一下 HashMap,get,put实现 JsonWebToken具体实现流程(简历) Spring AOP如何实现,写一个AOP功能的主要流程 ...

  5. python-----opencv截取按帧截取视频

    最近有需求把一个视频从指定帧截取一部分,demo代码如下: import cv2 video_path = r'F:\temp\temp_0806\1\video\test.dat' videoCap ...

  6. 关于阿里云OSS上传图片之后会被旋转90度的解决办法

    原文:https://www.cnblogs.com/wuhjbk/p/10133596.html 问题描述:正常的图片前端上传到oss成功之后的资源地址.在html上引用的时候被旋转了90度oss资 ...

  7. asp.net中数据库事务管理

    英文搜索关键字: 文章地址:https://stackoverflow.com/questions/313199/sql-transactions-best-way-to-implement-in-a ...

  8. SpringMVC 一次请求加载Controller多次

    原因之一:HTML页面中 css样式 background:url() 或 img.iframe标签 src设置为空 例:<div style="background:url()&qu ...

  9. My97DatePicker(js日期插件) v4.8

    1.下载地址 https://files.cnblogs.com/files/yu-shang/My97DatePicker.zip 2.文档地址 http://my97.net/demo/index ...

  10. 小程序setData数据量过大时候会对渲染有影响吗？

    datas:[ { id:1000, name: "帅哥", title: '...', b: '...', d: 0, f:0, .... }, { id:1001, name: ...