JS跨域方法及原理

JS跨域分析判断

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

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

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

　　 JS跨域方法及原理

Jsonp跨域方法及原理

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

　　 JS跨域方法及原理引入不同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 =  }.ToJsonByJsonNet());

    return sb.ToString();

}

　　 JS跨域方法及原理通过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: ,

                //返回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=“自身或者更高一级的父域”（两个页面都需要设置）

秒客网

JS跨域方法及原理

相关文章