jQuery JSONP 實踐

一直對jQuery 的jsonp 調用比較疑惑，今天研究了一下jsonp 做了一個簡單的調用例子,我用asp做服務端s

用戶端(url:http://192.168.1.2:81/jsonp_test.asp)

用戶端頁面首先在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.5/jsonp_proc.asp',
             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>

 

服務端（url:http://192.168.1.5/jsonp_proc.asp）
代碼很簡單，就是輸出一個字串
比如正常輸出json應該是：[{"id":"1","name":"測試1"},{"id":"2","name":"測試2"}]
jsonp 則輸出: jsonpcallback([{"id":"1","name":"測試1"},{"id":"2","name":"測試2"}]) 其中“jsonpcallback”是用戶端傳過來的

Code
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
　　jsonp = request("jsonpcallback")
　　str = "[{""id"":""1"",""name"":""測試1""},{""id"":""2"",""name"":""測試2""}]"
　　str = jsonp & "(" & str&")"
　　response.Write(str)
%>

由於 jquery 在ajax 處理中使用的是utf-8編碼傳遞參數的，所以jsonp處理端用utf-8的編碼最好，這樣省得編碼轉換了

最終效果：