ajax跨域的几种实现方式

什么是跨域

同协议，同ip，同端口视为一个域，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

原生态ajax跨域实现

通过动态创建script标签通过src发送跨域地址，通过定义function XXX（）函数由服务器响应的内容调用，接收服务器响应的数据。注意，XXX（）函数名需要与服务器返回的函数名保持一致。

    <script type="text/javascript">
       //动态创建script标签发出去的请求是跨域请求，默认的请求方式是get。
        var script = document.createElement('script');
        //请求数据地址，？后面可以接传递的参数
        script.src = 'http://tom.com/data.php?flag=1&name=get';
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(script);
        // 这里的response函数实际上由服务器响应的内容调用
         function response(data){
            console.log(data);
        }
    </script>

服务器响应

   <?php
   //输出的response方法名需跟前端保持一致
   echo "response(123)";
   //也可以传个数组
   echo "response(".json_encode($arr).")";

jQuery实现ajax跨域请求

在jQuery实现ajax跨域请求中，请求的类型type只能为get，dataType只能为’jsonp’,jsonp表示跨域请求数据。

//引入jQuery包
    <script type="text/javascript" src="./jquery.js"></script>
    //jQuery代码
    <script type="text/javascript">
        $(function(){
        //点击发送请求
            $("#btn").click(function(){
                $.ajax({
                    type:'get',//跨域请求的type默认为get请求
                    url:'www.tie.com/jsonp.php',//请求的地址
                    dataType:'jsonp',//jsonp表示跨域请求数据
                    jsonp:'cb',//jsonp属性的作用就是自定义参数名字（callback=abc 这里的名字指的是等号前面的键，后端根据这个键获取方法名，jquery的默认参数名称是callback）
                    jsonpCallback:'abc',//这个属性的作用就是自定义回调函数的名字（callback=abc ，这里的名字指的是等号后面的值）
                    data:{},//需要传递给后端的值
                    //回调函数，接收后端响应的数据
                    success:function(data){
                        console.log(data);
                    },
                    //异常处理
                    error:function(data){
                        console.dir(data);
                        console.log('error');
                    }
                });
            });
        });
    </script>