利用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就完成了。