JS跨域方法及原理

    JS跨域分析判断

　　JS跨域：在不同域之间，JS进行数据传输或通信。比如ajax向不同的域请求数据、JS获取iframe中的页面中的值（iframe内外不同域）

　　只要协议、端口、域名有一个不同则被当做不同的域

　　下表给出了相对于http://www.dmeiyang.com同源检测结果：

　　

 

    Jsonp跨域方法及原理

　　在JS中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

　　引入不同JS文件实现

　　在http://localhost:2014站点中有一个页面，现在需要请求http://localhost:2013/CrossDomain/GetJsonpData的数据。很明显这两不在一个域上，为了实现这个功能，我们可以这样写代码：

<script type="text/javascript">
    function dosomething(jsondata) {
        console.log(jsondata);
    }
</script>
<script src="http://localhost:2013/CrossDomain/GetJsonpData?jsoncallback=dosomething"></script>

　　这里我们看到在请求地址后面有一个jsoncallback参数，惯例是使用callback这个参数名，但是如果http://localhost:2013这个站点不是你自己能控制的，就只能按照提供数据那一方的规定格式来操作了

　　下面是http://localhost:2013/CrossDomain/GetJsonpData定义的规则和返回数据

public string GetJsonpData(string jsoncallback)
{
    //返回数据格式：jsoncallback({"Name":"dmeiyang","Age":20})

    System.Text.StringBuilder sb = new System.Text.StringBuilder();

    sb.Append(jsoncallback);
    sb.AppendFormat("({0})", new { Name = "dmeiyang", Age = 20 }.ToJsonByJsonNet());

    return sb.ToString();
}

　　通过JQuery实现

　　后台代码不变，前台部分代码如下：

<div id="container">
    <div>我要访问http://localhost:2013站点的数据</div>
    <div>
        <a class="at-jsonp" href="javascript:void(0);">点击一下，给我数据~</a>
    </div>
    <div>
        <span>其他站点数据：</span>
        <span class="data-jsonp" style="color: red"></span>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#container .at-jsonp').on('click', function () {
            $.ajax({
                async: false,
                url: "http://localhost:2013/CrossDomain/GetJsonpData",
                type: "GET",
                dataType: 'jsonp',
                //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象. 
                jsonp: 'jsoncallback',
                //要传递的参数,没有传参时，也一定要写上 
                data: { jsoncallback: "jsoncallback" },
                timeout: 5000,
                //返回Json类型 
                contentType: "application/json;utf-8",
                //服务器段返回的对象包含name,data属性. 
                success: function (result) {
                    $('#container .data-jsonp').text('名称：' + result.Name + '-->年龄：' + result.Age);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus);
                }
            });
        })
    })
</script>

    通过修改document.domain来跨子域

　　浏览器遵循同源策略。第一个限制是：不能通过ajax请求不同域下的数据（除非使用Jsonp）；第二个限制是：不同域框架（iframe内外）之间不能进行js交互

　　例如：http://localhost:2014页面（A页）中放置一个iframe，让其加载http://localhost:2013/CrossDomain/iframetest页面（B页）。因为两者不同域，所以A页面是无法通过JS获取B页面里的内容的（当然你可以获取一个几乎无用的window对象）

　　为了实现上述情况两个页面之间可以互相调取数据，需要设置document.domain=“自身或者更高一级的父域”（两个页面都需要设置）