由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；

可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）;

实现过程：

1.在客户端定义一个回调方法，预定义对数据的操作；

2.再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；

3.服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；

4.客户端拿到服务器返回得字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；

//客户端.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  <script>

    function show() {

      console.log('ok')

    }

  </script>

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

<!--  上面的script就相当于下面

  <script>

    show()

  </script>  -->

</body>

</html>
//app.js

const http = require('http')

​

const server = http.createServer()

​

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

  const url = req.url

​

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

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

    var scriptStr = 'show()'

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

    res.end(scriptStr)

  } else {

    res.end('404')

  }

})

server.listen(3000, function () {

  console.log('server')

})

既然知道了原理就可以对其进行升级改造了。

上面我们的方法是写死的，但是后端并不知道我们的方法名是什么，我们用带参的形式传递给后端。

//客户端.html

...

 <script>

    function show() {

      console.log('ok')

    }

  </script>

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


//app.js

const http = require('http')

const urlModule = require('url')

​

const server = http.createServer()

​

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

​

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

​

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

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

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

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

    res.end(scriptStr)

  } else {

    res.end('404')

  }

})

server.listen(3000, function () {

  console.log('server')

})

现在前端修改了方法名，只要改变请求参数，后端依旧能够使用。但是这只是单纯方法的调用，并没有发挥后端的作用呀。别着急，接下来就是获取数据

//客户端.html

...

<script>

    function showInfo123(data) {

      console.log(data)

    }

  </script>

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

...

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

  const {

    pathname: url,

    query

  } = urlModule.parse(req.url, true)

​

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

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

    var data = {

      name: 'caicaicai',

      age: 18,

      gender: 'man'

    }

    //data对象不能直接往字符串里拼，所以使用JSON.stringfy()，对data进行转换

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

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

    res.end(scriptStr)

  } else {

    res.end('404')

  }

})

...

从浅入深——理解JSONP的实现原理的更多相关文章

  1. JavaScript基础知识从浅入深理解（一）

    JavaScript的简介 javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互. javascript是由三部分组成:ECMAScript.DO ...

  2. 浅入深出之Java集合框架（下）

    Java中的集合框架(下) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,哈哈这篇其实也还是基础,惊不惊喜意不意外￣▽￣ 写文真的好累,懒得写了.. ...

  3. 浅入深出Vue：工具准备之PostMan安装配置及Mock服务配置

    浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...

  4. 浅入深出Vue：前言

    浅入深出Vue系列文章 之前大部分是在做后端,后来出于某些原因开始接触Vue.深感前端变化之大,各种工具.框架令人眼花缭乱.不过正是这些变化,让前端开发更灵活. 博主在刚开始时,参考官网的各个步骤以及 ...

  5. 『浅入深出』MySQL 中事务的实现

    在关系型数据库中,事务的重要性不言而喻,只要对数据库稍有了解的人都知道事务具有 ACID 四个基本属性,而我们不知道的可能就是数据库是如何实现这四个属性的:在这篇文章中,我们将对事务的实现进行分析,尝 ...

  6. 浅入深出Vue：代码整洁之封装

    深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...

  7. Mybatis源码解析，一步一步从浅入深（六）：映射代理类的获取

    在文章:Mybatis源码解析,一步一步从浅入深(二):按步骤解析源码中我们提到了两个问题: 1,为什么在以前的代码流程中从来没有addMapper,而这里却有getMapper? 2,UserDao ...

  8. 浅入深出之Java集合框架（上）

    Java中的集合框架(上) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到<浅入深出之Java集合框架 ...

  9. 浅入深出之Java集合框架（中）

    Java中的集合框架(中) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到<浅入深出之Java集合框架 ...

随机推荐

  1. Problem L. World Cup

    题目大意:有A,B,C,D四个队伍,两两之间有一个比赛,假如A和B比赛,如果平局,各加一分,如果说A胜,给A加3分,不给B加分,B胜同理 给出A,B,C,D,的得分,判断形成这种局面有多少种方式. 思 ...

  2. OkHttp 优雅封装 OkHttps 之 回调线程魔变

    第一篇:OkHttp 优雅封装 HttpUtils 之 气海雪山初探 第二篇:OkHttp 优雅封装 HttpUtils 之 上传下载解密 简介 HttpUtils 从 v2.3.0 之后便重命名了, ...

  3. 处理数字的类 —— Math类 、 Random类 、 BigDecimal类 与 BigInteger类

    在我们学习C语言时,我们处理数据时要调用很多函数,那么,Java也有很多的方法可以来处理数值的类. 那么,在本篇博文中,本人就来讲解三个用于处理数值的类 -- Math类 . Random类 与 Bi ...

  4. 6.表单提交，input键盘变搜索，有关自定义属性input操作

    1.键盘变搜索 1.) 在form 上加action="#", 2.)input type=search, 3.)此时会提交到 #,需要再添加一个input display=non ...

  5. 挑战全网最幽默的Vuex系列教程：第五讲 Vuex的小帮手

    先说两句 前面已经讲完了 Vuex 下的 State.Getter.Mutation 及 Action 这四驾马车,不知道大家是否已经理解.当然,要想真正熟练掌握的话,还是需要不断的练习和动手实践才行 ...

  6. 2、flink入门程序Wordcount和sql实现

    一.DataStream Wordcount 代码地址:https://gitee.com/nltxwz_xxd/abc_bigdata 基于scala实现 maven依赖如下: <depend ...

  7. Nginx+Fastdfs

    注: 在配置时,使用非root用户配置 fdfs/fdfs 1.    集群部署 1.1.    准备 创建目录:本文档中所有内容安装到/fdfs目录 [fdfs@5861be93b5b0 /]$mk ...

  8. 2019-2020-1 20199328《Linux内核原理与分析》第三周作业

    加载内核 这里可以看出有些东西隔一段时间就会打印出来 查看mymain.c 开头的一些语句不再描述 每10000次循环打印一次 这里还是针对的mymain.c文件,这里我们可以根据自己的计算机对频率进 ...

  9. 一些软件的 Basic Auth 行为

    一个 WBEM 在2003年的bug I'm trying to access the WBEM service of the CIMOM on the ESX Server 3i and all m ...

  10. Spring5参考指南:基于注解的容器配置

    文章目录 @Required @Autowired @primary @Qualifier 泛型 @Resource @PostConstruct和@PreDestroy Spring的容器配置可以有 ...