初步了解关于js跨域问题-jsonp
js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?),或者是js获取在页面内的不同域的框架中的数据(iframe),ifame在不同域下的js通信。
跨域的表现主要有:协议不同,主机名不同,端口号不同
比如
http://www.abc.com和https://www.abc.com属于协议不同
http://www.abc.com和http://qqq.abc.com属于主机名不同
http://www.abc.com和http://www.abc.com:80属于端口号不同
而http://www.abc.com和http://www.abc.com/list.html是属于同域下的
第一种解决跨域问题的方法是:通过jsonp
在js中,我们直接通过XMLHttpRequest请求不同域的数据是不可以的,jsonp通过引入js脚本的方式解决了这个问题,比如假设需要在a.html中通过ajax获取不同域上的json数据,假设这个json数据就在http://www.abc.com/data.php,那么可以通过以js文件的形式引入
a.html
<script>
function dosomething(jsondata) {
//这里处理获得的json数据
}
</script>
<script src="http://www.abc.com/data.php?callback=dosomething"></script>
这里的获取数据的地址后还有callback参数是惯用参数名,因为是当做js文件引入的,那么返回的也应该是js文件,所以在这个页面的php中应该是这样的
<?php
$callback = $_GET('callback');//得到回调函数名
$data = array('a','b','c');//传递的数据
echo $callback.'('.json_encode($data).')';//输出
?>
输出:dosomething(['a','b','c'])
因此我们可以很清楚地知道,dosomething函数就是通过http://www.abc.com/data.php?callback=dosomething返回的js文件,dosomething函数的参数是返回的json数据,这样我们就得到了跨域的数据
所以通过jsonp的方法解决跨域问题的思路是,通过script标签引入一个js文件,这个js文件载入成功后会执行url参数中指定的函数,并且会把获取的json数据当做参数传入,所以jsonp是需要服务器端页面的配合的。
jQuery可以很方便地封装jsonp
<script>
$.getJSON("http://www.abc.com/data.php?callback=?",function(){
//处理JSON数据
});
</script>
jquery会自动生成一个全局函数来代替callback=?的?,与js实现的原理是一致的,之后获取到数据后,全局函数又会自动销毁,相当于一个临时代理函数的功能,
$getJSON方法可以自动判断是否跨域,如果不跨域,则按普通的ajax方法,如果跨域,就通过异步加载调用js文件来调用jsonp的回调函数。
初步了解关于js跨域问题-jsonp的更多相关文章
- JS跨域:jsonp、跨域资源共享、iframe+window.name
JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...
- 初步了解关于js跨域问题
js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...
- js跨域请求jsonp解决方案-最简单的小demo
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- JS跨域请求 JSONP B/S全代码
Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- JS跨域请求之JSONP
在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. JSONP的产生 1.众所周知,Ajax请 ...
- js跨域问题解释 使用jsonp或jQuery的解决方案
js跨域及解决方案 1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说, ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
随机推荐
- PHP判断手机号运营商(详细介绍附代码)
道理很简单,知道手机号规则 进行正则判断就可以 移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.15 ...
- 关于foo的一个面试题
今天看到一个关于foo的一个面试题,赶脚特别有意思 function foo(){// 第16行 getName = function(){console.log(1)} return this } ...
- fdisk 命令详解
fdisk 作用: 查看磁盘实体使用情况,也可对硬盘分区. 选项: -b 分区大小 -l 列出指定的外围设备的分区表状况 -s 分区编号, 将指定的分区大小输出到标准输出上, 单位为区块 -u ...
- Linux 下Beanstalk安装
1.安装 # wget https://github.com/kr/beanstalkd/archive/v1.10.tar.gz # tar xzvf v1.10 # cd beanstalkd-1 ...
- windows10合并分区
删除无用分区 将分区D合并到分区C,"计算机"---右键"管理"--"磁盘管理" 点击分区名,右键选择删除卷,如果有数据,提前备份 扩展分区 ...
- CHECKDB内部:什么是BlobEater?
DBCC CHECKDB注意到有关数据文件页面.一旦整个表的所有页(或一组表,如果配料已启用-看到同样的博客文章我上面提到的),所有的事实都聚集在一起,他们都应该相互抵消.当有额外的事实(在索引B树都 ...
- linux上查找文件存放地点和文件中查找字符串方法
一.查找文件存放地点 1.locate 语法:locate <filename> locate命令实际是"find -name"的另一种写法,但是查找方式跟find不同 ...
- SourceTree管理工具的一些使用总结
一.冲突解决 在团队合作中,如果两个人同时修改一个文件 ,这个时候如果合并他人提交的代码是会产生冲突的,怎么解决? 1.先将代码提交至本地服务器 2.合并他人代码,这个时候在工作副本中会显示我们冲突的 ...
- 建造者模式(Builder)-宏观的使用角度
建造者模式(Builder) 建造者模式是用来解决产品对象的创建过程是由多个零件组成的情况,这些零件与产品本身是组合关系,也就是部分与整体,这些零件的创建顺序,还有一些创建中的逻辑,都是稳定的,可以封 ...
- 申请的服务器安装tomcat后不能访问的问题
新申请的阿里云服务器,操作系统是CentOS6.5,安装jdk1.8版本,用java -version命令可以查看jdk版本,安装正确会有版本显示.然后安装tomcat,tomcat安装后默认端口是8 ...