JSON with Padding参考
- https://zh.wikipedia.org/wiki/JSONP
- http://www.runoob.com/json/json-jsonp.html
使用步骤
- 在<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)，而是一段字符串（一段可以被客户端解析的ＪＳ代码），容易发生安全问题。
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代码）
<?phpheader(‘Content-type: application/json‘);//获取回调函数名$jsoncallback = htmlspecialchars($_REQUEST [‘jsoncallback‘]);//json数据$json_data = ‘["customername1","customername2"]‘;//输出jsonp格式的数据echo $jsoncallback . "(" . $json_data . ")";?>
总结
- <script>标签不受同源策略的影响，用ＧＥＴ请求向服务器获取资源（例如字符串）；这段字符串是ＪＳ代码，可以被客户端解析；例如返回的是函数，且客户端中有这个函数，就能触发；
- JSONP是上面原理的一个特殊案例：请求返回的是客户端可以处理的函数；
- JSONP之所以能规避同源策略，得益于<script>标签；
- Due to inherent insecurities, JSONP is being replaced by CORS
WEB - JSONP
原文地址：https://www.cnblogs.com/allen2333/p/9185511.html