JS的跨域理解

前言

　　周一的学院点开题被批的很惨，换了个校长，各种被抓严，班上已经有两个同学打算休学了。哎，这周的聚会可能是大家集聚的最后一次吧。熬着吧，还是学习我的前端，不管老板学校咋逼了，找个好工作才是王道。今天把学习的几种跨域方法做个小结吧，不然就很容易忘了。

什么是跨域？

JavaScript处于安全方面的考虑，不允许跨域调用其他页面的对象。也就是说a.com域名下的JS无法操作b.com或者c.a.com域名下的对象。JS跨域就是要解决在不同的域之间的数据传输或通信。只要是协议、域名、端口有任何一个的不同，都被当做是不同的域。如下所示：

JSONP跨域

JsonP跨域是我们最常见的跨域方法，它所基于的原理：直接通过XMLHttpRequest是不能请求不同域的数据，但是我们可以在页面中引入不同域的JS文件。

假设a.html页面里面要获取http://b.com/data.php里面的json数据。那么我们可以在a.html页面中可以这样实现：

<script>
    function cb(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://b.com/data.php?callback=cb"></script>

在创建的script标签里src的url后面有个?callback=cb,这里cb就是我们获取数据后要执行的函数。

在data.php里面，返回的必须是一段可执行的JS文件。如下：

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

最终a.html页面得到的结果是cb(['a','b','c'])。这就得到我们想要的数据了。