首页 > 编程语言 > 详细

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

时间:2015-10-22 10:42:24      阅读:233      评论:0      收藏: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)服务器端跟上方相同

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

原文:http://www.cnblogs.com/blueskypan/p/4897684.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!