Ajax全接触(五) 处理跨域方式

那么什么是跨域呢？

处理跨域方式-代理

我们在前端代码中将ajax访问后台url改成http://127.0.0.1:80/dengtu/serverjsonp.php

$(document).ready(function() {
    $("#search").click(function() {
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:80/dengtu/serverjsonp.php?number=" + $("#keyword").val(),
            dataType: "json",
            success: function(data) {
                if (data.success) {
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误：" + data.msg);
                }
            },
            error: function(jqXHR) {
                alert("发生错误：" + jqXHR.status);
            },
        });
    });

    $("#save").click(function() {
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:80/dengtu/serverjsonp.php",
            data: {
                name: $("#staffName").val(),
                number: $("#staffNumber").val(),
                sex: $("#staffSex").val(),
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data) {
                if (data.success) {
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误：" + data.msg);
                }
            },
            error: function(jqXHR) {
                alert("发生错误：" + jqXHR.status);
            },
        });
    });
});

http://127.0.0.1:80/dengtu指向的也是http://localhost/dengtu但是他们不是一个域名，

这样我们能访问到吗？

答案是不能，返回错误告诉你没有权限访问。

这就要用到跨域了

那么什么是跨域呢？

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，什么是跨域呢，简单的理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或c.a.com域名下的对象。

子域名不相同都会认为是跨域

通过代理跨域

举个例子在上海服务器上，有一个服务

www.shanghai.com/service.php

在北京服务器上也有个服务

www.beijing.com/proxy.php

北京这个服务其实是从后端去访问上海的这个服务www.shanghai.com/service.php然后把服务的响应值获取过来，返回给前端，

也就是北京的服务在后台做了个代理，这样前端只需要访问北京的代理的服务也就相当于访问了上海的服务。

处理跨域方式–JSONP

JSONP不支持post方式

在jquery的ajax中使用git方式访问跨域，

前端

需要改变dataType: "jsonp",
接着再增加一个属性jsonp:"callback",``jsonp:"任意值",

后端

在git请求处理中，获取到callback，$jsonp=$_GET["callback"];
改变返回值，echo $jsonp.'({"success":false,"msg":"参数错误"})';

前端代码

$(document).ready(function() {
    $("#search").click(function() {
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:80/dengtu/serverjsonp.php?number=" + $("#keyword").val(),
            dataType: "jsonp",
            jsonp:"callback",
            success: function(data) {
                if (data.success) {
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误：" + data.msg);
                }
            },
            error: function(jqXHR) {
                alert("发生错误：" + jqXHR.status);
            },
        });
    });

后端代码

//通过员工编号搜索员工
function search(){
    $jsonp=$_GET["callback"];
    //检查是否有员工编号的参数
    //isset检测变量是否设置；empty判断值为否为空
    //超全局变量 $_GET 和 $_POST 用于收集表单数据
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo $jsonp.'({"success":false,"msg":"参数错误"})';
        return;
    }
    //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
    //global 关键词用于访问函数内的全局变量
    global $staff;
    //获取number参数
    $number = $_GET["number"];
    $result = $jsonp.'({"success":false,"msg":"没有找到员工。"})';

    //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = $jsonp.'({"success":true,"msg":"找到员工：员工编号：' . $value["number"] . 
                            '，员工姓名：' . $value["name"] . 
                            '，员工性别：' . $value["sex"] . 
                            '，员工职位：' . $value["job"] . '"})';
            break;
        }
    }
    echo $result;
}

这样就能通过jsonp来获取跨域信息。

callback和jsonp的作用和原理

1先定义一个”callback123”字段用来映射jquery生成的jQueryxxxxx_xxxxx函数名（这个函数在服务器处理完毕并返回数据时再由jquery调用）；

然后jsonp协议直接请求http://127.0.0.1:8080/ajaxdemo/service.php?number=111；（个人感觉jsonp协议不受同源策略限制）
接着服务器端定义变量$jsonp获取请求中名为”callback123”的值，也就是获取到回调函数名”jQueryxxxxx_xxxxx”；
再接着服务器处理完毕后将数据放到回调函数中，也就是视频中老师以jQueryxxxxx_xxxxx(jsondata)这种$jsonp拼接(jsondata)的形式返回给前端；
最后前端接收到”jQueryxxxxx_xxxxx(jsondata)”，jquery调用这个jQueryxxxxx_xxxxx函数，将jsondata传入到success中的function中，这样就实现了跨域。

处理跨域方式–XHR2

XMR2方法不支持ie10以下版本。

使用XMR2方法

在服务端改写脚本

header('Access-Control-Allow-Origin:*');   //值设置为*。*意思是所有域都可以访问，当然可以设置特定的域名
header('Access-Control-Allow-Methods:POST,GET');  //允许post/git
header('Access-Control-Allow-Credentials:true'); 
header("Content-Type: application/json;charset=utf-8");

这样就能做到跨域