L--js跨域

什么事跨域？

　　概念：只要协议、域名、端口又热和一个不同，都被当做跨域。

URL	说明	是否允许通信
http://www.cnblogs.com/a.js
http://www.cnblogs.com/b.js	同一域名	允许
http://www.cnblogs.com/lab1/b.js
http://www.cnblogs.com/lab2/b.js	同一域名下，不同文件夹	允许
http://www.cnblogs.com:8000/a.js
http://www.cnblogs.com/b.js	同一域名，不同端口	不允许
http://www.cnblogs.com/a.js
https://www.cnblogs.com/b.js	同一域名，不同协议	不允许
http://www.cnblogs.com/a.js
http://42.121.252.58/b.js	域名和域名对应的ip	不允许
http://www.cnblogs.com/a.js
http://gudoumaoning.cnblogs.com/b.js	主域名相同，子域名不用	不允许
http://www.cnblogs.com/a.js
http://cnblogs.com/b.js	同一域名，不同二级域名	不允许
http://www.cnblogs.com/a.js
http://www.gudoumaoning.com/b.js	不同域名	不允许

 对于端口和协议的不同，只能通过后台来解决

方法一：跨域资源共享(CORS)

CORS(Cross-Origin Resource Sharing) 跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定

请求或相应是应该成功还是失败。

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET"， "/test", true);
    xhr.send();
</script>

 

以上的test是相对路径，如果要使用CORS，相关的ajax代码如下：

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET"， "http://www.cnblogs/com/test", true);
    xhr.send();
</script>

两端代码相比的区别在于相对路径换成了其他域的绝对路径，也就是要跨域访问的接口地址。

服务器端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许ajax进行跨域的访问

方法二：通过JSONP跨域

JSONP：维基百科的定义是：JSONP(JSON with Padding )是资料格式JSON的一种“使用模式”，可以让网页从别的网域要资料。

JSONP也叫做填充式JSON，也就是JSON的一种新方法，只不过是被包含在函数调用中的JSON

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

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

<script type="text/javascript">
    function doSomething (JSONData) {
        //处理跨域获得的json数据
    }
</script>
<script type="text/javascript" src="http://www.cnblogs.com/data.php?callback=doSomething"></script>

js文件载入成功后会执行我们在url参数中指定的函数，并且会把需要的json数据作为参数传入。所以JSONP是需要服务器端的页面进行相应的配合的。

<?php
    $callback = $_GET["callback"];             //得到会回调函数名
    $data = array('a', 'b', 'c');              //要返回的数据
    echo $callback.'('.json_encode($data).')'; //输出
?>

最终输出的结果为：doSomething(['a', 'b', 'c']);

如果使用jquery，那么通过他封装的方法就能很方便的来进行JSONP操作了。

<script type="text/javascript">
    $.getJSON('http://www.cnblogs.com/data.php?callback=?', function(JSONData) {
        //处理获得的json数据
    })；
</script>

jquery会自动生成一个全局函数来替换callback=? 中的问号，之后获取数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax

方法；跨域的话则会异步加载js文件的形式来调用jsonp的回调函数。

JSONP的优缺点：

　　优点：它不像XMLHttpRequest对象实现的ajax请求那样受到同源策略的限制；他的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以

通过调用callback的方式回传结果。

　　缺点：之支持GET请求而不支持POST等其他类型的请求；只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行Javascript调用的问题。

CORS和JSONP对比

　　JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

　　使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

　　JSONP主要被老的浏览器支持，他们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

方法三：通过修改document.domain来跨子域

浏览器都有一个同源策略，其限制之一就是不能通过ajax的方法去请求不同源中的文档，他的第二个限制是浏览器中不同域的框架之间是不能进行js的交互的操作。

不同框架之间是可以获取window对象的，但无法获取相应的属性和方法。

比如，有一个页面，他的地址是"http://www.cnblogs.com/a.html"，在这个页面里面有一个iframe，他的src是"http://cnblogs.com/b.html",很显然，这个页面与他里面的iframe框架是不同域的，所以我们是

无法同过在页面中书写js代码来获取iframe中的东西的：

<script type="text/javascript">
    function test () {
        var iframe = document.getElementById('iframe');
        var win = document.contentWindow; //可以获取到ifame里的window对象，但该对象的方法和属性几乎不可用
        var doc = win.document;           //这里获取不到iframe里的document对象
        var name = win.name;              //这里同样获取不到window对象的name属性
    }
</script>
<iframe id="iframe" src="http://cnblogs.com/b.html"></iframe>

这个时候，document.domain就可以派上用场了，只要把"http://www.cnblogs.com/a.html"和"http://cnblogs.com/b.html"这两个页面的document.domain都设成相同的域名就可以了。

但要注意的是，document.domain的设置是有限制的，只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

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

<iframe id="iframe" src="http://cnblogs.com/b.html" onload="test()"></iframe>
<script type="text/javascript">
    document.domain = "cnblogs.com";
    function test () {
        alert(document.getElementById('iframe').contentWindow);//contentWindow可取得子窗口的window对象
    }
</script>

2.在页面http://cnblogs.com/b.html中也设置document.domain:

<script type="text/javascript">
    document.domain = "cnblogs.com";//在iframe载入这个页面也设置document.domain,使之与主页面的document.domain相同
</script>

修改document.domain的方法只适用于不同子域的框架间的交互。

方法四：使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口（window）的声明周期内，窗口载入的所有页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name

是持久存在一个窗口载入过的所有页面中的

方法五：使用HTML5的window.postMessage方法跨域

window.postMessage(message, targetOrigin)方法是html5新引进的特性，可以使用他来向其他的window对象发送消息，无论这个window对象是属于同源或不同源

目前IE8+,FireFox,Chrome,Opera等浏览器都已经支持window.postMessage方法