1. 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全；
2. 以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓JSONP只支持Get请求）；
3. 具体实现过程：
     - 先在客户端定义一个回调方法，预定义对数据的操作；
     - 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
     - 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
     - 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
4. 带大家通过 Node.js ，来手动实现一个JSONP的请求例子；

客户端：

<!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>

服务端：app.js

// 导入 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')

})

nodemon  .\app.js

9.jsonp的实现原理的更多相关文章

  1. jQuery 调用jsonp实现与原理

    jQuery 调用jsonp实现与原理 您的评价:        收藏该经验     阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...

  2. jsonp跨域原理

    Jsonp原理: 首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器.注意:服务端得到ca ...

  3. jsonp 跨域原理详解

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  4. jsonp的工作原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jsonp的实现原理

    jsonp的实现原理 由于浏览器的安全性(同源策略)限制,不允许AJAX访问协议不同或域名不同或端口号不同的数据接口: 可以通过动态创建script标签的方式,把script标签的src属性指向数据接 ...

  6. 从浅入深——理解JSONP的实现原理

    由于浏览器的安全性限制,不允许AJAX访问 协议不同.域名不同.端口号不同的 数据接口,浏览器认为这种访问不安全: 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口 ...

  7. jquery 中jsonp的实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...

  8. 深入剖析jsonp跨域原理

    在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的 ...

  9. JSONP前世今生及原理

    https://blog.csdn.net/hansexploration/article/details/80314948 http://www.cnblogs.com/yuzhongwusan/a ...

随机推荐

  1. Java实现回形数，只利用数组、循环和if-else语句

    import java.util.Scanner; public class learn { public static void main(String[] args){ System.out.pr ...

  2. 云计算服务模式(SaaS/PaaS/IaaS)

    为什么是云计算,为什么是现在 商用云:商用云的设计初衷是将基础设施商品化,并以较低的成本对外提供,是用户能够获得高扩展性和自服务能力. 企业云:企业级云的目的,则是达到或超过它所要替代的本地基础设施的 ...

  3. 解决Maven依赖本地仓库eclipse报错的问题

    一.应用场景 有时候项目报红色的感叹号错误也是由于项目中没有导入相关jar报导致报错 为了使用maven强大的包依赖管理和项目管理功能,故在项目中使用maven2作为项目建构工具. 但是我的项目在内网 ...

  4. jqGrid常用方法

    var jqGrid = $("#jqGrid"); // 获取选中行id[单行],test1就是最先一个行id var test1 = jqGrid.jqGrid("g ...

  5. [转帖]hdfs hbase hive hbase适用场景

    hdfs hbase hive hbase适用场景 https://www.cnblogs.com/liyulong1982/p/6001822.html Hive 不想用程序语言开发MapReduc ...

  6. [转帖]谷歌TF2.0凌晨发布！“改变一切，力压PyTorch”

    谷歌TF2.0凌晨发布!“改变一切,力压PyTorch” https://news.cnblogs.com/n/641707/ 投递人 itwriter 发布于 2019-10-01 12:38 评论 ...

  7. 1255: 打怪升级（Java）

    WUSTOJ 1255: 打怪升级 Description 对于多数RPG游戏来说,除了剧情就是打怪升级.本题的任务是用最短的时间取得所有战斗的胜利.这些战斗必须按照特定的顺序进行,每打赢一场,都可能 ...

  8. SAS学习笔记14 利用SAS绘制地图（二）

    笔记9讲过利用SAS绘制地图,这次接着讲 用中国各地(不含港澳台)的平均湿度数据来绘制地图 在地图上标出地名 宏%maplabel有9个参数,依次为:地图文件名.包含区域名称的数据集文件.输出的注释数 ...

  9. ASP.NET Core分布式项目-1.IdentityServer4登录中心

    源码下载 一.添加服务端的api 1.添加NUGet包 IdentityServer4 点击下载,重新生成 2.添加Startup配置 打开Startup文件 public class Startup ...

  10. python几个轻量级web框架

    python几个轻量级web框架 2016-04-11 18:04:34 惹不起的程咬金 阅读数 7944更多 分类专栏: 云计算/大数据/并行计算 Python   我最近发表了一篇名为 ‘7 Mi ...