初步了解关于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 Log日志规范
Overview 一个在生产环境里运行的程序如果没有日志是很让维护者提心吊胆的,有太多杂乱又无意义的日志也是令人伤神.程序出现问题时候,从日志里如果发现不了问题可能的原因是很令人受挫的.本文想讨论的是 ...
- JSP中三种弹出对话框的用法《转》
对话框有三种 1:只是提醒,不能对脚本产生任何改变: 2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if...else...判断 3: 一个带输入的对话框,可以返回用户填入的 ...
- JS一周游~（基础、运算符、条件语句）
一.基础篇 JavaScript 基于浏览器(客户端).基于(面向)对象{没有继承}.事件驱动(要有对象).脚本语言(灵活多变) 1.作用 表单的验证,减轻服务端的压力 添加页面动画效果 动态更改页面 ...
- Struts2学习笔记①
Struts2 学习笔记① 所有的程序学习都从Hello World开始,今天先跟着书做一个HW的示例. Struts2是一套MVC框架,使用起来非常方便,接触到现在觉得最麻烦的地方是配置文件.我的一 ...
- 你真的了解volatile吗，关于volatile的那些事
很早就接触了volatile,但是并没有特别深入的去研究她,只有一个朦胧的概念,就是觉得 用她来解决可见性的,但可见性又是什么呢? 最近经过查阅各种资料,并结合自己的思考和实践,对volatile有了 ...
- KoaHub.js：使用ES6/7特性开发Node.js框架（2）
介绍 KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, Async ...
- 1789: [Ahoi2008]Necklace Y型项链
1789: [Ahoi2008]Necklace Y型项链 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 421 Solved: 258[Submit] ...
- java异常详解
java异常需要弄清楚如下几个问题: 1.java异常的层次结构 2.搞清楚问题:java中异常抛出后代码还会继续执行吗? 答:该问题可以参考该博文,完美的回答了我的疑惑:http://www.cnb ...
- VAO VBO IBO大乱炖
最近对程序中绘制卡顿的问题忍无可忍,终于决定下手处理了.程序涉及的绘制比较多,除了点.线.三角形.多边形.圆柱体之外,还有自组格式模型.开始想全部采用显示列表优化,毕竟效率最高,虽然显示列表存在编译之 ...
- @ModelAttribute--SpringMVC 注解系列文章（二)
概述 在日常的开发工作中,更新操作是经常会涉及到的一个功能,但是对于一条记录的更新,往往只会更新一部分的信息,而不会整条记录都更新,比如修改用户年龄的时候,用户密码是不需要修改的,针对这种情况,处理的 ...