利用jsonp实现跨越获取数据

 JSONP名为JSON with Padding,它是一个非官方的协议，允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

       以JQ为例实现jsonp调取数据，我们可以从下面两个方面着手处理：客户端以及服务端做相应的处理。

      1,客户端

      客户端页面首先在body 中放置一个div: <div id="res"></div> 将远程调用的数据写入该div中

   

Code：
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
             url:http://192.168.9.1/jsonp_test.ashx,
             dataType:"jsonp",
             jsonp:"jsonpcallback",
             success:function(data){
                 var $ul = $("<ul></ul>");
                 $.each(data,function(i,v){
                     $("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
                 });
                 $("#res").append($ul);
             }
        });
    });
</script>

 

  

      也可以通过JQ的getJSON方法得到数据，例：  

 $(document).ready(function(){ 
    $("#btn").click(function(){
    //获取动态验证码 
    var url = "http://192.168.9.1/jsonp_test.ashx";

    try {                  
        $.getJSON(url,function(json) {
        var _DECODE = json[0].name;
                $("#res").append(name);
        });                
    } catch (e){
    }        
    });         
}); 

 

 

      2,服务端（http://192.168.9.1/jsonp_test.ashx）

       代码很简单，就是输出一个字符串
       比如正常输出json应该是：[{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]
       jsonp 则输出: jsonpcallback([{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}])
       其中“jsonpcallback”是客户端传过来的.

       做到这里一个简单的jsonp跨域获取数据的demo就完成了。