AJAX跨域 jQuery JSONP 实践

发布时间：2020-12-16 01:02:31 所属栏目：百科来源：网络整理

导读：一直对jQuery 的jsonp 调用比较疑惑，今天研究了一下jsonp 做了一个简单的调用例子,我用asp做服务端s 客户端(url:http://192.168.1.2:81/jsonp_test.asp) 客户端页面首先在body 中放置一个div: div id="res"/div 将远程调用的数据写入该div中 script type="t

一直对jQuery 的jsonp 调用比较疑惑，今天研究了一下jsonp 做了一个简单的调用例子,我用asp做服务端s

客户端(url:http://192.168.1.2:81/jsonp_test.asp)

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

<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":"测试2"}]) 其中“jsonpcallback”是客户端传过来的

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的编码最好，这样省得编码转换了

最终效果截图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!