转载:jsonp详解
json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。
同源策略
首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思,实践一下就知道了。
1.随便建两个网页
一个端口是2698,一个2701,按照定义它们是不同源的。
2.用jQuery发起不同源的请求
在2698端口的网页上添加一个按钮,Click事件随便发起两个向端口为2701域的请求。
$("#getOtherDomainThings").click(function () {$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {console.log(data)})$.get("http://localhost:2701/home/index", function (data) {console.log(data)}) })
根据同源策略,很明显会悲剧了。浏览器会阻止,根本不会发起这个请求。(not allowed by Access-Control-Allow-Origin)
OK,原来jsonp是要解决这个问题的。
script标签的跨域能力
不知道大家知不知道CDN这个东西,例如微软的CDN,使用它,我们的网页可以不提供jQuery,由微软的网站帮我们提供:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
回到我们的2698端口的网页,上面我们在Click事件里有一个对2701端口域的jQuery文件的请求,这次使用script标签来请求。
<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>
当然,200,OK了
同样是端口2698的网页发起对2701域的请求,放在script里设置scr属性的OK了,另一个方式就悲剧。利用script的跨域能力,这就是jsonp的基础。
利用script获取不同源的json
既然它叫jsonp,很明显目的还是json,而且是跨域获取。根据上面的分析,很容易想到:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。实践:
function CreateScript(src) {$("<script><//script>").attr("src", src).appendTo("body") }
添加一个按钮事件来测试一下:
$("#getOtherDomainJson").click(function () {$.get('http://localhost:2701/home/somejson', function (data) {console.log(data)}) })
首先,第一个浏览器,http://localhost:2701/home/somejson这个Url的确是存在一个json的,而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的,但是最下面报js语法错误了。原来用script标签加载完后,会立即 把响应当js去执行,很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。
利用script获取异域的jsonp
显然,把上面的json放到一个回调方法里是最简单的方法。例如,变成这样:
如果存在jsonpcallback这个方法,那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。
由于服务器不知道客户端的回调是什么,不可能hard code成jsonpcallback,所以就带一个QueryString让客户端告诉服务端,回调方法是什么,当然,QueryString的key要遵从服务端的约定,上面的是”callback“。
添加回调函数:
function jsonpcallback(json) {console.log(json) }
把前面的方法稍微改改参数:
$("#getJsonpByHand").click(function () {CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback") })
200OK,服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的 东方"}),我们也写了jsonpcallback方法,当然会执行。OK顺利获得了json。没错,到这里就是jsonp的全部。
利用jQuery获取jsonp
上面的方式中,又要插入script标签,又要定义一个回调,略显麻烦,利用jQuery可以直接得到想要的json数据,同样是上面的jsonp:
$("#getJsonpByJquery").click(function () {$.ajax({url: 'http://localhost:2701/home/somejsonp',dataType: "jsonp",jsonp: "callback",success: function (data) {console.log(data)}}) })
得到的结果跟上面类似。
总结
一句话就是利用script标签绕过同源策略,获得一个类似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想得到的json。
jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})
来源:http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html
ADD 原生js:
<button id="btn">click</button>
<script type="text/javascript">
function $(str){
return document.getElementById(str)
}
function CreateScript(src) {
var Scrip=document.createElement('script');
Scrip.src=src;
document.body.appendChild(Scrip);
}
function jsonpcallback(json) {
console.log(json);//Object { email="中国", email2="中国222"}
}
$('btn').οnclick=function(){
CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")
}
</script>
本文转载于:http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html
转载于:https://www.cnblogs.com/zwdx/p/8184034.html
转载:jsonp详解相关推荐
- ajax jsonp 解析data,jsonp详解
title: jsonp详解 tags: categories: ajax不允许跨域获取数据 说明,假定后端语言是 PHP script标签 jsonp的原理:script标签具有跨域性,可以利用Sc ...
- 嵌入式基础01【转载】详解大端模式和小端模式
---------------- 版权声明:本文为CSDN博主「ce123」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog. ...
- 转载:详解Quartus导出网表文件:.qxp和.vqm
详解Quartus导出网表文件:.qxp和.vqm www.cnblogs.com 2013-12-31 17:38 当项目过程中,不想给甲方源码时,该如何?我们可以用网表文件qxp或者vqm对资源进 ...
- 浏览器跨域问题(jsonp)——jsonp详解
json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是"用来跨域的",一直不知道具体是个什么东西.今天总算搞明白了.下面一步步来搞清楚jsonp是个什么玩 ...
- 【转载】详解 Spring 3.0 基于 Annotation 的依赖注入实现
转载自:http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-iocannt/ Spring 的依赖配置方式与 Spring 框架的 ...
- [转载] 多线程详解java.util.concurrent
参考链接: java.lang.Object的灵活性 一.多线程 1.操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己的独立地址空间,包含程序内 ...
- [ 转载 ] Handler详解
带着问题学习 Android Handler 消息机制 Marker_Sky 关注 0.4 2018.02.06 18:04* 字数 3992 阅读 541评论 0喜欢 13 学习 Android ...
- [转载] epoll详解
转载自http://blog.csdn.net/xiajun07061225/article/details/9250579 什么是epoll epoll是什么?按照man手册的说法:是为处理大批量句 ...
- 【转载】详解Android中接口回调、方法回调
转载链接:https://blog.csdn.net/qq_31881469/article/details/80089675
最新文章
- VTK修炼之道10:可视化管道的连接与执行
- IOS开发基础之使用AFNetworking框架下载服务器资源图片
- 第一章 计算机网络 3 标准化工作和相关组织 [计算机网络笔记] -简单浏览了解即可
- 【BAT面试现场】如何判断一个数是否在40亿个整数中?
- 剑指offer-JZ27 二叉树的镜像(C++,附思路)
- 相关函数: atof, atoi, atol, strtod, strtoul
- java 页面传值_java-jsp springmvc-controller 传值到页面的方法
- 【习惯】是学习最好的坚持方式
- ftp访问命令 linux,linux访问ftp服务器命令
- 对话斯坦福商学院教授:颠覆大公司的不是技术,是商业模式
- 主动降噪ANC 耳机的传参设计
- Excel 绘制正态概率图-正态性检验
- 苹果app调试流水账
- 日置(HIOKI)MR8875-30数据处理
- 学习分布式系统需要的知识
- 优缺点 快速扫描 硬盘监测_有了这6款mac硬盘检测工具 你就能够快速检测磁盘的状态和错误情况...
- 今天开始学Java log2N的表示
- 红绿灯交通标志机动车行人数据集
- 计算机组成原理 --- 数据信息的表示
- QQ自动添加好友脚本工具分享