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

WEB - JSONP的更多相关文章

  1. Web - JSONP和同源策略漫谈

    0x00 前言 关于JSONP网上有很多文章了,我也是在拜读了别人的文章的基础上来写写自己的看法,这样可以加深自己印象,巩固一下学习效果.我们需要做的就是站在巨人的肩膀上眺望远方. 0x01 起 在W ...

  2. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  3. 基于python对B站收藏夹按照视频发布时间进行排序

    基于python对B站收藏夹按照视频发布时间进行排序 前言 在最一开始,我的B站收藏一直是存放在默认收藏夹中,但是随着视频收藏的越来越多,没有分类的视频放在一起,想在众多视频中找到想要的视频非常困难, ...

  4. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  5. ASP.NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

  6. JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]

    [第1篇] 同源策略与JSONP 浏览器是访问Internet的工具,也是客户端应用的宿主,它为客户端应用提供一个寄宿和运行的环境.而这里所说的应用,基本是指在浏览器中执行的客户端JavaScript ...

  7. Web APi之手动实现JSONP或安装配置Cors跨域(七)

    前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

  8. Web API 实现JSONP或者安装配置Cors跨域

    前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

  9. 通过扩展让ASP.NET Web API支持JSONP -摘自网络

    同源策略(Same Origin Policy)的存在导致了“源”自A的脚本只能操作“同源”页面的DOM,“跨源”操作来源于B的页面将会被拒绝.同源策略以及跨域资源共享在大部分情况下针对的是Ajax请 ...

随机推荐

  1. spring boot配置druid数据连接池

    Druid是阿里巴巴开源项目中一个数据库连接池. Druid是一个jdbc组合,包含三个部分, 1.DruidDriver代理Driver,能够提供基于Filter-Chain模式得插件体系2.Dru ...

  2. 【音乐欣赏】《Siren》 - The Chainsmokers / Aazar

    曲名:Siren 作者:The Chainsmokers . Aazar [00:00.00] 作曲 : Alex Pall/Andrew Taggart/Alexis Duvivier [00:01 ...

  3. Codeforces Round #604 (Div. 2)D(构造)

    构造,枚举起点,如果一个序列成立,那么将它reverse依然成立,所以两个方向(从小到大或从大到小)没有区别,选定一个方向进行探测,直到探测不到以后回头,只要所给数据能成立,那么能探测进去就能探测出来 ...

  4. Day1 面向对象编程与Java核心类

    this变量 在方法内部,可以使用一个隐含的变量this,它始终指向当前实例.如果没有命名冲突,可以省略this. 但是,如果有局部变量和字段重名,那么局部变量优先级更高,就必须加上this. 构造方 ...

  5. centos 7 配置samba

    yum -y install samba samba-common samba-client vi /etc/samba/smb.conf  #修改samba服务器的主配置文件 [global] wo ...

  6. 深入delphi编程理解之消息(三)发送消息函数的一般应用实例

    通过对消息函数(SendMessage.PostMessage.Perform)的一般应用,来说明sendmessage.postmessage函数和perform 方法调用方式和结果的区别. 一.程 ...

  7. 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建

    node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...

  8. 改变input[type=range]的样式 动态滑动

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  9. Gitee 码云 pages 搭建vue项目记录

    首先要在.gitignore文件去掉/dist,这个文件默认是不上传的,但是执行打包bulid的时候会生成dist文件,而线上访问的是打包之后的dist文件: vue.config.js文件,如下图箭 ...

  10. 清空表单 autocomplete="off"

    清空表单 autocomplete="off" <form action="/sm/baziqiming.aspx" method="post& ...