jQuery JSONP 跨域实践

谁践踏了优雅 2022-08-10 00:47 128阅读 0赞

jQuery JSONP 跨域实践

一客户端([url:http://192.168.1.2:81/jsonp\_test.jsp][url_http_192.168.1.2_81_jsonp_test.jsp])

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

![ExpandedBlockStart.gif][]   
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>  
<script type="text/javascript">  
    $(document).ready(function()\{  
        $.ajax(\{  
             [url:][url]'http://192.168.9.5/jsonp\_test1.jsp',  
             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:][url 1]http://192.168.9.5/jsonp\_test1.jsp）  
代码很简单，就是输出一个字符串  
比如正常输出json应该是：\[\{"id":"1","name":"测试1"\},\{"id":"2","name":"测试2"\}\]  
jsonp 则输出: jsonpcallback(\[\{"id":"1","name":"测试1"\},\{"id":"2","name":"测试2"\}\]) 其中“jsonpcallback”是客户端传过来的

![ExpandedBlockStart.gif][]  
　　jsonp = request.getParameter("jsonpcallback")  
　　str = "\[\{""id"":""1"",""name"":""测试1""\},\{""id"":""2"",""name"":""测试2""\}\]"  
　　str = jsonp + "(" +str+")"  
　　response.Write(str)

由于 jquery 在ajax 处理中使用的是utf-8编码传递参数的，所以jsonp处理端用utf-8的编码最好，这样省得编码转换了  
  
最终效果截图：

![2009051917035947.jpg][]

[url_http_192.168.1.2_81_jsonp_test.jsp]: http://192.168.1.2:81/jsonp_test.asp
[ExpandedBlockStart.gif]: /images/20220731/137707f527e843c6b3b4788ddb1628b1.png
[url]: http://www.cnblogs.com/cfanseal/archive/2009/05/19/'%20rel=
[url 1]: http://192.168.1.5/jsonp_proc.asp
[2009051917035947.jpg]: /images/20220731/4cc1f7abff0f40eb8347c4089d88bd47.png