WEB - JSONP
2024-09-07 00:02:20
JSON with Padding参考
使用步骤
在<script>中写一个回调函数callBackFunction(response)。
在<script>中的src写API的地址(带参数),即是用GET向服务器的API发出request。(因为<script>不受同源政策限制,可以向服务器获取数据)
服务器返回的是一段字符串,这段字符串是JavaScript代码,可以被客户端解析;例如callBackFunction(json_data);(因为先前客户端写了同名的回调函数,所以response返回后在客户端触发这个函数)。
Padding的意思就是客户端触发callBackFuntion(json_data),从参数中获取JSON数据,填充到客户端所需求的标签的值;(如果返回的直接是JSON,Browser无法解释处理,无法触发);
另外,服务器端拼接成callBackfuntion(xxx),xxx可以不是JSON_data,不过一般是JSON_data;返回的也可以不是callBackfuntion(xxx),而是一段字符串(一段可以被客户端解析的JS代码),容易发生安全问题。
Talk is cheap, Show me the freaking code
- 客户端
<script type="text/javascript">
// 写回调函数,GET请求返回时触发,处理参数中的response(因为服务器端是把回调函数callBackFunction()和JSON_data拼接在一起,使JSON_data变成了callBackFunction的参数response)
function parseQuote(response) {
document.getElementById("quote").innerHTML = response.quoteText;
document.getElementById("author").innerHTML = response.quoteAuthor;
}
</script>
<script type="text/javascript"
src="http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=parseQuote"
async></script>
- 服务端(只是模拟,本质是返回一段字符串,这段字符串是客户端可以触发、解析的JavaScript代码)
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
总结
- <script>标签不受同源策略的影响,用GET请求向服务器获取资源(例如字符串);这段字符串是JS代码,可以被客户端解析;例如返回的是函数,且客户端中有这个函数,就能触发;
- JSONP是上面原理的一个特殊案例:请求返回的是客户端可以处理的函数;
- JSONP之所以能规避同源策略,得益于<script>标签;
- Due to inherent insecurities, JSONP is being replaced by CORS
最新文章
- 弹出层在兼容模式和IE8模式下显示不正常
- Appium+Robotframework实现Android应用的自动化测试-1:Appium在Windows中的安装
- laravel框架总结(七) -- 数据库操作
- oracle 根据字段分组后,将组内的数据根据字段排序
- ExtJS学习之路第七步:contentEl与renderTo的区别
- JQuery-Table斑马线
- c语言调试开关
- Python脚本控制的WebDriver 常用操作 <;二十二>; 处理alert / confirm / prompt
- su 切换用户
- ZOJ 1825 compoud words
- Python中BeautifulSoup中对HTML标签的提取
- javascript的 replace() 方法的使用讲解
- js blob
- 基于均值漂移的三维网格分割算法(Mean Shift)
- 简单的计算100000以内的质数(JAVA实现)
- 【洛谷1855】 榨取kkksc03
- Linux命令—文件目录
- DVWA 黑客攻防演练(四)文件包含 File Inclusion
- windows下安装PyTorch0.4.0
- redhat7.0配置网卡