跨域——Jsonp

 1、前后台配合(jsonp)：

前台引入后台接口的js，传递一个回调函数的参数 callback=testCall,后台接口在返回这个数据： testCall(json),然后在前台页面里定义一个 testCall(data)的js 方法，然后在里面处理返回的数据就行了.

后来jsqery对这个方式进行了封装，就是JSONP了。

html:

<script type="text/javascript">
        $(function () {
            $("#go").click(function () {
                $.ajax({
                    type:"get",
                    url: "http://test.tiexue.net/index4.aspx",
                    dataType: "jsonp",
                    data: "",
                    jsonpCallback: "callback",
                    success: function (data) {
                        alert(1);
                        if (data != null) {
                            for (var i = 0; i < data.length; i++)
                            {
                                $("#display").append(data[i].Name);
                            }
                           
                        }
                    }
                });
            });
        })
    </script>

 

aspx：

    DataTable dt = GetData("select * from MGameList");

    Response.ContentType = "application/json";
    Response.Write("callback("+SerializeDataTable(dt)+")");

 

 

2、通过修改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 中设置document.domain:

 

 

在页面 http://example.com/b.html 中也设置document.domain，而且这也是必须的，虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值：

 

这样我们就可以通过js访问到iframe中的各种属性和对象了。

不过如果你想在http://www.example.com/a.html 页面中通过ajax直接请求http://example.com/b.html 页面，即使你设置了相同的document.domain也还是不行的，所以修改document.domain的方法只适用于不同子域的框架间的交互。