JSON with Padding参考

  1. https://zh.wikipedia.org/wiki/JSONP
  2. http://www.runoob.com/json/json-jsonp.html

使用步骤

  1. 在<script>中写一个回调函数callBackFunction(response)。

  2. 在<script>中的src写API的地址(带参数),即是用GET向服务器的API发出request。(因为<script>不受同源政策限制,可以向服务器获取数据)

  3. 服务器返回的是一段字符串,这段字符串是JavaScript代码,可以被客户端解析;例如callBackFunction(json_data);(因为先前客户端写了同名的回调函数,所以response返回后在客户端触发这个函数)。

  4. Padding的意思就是客户端触发callBackFuntion(json_data),从参数中获取JSON数据,填充到客户端所需求的标签的值;(如果返回的直接是JSON,Browser无法解释处理,无法触发);

  5. 另外,服务器端拼接成callBackfuntion(xxx),xxx可以不是JSON_data,不过一般是JSON_data;返回的也可以不是callBackfuntion(xxx),而是一段字符串(一段可以被客户端解析的JS代码),容易发生安全问题。

Talk is cheap, Show me the freaking code

  1. 客户端

<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&amp;format=jsonp&amp;lang=en&amp;jsonp=parseQuote"
async></script>
  1. 服务端(只是模拟,本质是返回一段字符串,这段字符串是客户端可以触发、解析的JavaScript代码
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

总结

  1. <script>标签不受同源策略的影响,用GET请求向服务器获取资源(例如字符串);这段字符串是JS代码,可以被客户端解析;例如返回的是函数,且客户端中有这个函数,就能触发;
  2. JSONP是上面原理的一个特殊案例:请求返回的是客户端可以处理的函数;
  3. JSONP之所以能规避同源策略,得益于<script>标签;
  4. Due to inherent insecurities, JSONP is being replaced by CORS

最新文章

  1. 弹出层在兼容模式和IE8模式下显示不正常
  2. Appium+Robotframework实现Android应用的自动化测试-1:Appium在Windows中的安装
  3. laravel框架总结(七) -- 数据库操作
  4. oracle 根据字段分组后,将组内的数据根据字段排序
  5. ExtJS学习之路第七步:contentEl与renderTo的区别
  6. JQuery-Table斑马线
  7. c语言调试开关
  8. Python脚本控制的WebDriver 常用操作 &lt;二十二&gt; 处理alert / confirm / prompt
  9. su 切换用户
  10. ZOJ 1825 compoud words
  11. Python中BeautifulSoup中对HTML标签的提取
  12. javascript的 replace() 方法的使用讲解
  13. js blob
  14. 基于均值漂移的三维网格分割算法(Mean Shift)
  15. 简单的计算100000以内的质数(JAVA实现)
  16. 【洛谷1855】 榨取kkksc03
  17. Linux命令—文件目录
  18. DVWA 黑客攻防演练(四)文件包含 File Inclusion
  19. windows下安装PyTorch0.4.0
  20. redhat7.0配置网卡

热门文章

  1. AcWing 837. 连通块中点的数量
  2. 左偏树(p3377)
  3. [杭电_HDU] 2013
  4. Go第三方库之tail
  5. Git - 06. git checkout
  6. Day1 面向对象编程与Java核心类
  7. Go_type
  8. 字符串类型:char,varchar,text,enum,set
  9. 集合转换为数组toArray(),数组转换为集合asList()
  10. 红帽RHCE培训-课程2笔记目录