Javascript中关于跨域访问的学习笔记

谈到跨域访问，我们首先要了解什么是域？我们为什要跨域？

对于我们大天朝的baidu(https://www.baidu.com/)https是协议，www是子域名，baidu是主域名，端口号默认80。

其中只要有一项不相同，就是不同的域。如果需要访问数据我们需要避开javascript出于安全考虑的同源策略的影响，这个时候我们就需要通过一些方法实现跨域访问数据。

对于baidu（https://www.baidu.com/）和QQ（http://www.qq.com/）如果它们两要相互访问资源的话就是跨域访问。

想必大家想到跨域第一时间就会想起Jsonp（也就是json+padding坊间的说法就是json的扩充，但是我觉得没有多大的联系），那我们就来先看看jsonp如何实现跨域：

首先，让我们回想我们在引用线上库也就是我们常说的CDN时，就是在页面head头里添加一个

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

然后我们在后续的页面可以调用Jquery里的方法，我相信这就完成了一次跨域，这也就表明script标签里的src=“”这个属性可以实现跨域访问。这也就是jsonp的基本原理。

jsonp实现跨域的原理简单来说分为2步：

1.在发起get请求时，动态在页面的head区生成一个script标签，将我们需要跨域访问的地址设置给其src属性，并返回一个包裹着参数的函数调用。

2.在这个文件上方我们会写相同的函数名的函数，并传一个形参进去。

eg：

<script>
    function callbackFunction(data){
        alert("我取到后台的值是"+data);
    }
</script>
<script src="http://192.168.1.105/test.php?jsoncallback=callbackFunction"></script>                      

后台代码如下：（其中后台接口URl“？”后面的jsoncallback是写死的，callbackFunction是我们可以自己命名，也就是我们的传形参的函数名）
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>