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