ajax跨域的几种实现方式

ゞ浴缸里的玫瑰 2022-11-30 05:46 189阅读 0赞

## 什么是跨域 ##

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

## 原生态ajax跨域实现 ##

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

服务器响应

<?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>