JS跨域

浏览数：40 / 时间：2015年06月09日

一、通过jsonp跨域

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

http://localhost:23383/Home/Index这个页面想跨域请求http://www.jscrossdomain.com/home/index的数据，www.jscrossdomain.com是服务器(也就是本地要模拟从服务器请求数据)：

服务器端代码：

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var fun = Request["callback"] != null ? Request["callback"].ToString() : "a";
            string result = fun + "({\"name\":\"zhangsan\",\"date\":\"2015-4-30\"})";

            return Content(result);
        }
    }

客户端（跨域请求端）：

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        var result = null;
        window.onload = function () {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://www.jscrossdomain.com/home/index?callback=callback";

            var head = document.getElementsByTagName("head")[0];
            head.insertBefore(script, head.firstChild);

        };

        function callback(data) {
            alert("我是被自动调用的");
            result = data;
        }

        function b_click() {
            alert(result.name + "|" + result.date);
        }
    </script>
</head>
<body>
    <div>
         <input type="button" value="click me!" onclick="b_click();" />
    </div>
</body>
</html>

客户端页面加载完毕，弹框，点击button弹框显示跨域请求数据。

技术分享

二、通过ajax跨域请求

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function b_click() {
            $.ajax({
                async: false,
                url: "http://www.jscrossdomain.com/home/index",
                type: "GET",
                dataType: ‘jsonp‘,
                //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象.
                jsonp: ‘callback‘,
                //要传递的参数,没有传参时，也一定要写上
                data: null,
                timeout: 5000,
                //返回Json类型
                contentType: "application/json;utf-8",
                //服务器段返回的对象包含name,data属性.
                success: function (result) {
                    alert(result.name + "|" + result.date);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        }
    </script>
</head>
<body>
    <div>
         <input type="button" value="click me!" onclick="b_click();" />
    </div>
</body>
</html>

技术分享

三、通过修改document.domain来跨子域

　　浏览器都有一个同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明，不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但蛋疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎无用的window对象。比如，有一个页面，它的地址是http://www.example.com/a.html ，在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的
　　这个时候，document.domain就可以派上用场了，我们只要把http://www.example.com/a.html 和 http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。
　　不过如果你想在http://www.example.com/a.html 页面中通过ajax直接请求http://example.com/b.html 页面，即使你设置了相同的document.domain也还是不行的，所以修改document.domain的方法只适用于不同子域的框架间的交互。如果你想通过ajax的方法去与不同子域的页面交互，除了使用jsonp的方法外，还可以用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的，然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发送ajax请求，然后收到的数据我们也可以获得了。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JS跨域