9.jsonp的实现原理
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的实现原理的更多相关文章
- jQuery 调用jsonp实现与原理
jQuery 调用jsonp实现与原理 您的评价: 收藏该经验 阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...
- jsonp跨域原理
Jsonp原理: 首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器.注意:服务端得到ca ...
- jsonp 跨域原理详解
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- jsonp的工作原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jsonp的实现原理
jsonp的实现原理 由于浏览器的安全性(同源策略)限制,不允许AJAX访问协议不同或域名不同或端口号不同的数据接口: 可以通过动态创建script标签的方式,把script标签的src属性指向数据接 ...
- 从浅入深——理解JSONP的实现原理
由于浏览器的安全性限制,不允许AJAX访问 协议不同.域名不同.端口号不同的 数据接口,浏览器认为这种访问不安全: 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口 ...
- jquery 中jsonp的实现原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...
- 深入剖析jsonp跨域原理
在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的 ...
- JSONP前世今生及原理
https://blog.csdn.net/hansexploration/article/details/80314948 http://www.cnblogs.com/yuzhongwusan/a ...
随机推荐
- 【Leetcode_easy】674. Longest Continuous Increasing Subsequence
problem 674. Longest Continuous Increasing Subsequence solution class Solution { public: int findLen ...
- 第三章 授权——《跟我学Shiro》
转发地址:https://www.iteye.com/blog/jinnianshilongnian-2020017 目录贴:跟我学Shiro目录贴 授权,也叫访问控制,即在应用中控制谁能访问哪些资源 ...
- charles 新的修改请求
本文参考:charles 新的修改请求 compose New 是新出一个弹窗,自己手动一个个的去写: 可以写各种状态: – URL: – Method: – GET – POST – PUT – D ...
- 利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图、折线图、饼图
利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import pandas as pdimport matplotlib. ...
- 根据start和limit从已有的数据列表中获取从start开始的limit个数据
代码记录(需求:根据start和limit从已有的数据列表中获取从start开始的limit个数据) 已有的数据列表:这个数据列表是经过处理的,可能是在SQL查询时无法处理的如多条件排序,而排序条件需 ...
- java 中的容器(札记)
创建容器向上转型为接口的时候,有时候,并不是一定可行的,因为有的实现类,在接口的基础添加了自己的方法:比如:List 接口下面的 LinkedList 自己定义了一些方法 : Arrays.asLis ...
- (九)Javabean与Jsp(来自那些年的笔记)
目录 JavaBean 在JSP中使用JavaBean 标签用法 带标签体的 JavaBean 标签 setProperty 标签 getProperty 标签 JSP开发模式 案列:使用 模式一 编 ...
- 题解 luoguP3554 【[POI2013]LUK-Triumphal arch】
代码的关键部分 inline void dfs(int u,int fa) { ; for(int i=first[u]; i; i=nxt[i]) { int v=go[i]; if(v==fa)c ...
- Python 【类与对象】
类与对象 把类的个例就叫做实例 (instance),可理解为“实际的例子”类是某个特定的群体,实例是群体中某个具体的个体 Python中的对象等于类和实例的集合:即类可以看作是对象,实例也可以看作是 ...
- MySQL 解决source 命令导入数据库 乱码
在我把库.表.sql脚本的编码格式都设置为UTF-8后,任然有乱码,任然有报错: 于是按以下方式重新登录后,解决: mysql -u root -p --default-character-set=u ...