jsonp 原理 并模拟实现一个简单的jsonp
jsonp产生的背景
1.从原网站向目标网站(服务端)发送ajax请的时候,由于浏览器的安全策略(这两个网站只要域名,端口,协议 有一个不同就不允许请求访问)导致跨域,从而请求无法正常进行。
2.Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)。
3.于是可以判断,当前阶段如果想通过纯web端跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理。
4.从服务器端请求到的js代码是立即执行的,想要处理请求到的数据,可以把服务器端的数据放在一个方法里面,跟随数据一起返回,浏览器端获取到js代码后,立即执行此方法,于此同时浏览器端需要先定义这个方法,供服务器返回的js调用,这个方法就是所谓的callBack。
做实验,了解大概流程
比如服务端(www.abc.com)的根目录下有个 test.js 文件,代码如下:
alert('hello')
本地服务器127.0.0.1:3000 下有个demo.html页面代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src='http://www.abc.com/test.js'></script> </body>
</html>
这时候页面就会弹出 'hello', 因为alert是浏览器自带的函数。
这时候 把 test.js 的内容改成如下:
testFunction('hello')
再打开demo.html页面,就会报错如下:
因为在浏览器端没有找到testFunction方法,这就需要在浏览器端要事先定义好要执行的这个testFunction方法。
在浏览器加上testFunction方法后,代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var testFunction = function(data){
alert('执行testFunction' + data)
}
</script>
<script type="text/javascript" src='http://127.0.0.1:3000/users'></script>
</body>
</html>
运行demo.html 结果如下:
实验总结
1.服务端返回一个函数,并且函数包裹着浏览器端需要的数据。
2.浏览器端定义一个函数,跟服务端返回的函数名一样,用来处理获取到的数据。
浏览器端具体代码实现
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var testFunction = function(data){
alert('执行testFunction' + data.message)
}
</script>
<!-- 把浏览器定义的方法以参数的形式传递给服务端就是 callback=testFunction -->
<script type="text/javascript" src='http://127.0.0.1:3000/users?callback=testFunction'></script>
</body>
</html>
服务端代码,以node.js为例
const express = require('express');
const app= express(); app.get('/users', (req, res)=>{
// 这一步JSONP必备
var _callback = req.query.callback;
// 这个responseData是后台要传回给前台的数据
var responseData = { status: '', message: 'hello, 你好'};
if (_callback){
// 这两步设置发送也是NODE.JS发送JSONP必备
res.type('text/javascript');
res.send(_callback + '(' + JSON.stringify(responseData) + ')');
}
else{
res.json(responseData);
}
});
app.listen(, ()=>{
console.log('Server is running at http://localhost:8080')
})
完成,jsonp的过程就是这样了,jquery这类框架的 jsonp 是其实就把这个过程给封装好了, 由于需要把参数都放在 <script> 的 src里面向服务端请求, 所以jsonp只持之get请求。
最新文章
- Azure Blob Storage 基本用法 -- Azure Storage 之 Blob
- 关于Ajax中http协议
- Windows下安装 msysGit 以及初始化 Git server环境
- Js和asp.net各自设置的cookie相互读取的方法
- 《灰帽Python-黑客和逆向工程师的Python编程》学习记录
- 下一代大数据系统和4S标准
- 如何查看Windows8.1计算机体验指数评分
- hdu 4756 Install Air Conditioning
- Qt判断和打开进程(windows端),运行,检测,中止
- Android Service详解
- An error occurred. Sorry, the page you are looking for is currently unavailable. Please try again later.
- Docker(十九)-Docker监控容器资源的占用情况
- [UE4]Exec数据类型
- NVIDIA / Intel 核芯显卡显示 + Nvidia 计算
- 微信小程序 - 非入侵式布局
- VIM 的一些技巧
- vue2.0 MintUI安装和基本使用
- css 做幻灯片效果
- 底层文件I/O操作中read()函数的缓存问题
- 3dContactPointAnnotationTool开发日志(二五)
热门文章
- python函数:叠加装饰器、迭代器、自定义迭代器、生成式
- three.js之创建一个几何体
- 5.Nginx的session一致性(共享)问题配置方案1
- C++二叉树前中后序遍历(递归&;非递归)统一代码格式
- springboot集成Spring Session
- 关于first-class object的解释
- 制作自定义系统iso镜像
- 小猿圈-IT自学人的小圈子 https://book.apeland.cn/details/54/
- 解决boot项目创建后启动日志报错
- 5 LAMP配置管理:模块(state、file、pkg、service)、jinja模板、job管理、redis主从