黑马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. 解决ios中input兼容性问题

    1.解决input输入框在iOS中有阴影问题 input{ -webkit-appearance: none; } 2.checkbox.raido在ios中阴影问题 单选:              ...

  2. 数据库之sqlite

    数据创建数据 CREATE TABLE IF NOT EXISTS ArpAudit (ID INTEGER PRIMARY KEY autoincrement NOT NULL, UserName ...

  3. 如何让某些用户对Marketing Cloud的contact数据只能实施只读操作

    打开maintain business role这个应用: 创建一个新的business role,然后添加下列这几个catalogs: SAP_CEC_BC_MKT_ADM_PC Marketing ...

  4. grafana根据不同prometheus server统计数据

    场景:由于采集的数据量巨大,所以部署了多台prometheus server服务器.根据业务领域分片采集,减轻prometheus server单节点的压力. 问题:grafana如何同时显示多数据源 ...

  5. jQuery效果函数

    jQuery有很我的效果可以实现,比如说淡入淡出的效果:<html>    <head>        <style>            #box{width: ...

  6. How to resolve the 403 error when send POST request from Postman

    Root cause: the site refused the connection from the http request origin, by default it is setted as ...

  7. 从c到c++<二>

    用于对与局部变量同名的全局变量进行访问下面通过程序来进行说明:运行看一下: 用于表示类的成员,这将在关于类的一节中详细说明 对于学过java的人来说,应该对于new运算符很容易理解,它实际上相当于c语 ...

  8. Java&Selenium智能等待方法封装

    Java&Selenium智能等待方法封装 ExpectedConditions方法还有很多,自然也可以继续扩展很多 package util; import org.openqa.selen ...

  9. Golang 本身是用什么语言写的？

    原文:https://www.zhihu.com/question/66944175 ------------------------------- 首先,问题的说法是有问题的. golang本身是用 ...

  10. Spring Bean装配（下）——注解

    @Repository,@Service,@Controller这三个注解是基于component定义的注解 component-scan:组件扫描 base-package:扫描这个下的所有类 &l ...