初步了解关于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开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档 ...
随机推荐
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- 一个简单的php站点配置
一个简单的php站点配置 现在我们来看在一个典型的,简单的PHP站点中,nginx怎样为一个请求选择location来处理: server { listen 80; ...
- Handlebars模板引擎之进阶
取得索引 我想取得索引作为序号这个是常用的.在handlebars也是存在的. 就是使用 @index 来获取索引 {{#each this}} <tr> <td>{{ @in ...
- 使用咪咕云做C站视频直链源
首先我们先百度搜索一下“咪咕云” 点击进入-->用户注册或登录 注册时选择个人用户-->前往邮箱激活-->进入邮箱激活成功后重新登录 登录后在控制台选择“云点播” 即可进行上传视频了 ...
- iOS基础之顺传逆传传值（delegate、block）
写给iOS新手的福利! 在项目中经常会用到传值,根据传值的方向分为顺传(从根控制器到子控制器)和逆传(从子控制器到根控制器).在这里写了个Demo简单演示了效果,创建了两个控制器: 一个为根控制器,一 ...
- 大数据系列之Flume+HDFS
本文将介绍Flume(Spooling Directory Source) + HDFS,关于Flume 中几种Source详见文章 http://www.cnblogs.com/cnmenglang ...
- android开发艺术探索读书笔记之-------view的事件分发机制
View的点击事件的分发,其实就是对MotionEvent事件的分发过程,即当一个MotionEvent产生后,系统需要把这个事件传递给一个具体的View,而这个过程就是分发过程. 分发过程主要由以下 ...
- java解析上传的excel
file是一个File,是一个excel文件 得到文件流:InputStream in = file.getInputStream() 需要引入的类 import jxl.Cell;import j ...
- 根据模板导出Excel报表并生成多个Sheet页
因为最近用报表导出比较多,所有就提成了一个工具类,本工具类使用的场景为 根据提供的模板来导出Excel报表 并且可根据提供的模板Sheet页进行复制 从而实现多个Sheet页的需求, 使用本工具类时 ...
- commonJS的核心思想
服务器端的 Node.js 遵循 CommonJS规范,该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来 ...