代码改变世界

Javascript同源策略和跨域读取数值的学习

2015-10-22 09:55  SkyBlue  阅读(195)  评论(0)    收藏  举报

1.同源策略

简单的讲，就是不同两个源头的html不能互相调用相互间的js，这个是浏览器的保护策略，可以相互调用的js的前提是：协议相同(比如都是http://)，端口相同(通常都是80)，域名相同

2.<script>标签引用的jsonP跨域取值

使用script标签进行跨域的方法是，将取数据的值作为回调函数，放到script标签内部，立即执行

（1）服务器端：

protected void Page_Load(object sender, EventArgs e) {
　　　　　　　String callback = request.getParameter('callbackFun');
            string result = callback+"({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";
            Response.Clear();
            Response.Write(result);
            Response.End();
        }

注意：返回的格式为callback(jsonData)，相当于返回一个立即执行的函数，这个函数要在调用的客户端预先写好

（2）客户端页面：

<html>
<head>
    <title></title>
    <script>
        function callbackFun(data) {
            alert(data);
        }

    </script>
   <script src='http://xx.action?callbackFun=?'></script> 
</head>
<body>
</body>
</html>

　　

3.jquery封装的jsonP跨域取值

（1）客户端：

a. ajax方法

//这里我们自己指定了jsonp的callback的名字
$.ajax({
    url: 'http://lifeloopdev.info/get_events',
    dataType: "jsonp",
    data: "offset=0&num_items=10",
    username: 'username',
    password: 'password',
    jsonp: "successCallback",
    jsonpCallback: 'successCallback'
});

function successCallback(data) {
   console.dir(data);
}

　b. getJSON()方法

$.getJSON("http://192.168.20.86/friend/getMyJsonData.aspx?jsoncallback=?", function (data) {
    $.each(data.success, function (i, item) {
        $("body").append('<h1>' + item.title + '</h1>');
    });
});

　　

(2)服务器端跟上方相同