初步了解关于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

function dosomething(jsondata) {

//这里处理获得的json数据

}

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

　$.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里设置主域，

　　document.domain="a.html";//设置成主域

　　function test(){

　　　　alert("document.getElementById('iframe').contentWindow");

　　}

</script>

<body>

//载入需要获取页面的数据

</body>

巴特西

初步了解关于js跨域问题

最新文章

热门文章