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)