Jsonp 跨域访问

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