JS跨域请求服务器数据的几种实用方法

域与源

js跨域是指通过js在不同域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者说通过js获取页面中不同域的框架中(iframe)的数据。

只要协议、域名、端口有任何一个不同，都被当作是不同的域。所谓同源是指，域名，协议，端口完全相同。

而要实现跨域，我们可以使用一下几种方法：

通过JSONP跨域

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

比如，有个a.html页面，它需要利用ajax获取一个不同域上的json数据。而这个json数据是来自http://example.com/data.php,代码如下：

<?php 
    //通过_GET方法获取回调函数，即请求数据客户端和服务器之间事先约定好的函数，在数据被获取之后调用的函数
	$callback=$_GET['callback'];
	$data=array['a','b','c']; //数组
// echo会输出数据，适合于php与浏览器、 javascript之间进行通信，或者不同服务器之间进行通信
	echo $callback.'('+json_encode($data).')'; //"."为字符串拼接符，json_encode方法将data数组转化为json格式并进行转码，此处调用了回调函数

而此时a.html的代码就可以这样：

<script>
        function fun(jsondata){
        	//处理获得的json数据
        }
</script>
//设置回调函数
<script src="http://example.com/data.php?callback=fun"></script>

这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

知道jsonp跨域的原理后我们就可以用js动态生成script标签来进行跨域操作了，而不用特意的手动的书写那些script标签。

如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。

那样你就不用多写一个script了：

<script>
    $.getJSON('http://example.com/data.php?callback=?',function(jsondata){
    	//处理获得的json数据          
    });
</script>

我们发现，以上调用的回调函数没有函数名，原理是这样的，jquery会为回调函数自动生成一个全局函数，这个函数名是随机的，这个生成的随机函数只是起一个临时代理函数的作用，随后任务完成后又会被销毁。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

这里讲一下异步的概念：

我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。

可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。

试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。

web前端里的异步更新，就要用到 Ajax。

同步：必须等待前面的任务完成，才能继续后面的任务。
异步：不受当前任务的影响。

拿排队举例：

同步：在银行排队时，只有等到你了，才能够去处理业务。
异步：在排队的时候，可以玩手机。

通过修改document.domain来跨子域

有一个页面，它的地址是http://www.example.com/a.html ，在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，如果使用

iframe（iframe对象）.currentWindow，这是可以获取到iframe的window对象的，但是该获取的对象的属性和方法几乎是不可用的。所以我们是无法通过在页面中书写js代码来获取iframe中的东西的。

这时候，document.domain就可以派上用场了。

这个时候，document.domain就可以派上用场了，我们只要把http://www.example.com/a.html 和 http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。

在页面 http://www.example.com/a.html 中设置document.domain:

<iframe src=" http://www.example.com/b.html" id="iframe" onload="test()">
    <script>
    	document.domain='example.com'; //设置成主域
        function test(){
            alert(document.getElementById('iframe').contentWindow);
        }
    </script>
</iframe>

在页面 http://example.com/b.html 中也设置document.domain，而且这也是必须的，虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值：

1
2
3

<script>
	document.domain='example.com';  
</script>

这样我们就可以通过js访问到iframe中的各种属性和对象了。

不过如果你想在http://www.example.com/a.html 页面中通过ajax直接请求http://example.com/b.html 页面，即使你设置了相同的document.domain也还是不行的，所以修改document.domain的方法只适用于不同子域的框架间的交互。

如果你想通过ajax的方法去与不同子域的页面交互，除了使用jsonp的方法外，还可以用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的，然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发送ajax请求，然后收到的数据我们也可以获得了。

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

比如：有一个页面a.html,它里面有这样的代码：

<script>
	window.name='我是页面a设置的值';
    setTimeout(function(){
        window.location='b.html';
    },3000); //3秒后把一个新页面b.html载入到当前的window
</script>

再看看b.html页面的代码：

1
2
3

<script>
	alert(window.name);  
</script>

a.html页面载入后3秒，跳转到了b.html页面，结果为：

QQæªå¾20130613230631

我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。如果在之后所有载入的页面都没对window.name进行修改的话，那么所有这些页面获取到的window.name的值都是a.html页面设置的那个值。

当然，如果有需要，其中的任何一个页面都可以对window.name的值进行修改。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。

上面的例子中，我们用到的页面a.html和b.html是处于同一个域的，但是即使a.html与b.html处于不同的域中，上述结论同样是适用的，这也正是利用window.name进行跨域的原理。

下面就来看一看具体是怎么样通过window.name来跨域获取数据的。还是举例说明。

比如有一个www.example.com/a.html页面,需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html里的数据。

data.html页面里的代码很简单，就是给当前的window.name设置一个a.html页面想要得到的数据值。data.html里的代码：

QQæªå¾20130613230631

那么在a.html页面中，我们怎么把data.html页面载入进来呢？显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面，因为我们想要即使a.html页面不跳转也能得到data.html里的数据。答案就是在a.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取data.html的数据，然后a.html再去得到iframe获取到的数据。

充当中间人的 iframe 想要获取到data.html的通过window.name设置的数据，只需要把这个iframe的src设为www.cnblogs.com/data.html就行了。然后a.html想要得到iframe所获取到的数据，也就是想要得到iframe的window.name的值，还必须把这个iframe的src设成跟a.html页面同一个域才行，不然根据前面讲的同源策略，a.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。

看下a.html页面的代码：

上面的代码只是最简单的原理演示代码，你可以对使用js封装上面的过程，比如动态的创建iframe,动态的注册各种事件等等，当然为了安全，获取完数据后，还可以销毁作为代理的iframe。网上也有很多类似的现成代码，有兴趣的可以去找一下。

通过window.name来进行跨域，就是这样子的。

使用HTML5中新引进的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的对象为消息发送方的window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

上面所说的向其他window对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个window对象。在讨论第二种方法的时候，我们说过，不同域的框架间是可以获取到对方的window对象的，而且也可以使用window.postMessage这个方法。

下面看一个简单的示例，有两个页面。a.html中加载了b.html中的一个 iframe ，并加载页面的时候来自a.html中的iframe对象所绑定的window对象调用了发送了消息，而且接收方不限定域。这时在b.html页面中就可以获取数据了。

QQæªå¾20130613230631