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跨域问题的更多相关文章

  1. 初步了解关于js跨域问题-jsonp

    js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...

  2. 5种处理js跨域问题方法汇总(转载)

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

  3. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  4. 前端Js跨域方法汇总—剪不断,理还乱,是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  5. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  6. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

  7. 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 ...

  8. 利用JS跨域做一个简单的页面访问统计系统

    其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...

  9. 三种方法实现js跨域访问

    转自:http://narutolby.iteye.com/blog/1464436 javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档 ...

随机推荐

  1. c#之循环效率

    很多人在保存数据时候对于使用数组.集合等?然后遍历数据的时候是for.froeach? 下面我就写一个小例子进行测试看看,话不多说,直接用数据说话. 1.构建数据分别是数组.集合构建,数据类型分别是值 ...

  2. Redis Cluster部署、管理和测试

    背景: Redis 3.0之后支持了Cluster,大大增强了Redis水平扩展的能力.Redis Cluster是Redis官方的集群实现方案,在此之前已经有第三方Redis集群解决方案,如Twen ...

  3. JavaWeb之DBUtils

    一.什么是DBUtils及作用 DBUtils是apache公司写的.DBUtils是java编程中的数据库操作实用工具,小巧简单实用. DBUtils封装了对JDBC的操作,简化了JDBC操作.可以 ...

  4. swift -- 类中的方法

    一. 引用类型  类 在类中定义方法 class Person { //属性 var name : String = "" //方法 //实例方法 : 在类里面创建一个方法 fun ...

  5. VS2010在网络共享目录使用IntelliSense、ipch、sdf和SQL Compact Server相关问题

    Microsoft SQL Compact Server 是专用于 Visual Studio 的单机SQL 数据库.数据库文件名的后缀为SDF. 而VS2010 拒绝在网络共享目录中建立和打开SDF ...

  6. java-信息安全(五)-非对称加密算法RSA

    概述 信息安全基本概念: RSA算法(Ron Rivest.Adi Shamir.Leonard Adleman,人名组合) RSA RSA公钥加密算法是1977年由罗纳德·李维斯特(Ron Rive ...

  7. 千呼万呼使出来Gogland (jetBrains发布的golang IDE)

    由于之前一直在用PyCharm在开发, 已经习惯了这个IDE. 转golang开发后一直没找到合适的debug功能的IDE,忽然听说jetBrains发布测试版golang IDE: Gogland带 ...

  8. 小故事理解TCP/IP连接时的三次握手

    在TCP/IP协议中,TCP协议通过三次握手建立一个可靠的连接,示意图如下: 下面通过一个小故事简单理解一下这三次握手的具体含义: 一天,快递员小客(客户端)准备去小服(服务器)家去送快递(准备与服务 ...

  9. mybatis对java自定义注解的使用——入门篇

    最近在学习spring和ibatis框架. 以前在天猫实习时做过的一个小项目用到的mybatis,在其使用过程中,不加思索的用了比较原始的一种持久化方式: 在一个包中写一个DAO的接口,在另一个包里面 ...

  10. Java第一次作业

    (一)学习总结 1.在java中通过Scanner类完成控制台的输入,Scanner类实现基本数据输入的方法是什么? import java.util.Scanner; System.out.prin ...