ajax跨域的方法

1. 跨域的原因

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

“同源"指的是"三个相同”：

	协议相同
	域名相同
	端口相同

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html	失败	主机不同

目的：

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

限制：

	随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制：
	  (1)Cookie、LocalStorage 和 IndexDB 无法读取。
	  (2)DOM 无法获得。
	  (3)AJAX 请求不能发送。

Ajax跨域

Ajax跨域指的是将Ajax请求进行跨域处理，而不是说在Ajax中提供了跨域的方法。同源政策中明确规定Ajax请求只能发给同源的网址，否则就会发生跨域报错。除了设置代理之外页面中有三种常见的解决跨域的手段，

​		1. 设置服务端响应头
​		2. 代理
​		3. JSONP

jaonp跨域

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
作为前端开发人员，我们应该掌握的跨域方法是jsonp
JSONP特点就是简单适用，浏览器全部支持，服务器改造非常小。

原理

它的基本思想是，网页通过添加一个script元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

​ 使用方法：

①、在html中插入script标签，并利用script标签发起跨源请求

②、在服务器对应php文件中通过拼接字符串，模拟函数调用。并将要返回数据通过回调函数参数返回。

③、在html页面中，显式写出回调函数。这样当跨源请求完成后对应回调函数会自动执行。

优点：

​ (1)由于使用script脚本作为请求，因此实际上请求和传统的引入js脚本没有任何区别。
​ (2)而在返回的数据中我们也尽量模拟出了js调用函数的语法，因此只要在页面中声明了回调函数就会自动被调用。
​ (3)再者作为参数的【服务器端】的JSON数据，在js中是被直接识别为对象，因此在回调函数中也避免了使用JSON.parse的步骤。

代码：

	function aaa(a){
            console.log(a)
        }
        test(123)

        // 封装jsonp
        function addScript(src){
        	// 创建<script>
            var script = document.createElement("script")
            // 修改src属性
            script.src = src;
            // 添加到body
            document.body.appendChild(script)
        }
        // 加载完成后执行函数
        window.onload = function(){
            addScript("http://127.0.0.1:8888/jsonp.php?callback=aaa")
        }

<?php
    $a = $_GET["qqq"];
    $b = '123';
    // echo "123";
    echo $a.'('.$b.')';
?>