ajax跨域

2017-12-15 本文已影响11人 liangxifeng833

一. 同源跨域限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据，并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用，但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域，并且使用 GET 请求获取任何第三方资源。不过，获取资源后，框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

二. 什么是jsonp

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

三 .JSONP有什么用？

ajax : 使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器
而由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

四．json优缺点

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

四．如果使用？

在topic.ljlj.cc域下的html页面js:

<script type="text/javascript">
$(function(){
    var urlpath = "http://admin.ljlj.cc/index.php/ajax/hongpingguo_sale/"; //访问admin.ljlj.cc域下的内容
    /*统一验证*/
    $("#sub").click(function(){
        $(this).attr('onclick','javascript:;');
        $('#success').html('信息提交中，请稍后。');
    });
     //得到所有已报名人信息
    $.ajax({ crossDomain: true, type: 'GET', url: urlpath+"totalNum" ,data: {random:Math.random()},
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType:"jsonp",
        jsonpCallback: "myJsonMethod",
        });
     
});
//回调函数 html<ul id="dataListOne"></ul>
function myJsonMethod(dataArr) 
{
    $("#dataListOne").html("");
    $.each(dataArr,function(index,value){
        $("#dataListOne").append("<li><span>"+value.tmpName+"</span>"+value.tmpPhone+"</li>");
    })
}
</script>

php代码：

    /**
    * 总记录数
    * @return - [json] - 所有记录
    */
    function totalNum()
    {
        $res = $this->hongpingguo->getTotal();
        $flag ='*';
        foreach($res as &$val)
        {
            //姓名隐私处理
            $namePrefix = mb_substr($val['name'],0,1,$this->_code);
            $nameLength = mb_strlen($val['name'],$this->_code);
            if(2<$nameLength) $flag = '**';
            $val['tmpName'] = $namePrefix.$flag; 
            //手机号码隐私处理
            $val['tmpPhone'] = substr($val['phone'],0,3).'xxxx'.substr($val['phone'],-4,4);
        }
        echo 'myJsonMethod('.json_encode($res).')';
    }