ajax 跨域的几种方式

网络上跨域的文章大多一样，这里我写下，巩固下自己的知识，顺便做个记录

什么是跨域

这里简单拿百度的网址做个例子：http://www.baidu.com:80 (默认都是80端口、可省略)
http 协议
www 子域名
baidu 主域名
80 端口号
总结：协议、子域名、主域名、端口，其中一个不一致的都称为跨域

jsonp 跨域

在网页中，我们会使用一些cdn图片、cdn资源，他们和我们的页面都不在一个域内，但是他们却可以使用，聪明的程序员使用src 可引入外部资源，实现了跨域的需求。
在页面中定义js函数，通过script 标签的src引入要请求的接口(这就是jsonp的原理)，接口中调用js函数，传入json 数据。我这里写了一个简单的例子

<!DOCTYPE html>
<html>
<head>
    <title>jsonp 跨域</title>
</head>
<body>

    <div id="ajax-wrap">通过ajax请求来改变这里的内容</div>

    <script type="text/javascript">

        // 定义jsonp 函数
        function jsonp(json){

            setTimeout(function(){
                var box = document.getElementById('ajax-wrap');
                box.innerHTML = json.code;
            },3000);
        }

        // 添加script 标签
        function appendScript(url){
            var script = document.createElement('script');
            script.setAttribute('src',url);
            document.body.appendChild(s
            cript);
        }

        appendScript('http://test2.com');

    </script>

</body>
</html>

// 服务器端代码
<?php
    echo 'jsonp({
        "code": "CA1998",
        "price": 1780,
        "tickets": 5
    })';

?>

jQuery jsonp 跨域

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>

    <div id="ajax-wrap">通过ajax请求来改变这里的内容</div>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">

        // 定义jsonp 函数
        function jsonpp(json){
                var box = document.getElementById('ajax-wrap');
                box.innerHTML = json.code;
        }

        jQuery(document).ready(function(){
            $.ajax({
                 type: "get",
                 url: "http://test2.com",
                 dataType: "jsonp",
                 jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                 // jsonpCallback:"jsonpp",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据,如果这里有写的话，success 可以不用处理
                 success: function(json){
                    // console.log(json);
                    jsonpp(json);
                 },
                 error: function(xhr){
                    console.log(xhr);
                 }
             });
         });

    </script>
</body>
</html>

有些时候，我们在拿到一些公共接口，使用jsonp方式调用接口时、无法使用，应该是接口没有做jsonp的处理

3，CORS 跨域
CORS 是一个W3C标准，全称跨域资源共享(Cross-origin resource sharing)。最初，是在1995年、由网景公司首先加入浏览器的，主要用于互联网跨域访问的安全。跨域资源共享需要浏览器和服务器同时支持，貌似跟ajax没有什么关系。
当我们的ajax请求是跨域请求时，会在请求头信息中，添加一个origin 字段，告诉服务器这个请求来自哪个源。服务器接收到这个字段后，决定是否同意这次请求

// 指定允许其他域名访问  (这个最重要，参数为* 表示任何域名都可以访问，一版设置为请求头信息中的 origin字段)
header('Access-Control-Allow-Origin: http://test.com');
// 响应类型  ()
header('Access-Control-Allow-Methods:POST');  
// 响应头设置  
header('Access-Control-Allow-Headers:x-requested-with,content-type');

这里我只写一个简单的例子

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>

    <div id="ajax-wrap">通过ajax请求来改变这里的内容</div>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">

        jQuery(document).ready(function(){
            $.ajax({
                 type: "get",
                 url: "http://test2.com?name=xiami",
                 dataType: "json",
                 success: function(json){
                    console.log(json);
                 },
                 error: function(xhr){
                    console.log(xhr);
                 }
             });
         });

    </script>
</body>
</html>

// php 代码
<?php 
// 指定允许其他域名访问  
header('Access-Control-Allow-Origin: http://test.com');
// 响应类型  
header('Access-Control-Allow-Methods:POST');  
// 响应头设置  
header('Access-Control-Allow-Headers:x-requested-with,content-type'); 

echo '{
    "code": "CA1998",
    "price": ' .$name.',
    "tickets": 5
}';

cors兼容 IE10及以上版本， 更多细节，通过下面的参考网址，进行详细查看

参考网址

说说JSON和JSONP，也许你会豁然开朗
XHR2 了解
浏览器同源策略及规避方法
跨域资源共享 CORS 详解
HTTP访问控制(CORS)

posted @ 2016-10-06 09:36  诚人小李  阅读(447)  评论(0)    收藏  举报