您的位置:首页 > Web前端 > JavaScript

Jsonp 跨域访问

2014-03-17 11:15 330 查看
Jsonp可以让网页从别的网域获取资料,也就是说一般server1.example.com的网页无法与不是server1.example.com的服务器沟通,而<script>元素是一个例外,利用<script>

可以得到从其他来源动态产生的JSON资料,这种模式就是JSONP,从JSONP抓到的资料并不是JSON,而是JavaScript函数,用Javascript直译器执行而不是用JSON解析器解析

Jsonp通过Javascript callback的形式实现跨域访问:

假设客户期望返回JSON数据:["customername1","customername2"]

那么真正返回到客户端的Script Tags: callbackFunction([“customername1","customername2"])

例子:

1.

<script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script>

回调函数:

<script type="text/javascript">

        function onCustomerLoaded(result, methodName)

        {

            var html = '<ul>';

            for(var i = 0; i < result.length; i++)

            {

                html += '<li>' + result[i] + '</li>';

            }

            html += '</ul>';

            document.getElementById('divCustomers').innerHTML = html;

        }

</script>

2.

$.getJSON

<script>

    $(document).ready(function() {

        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",

        function(data) {

            $.each(data.items,

            function(i, item) {

                $("<img/>").attr("src", item.media.m).appendTo("#images");

                if (i == 3) return false;

            });

        });

});

jsoncallback=?,其中?会自动替换为function(data)函数

3.

path = vipPath + '/r007Action.do?event=loadMemberHeader';

$.ajax({

    type : "get",

    async : false,

    url : path,

    dataType : "jsonp",

    jsonp : "callbackparam",

    jsonpCallback : "success_jsonpCallback",

    success : function(json) {

    },

    error : function() {

     alert('fail'); 

    }

});

后台代码:

jsonObj.put("data", result);

result = jsonObj.toJSONString();

connection.disconnect();

printDataWithSync(res, callbackFunName + "(" + result +")");   返回内容像:jsonp1382016430883([{"id":1,"title":"XXXX"},{"id":2,"title":"YYYYY"}])

前台回调方法:

function success_jsonpCallback(data) {

  $("#head_menu_member").animate({

     height : '200px'

  }, 400, function() {

   $("#head_menu").remove();

   $("#head_menu_member").html(data.data);

  });

 }

更多资料:
http://baike.baidu.com/view/2131174.htm?fr=ala0_1 http://scorpio-jh.blog.sohu.com/146838043.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: