初步了解关于js跨域问题
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的回调函数。
二、document.domain
这个方法说到底就是将两个域设置成相同的域名,比如,可以把http://www.a.com和http://a.com设成相同的域名即可,但是这个设置是有条件限制的,document.domain只能设置成自身或更高一级的父域,比如b.c.a.com可以设成、b.c.a.com、c.a.com、a.com都是可以的,但是设成d.b.c.a.com是不可以的,因为这是b.c.a.com的子域,同样,设成d.com也是不可以的,因为已经是不同域了。
而且document.domain只适用于不同的子域之间的框架间的交互,如果要通过ajax方法进行跨域获取数据的话,可以在本页面设置一个隐藏的iframe来进行代理,将ifame载入跟需要获取数据的那个页面相同的域的页面,然后通过iframe获取数据,而js也可以正常的操作这个iframe,再通过document.domain方法去获取iframe里的数据就可以了。
举个例子:
在http://a.html里设置主域,
<script>
document.domain="a.html";//设置成主域
function test(){
alert("document.getElementById('iframe').contentWindow");
}
</script>
<body>
//载入需要获取页面的数据
<iframe id="iframe" src="http://b.com/data.html" onload="test()" ></iframe>
</body>
初步了解关于js跨域问题的更多相关文章
- 初步了解关于js跨域问题-jsonp
js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...
- 5种处理js跨域问题方法汇总(转载)
1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 前端Js跨域方法汇总—剪不断,理还乱,是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
- 【js跨域】js实现跨域访问的几种方式
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【前端】【转】JS跨域问题总结
详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...
- js跨域访问,No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
- 利用JS跨域做一个简单的页面访问统计系统
其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...
- 三种方法实现js跨域访问
转自:http://narutolby.iteye.com/blog/1464436 javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档 ...
随机推荐
- 模拟做饭系统(java+线程中的join方法)
(一)项目框架分析 妈妈要去做饭,发现没有酱油,让儿子去买酱油,然后回来做饭. 根据面向对象的思想,有两个对象,妈妈和儿子 主要有两个方法: (一)没有线程控制(即儿子没有买酱油回来妈妈就做好饭了)+ ...
- 每天一个linux命令(43)--netstat命令
netstat 命令用于显示与 IP TCP UDP 和 ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat 是在内核中访问网络及相关信息的程序,它能提供TCP连接,T ...
- iOS回顾笔记(04) -- UIScrollView的基本使用详解
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- [HDU1210] Eddy's 洗牌问题
Problem Description Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如果他有2N张牌,编号为1,2,3..n,n+1,..2n.这也是 ...
- Nginx+IIS+Redis 处理Session共享问题 2
接下来主要说下利用nginx来测试 两台Windows server 1.10.120.131.210 - 端口84部署demo 2.10.120.131.211 - 端口84部署demo ngi ...
- mysql数据库开始——增删改
注释语法:#注释语 一.T-SQL语句注意:1.语句写完后用“分号:”代表这一句结束2.列结束用逗号,最后一列写完不用写逗号3.符号一定是英文的 关键字:主键:primary key外键:foreig ...
- ios8指纹识别
简介 苹果从iPhone5S开始,具有指纹识别技术,从iOS8.0之后苹果允许第三方 App 使用 Touch ID进行身份验证.指纹识别Touch ID提供3+2共5次指纹识别机会(3次识别失败后, ...
- java+++IO流操作
序:IO流的操作主要分为两种读和写.一方面:我们可以通过不加缓冲类字符流BufferedReader/Writer和字节流BufferedInputStream/OutputStream来进行简单的读 ...
- .Net Core迁移到MSBuild平台(二)
一.前言 在上一篇文章.Net Core迁移到MSBuild的多平台编译问题中,简单的讲了下新的项目配置文件中的节点配置,这篇我将用一些例子来详细讲下从project.json迁移到msbuild过程 ...
- 阿里云Linux启动tomcat并能外网访问
问题描述: 先描述一下我的心路历程吧,新买了阿里云服务器,由于需求不是很大,只是为了备案,所以买了个最低配的,而且是Windows server2012的.那现在需要做的是在这个乞丐版的server上 ...