`
aijezdm915
  • 浏览: 403845 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ajax 跨域请求 JSONP 实践

    博客分类:
  • js
阅读更多

 

 

一直对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(){
   var html = "";
     $.ajax({
         type: 'GET',
         url:'dowith.jsp',
         dataType:"jsonp",
         jsonp:"jsonpcallback",
         error:function(xmlHttpRequest,error){
          alert(error);
         },
         success:function(data){
          $.each(data,function(i,v){
           html +="<p>id:" +v['id']+  " name:"  +v['name']+" </p>";
          });
             $("#res").append(html);
         }
    });
});
</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”是客户端传过来的


response.setContentType("application/json; charset=utf-8");
String jsonpcallback = request.getParameter("jsonpcallback");
String str = "[{\"id\":"+100+",\"name\":\"aije\"},{\"id\":"+200+",\"name\":\"liruqin\"}]";
str = jsonpcallback+"("+str+")";
out.write(str);

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

<div id="res"></div>


最终效果截图:

分享到:
评论

相关推荐

    ajax跨域请求jsonp前后台代码

    基于ajax方式的跨域请求jsonp的前后台代码

    jsonpajax跨域请求

    "jsonp跨域请求"可能是服务器返回的示例数据,模拟了JSONP的跨域请求过程。 总结,JSONP和CORS是解决JavaScript跨域问题的两种主要方法,它们各有优缺点,适用于不同的场景。JSONP简单易用,但安全性较低;CORS则更...

    Ajax跨域请求解决方案-JSONP

    总的来说,JSONP是Ajax跨域请求的一种实用解决方案,尤其适用于只支持GET请求且不涉及复杂交互的场景。但是,它也有一些局限性,比如不支持POST请求、无法控制HTTP头部、无错误处理机制等。因此,在现代Web开发中,...

    html通过 ajax jsonp跨域请求接收和传送数据

    **AJAX和JSONP跨域请求的实现过程** 1. **AJAX跨域**: 通常,AJAX请求受到同源策略限制。为实现跨域,我们可以使用CORS(Cross-Origin Resource Sharing)机制。服务器需要在响应头中添加`Access-Control-Allow-...

    解决ajax跨域请求问题

    本文将深入探讨如何解决Ajax跨域请求的问题。 首先,理解“同源策略”是解决问题的关键。同源策略是浏览器为了保障网络安全而设定的一种机制,它禁止了一个源的文档或脚本访问另一个源的属性,这里的“源”指的是...

    ajax 跨域请求问题 jquery jsonp

    **Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    ajax跨域请求WebService.asmx

    【Ajax跨域请求WebService.asmx】是一个常见的Web开发技术应用场景,主要涉及到JavaScript的Ajax技术、C#编程语言以及ASP.NET的WebService组件。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的...

    Jquery跨域Ajax请求测试

    jQuery,作为一个强大的JavaScript库,提供了便捷的方式来处理这种问题,特别是通过其Ajax功能进行跨域请求。本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域...

    ajax跨域请求

    ### AJAX跨域请求详解 #### 一、引言 在Web开发中,由于浏览器的同源策略限制,AJAX请求通常只能向同源服务器发送请求。然而,在实际应用中,跨域请求的需求非常常见。本篇文章将通过一个具体的示例(JSP页面+后台...

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    PHP AJAX JSONP 实现跨域请求使用实例 在 Web 开发中,跨域请求是指从一个域名下的页面请求另一个域名下的资源,这种情况下,浏览器会限制这种请求,以防止恶意攻击。JSONP(JSON with Padding)是一种解决跨域请求...

    ajax跨域CORS方案 JSONP跨域请求方案.zip

    在Web开发中,跨域(Cross-Origin)是一个常见的问题,特别是在使用Ajax进行异步数据交互时。跨域限制是浏览器为了安全原因而设置的一种机制,防止恶意网站通过脚本访问其他站点的数据。本文将深入探讨两种主要的...

    AJAX跨域请求JSONP获取JSON数据的实例代码

    - **发送请求**:创建一个新的`&lt;script&gt;`元素,设置其`src`属性为需要跨域请求的URL,URL中包含一个参数,通常是`callback`,它的值就是客户端定义的回调函数名,例如`callback=jsonpCallback`。 - **服务端响应**...

    ajax处理跨域请求

    总结来说,通过jQuery的AJAX处理跨域请求,主要依赖于CORS和JSONP两种方式。CORS更强大,支持更多类型的请求,但需要服务器配合设置相应头部;JSONP则简单易用,适用于只需GET请求的情况。在实际项目中,开发者应...

    ajax跨域解决办法

    6. **Domain属性(仅限子域)**:在cookies中设置`domain`属性可以实现跨子域共享,但这仅限于同一主域下的子域名之间,对AJAX跨域请求帮助有限。 在实际应用中,开发者通常根据项目需求和服务器环境选择合适的跨域...

    详解Ajax跨域(jsonp) 调用JAVA后台

    此外,随着Web技术的发展,其他解决方案如CORS(跨源资源共享)也成为了实现跨域请求的另一种选择,但在某些情况下JSONP依然有其独特的适用场景。 通过本文的介绍,读者应该对如何在Java后台环境下实现Ajax的跨域...

    原生ajax库实现jsonp跨域短小精悍

    在JavaScript的世界里,跨域(Cross-Origin)是一个常见的问题,特别是在AJAX请求中。由于同源策略的限制,浏览器不允许JavaScript脚本从一个域名访问另一个域名的数据,这为跨域数据交互带来了挑战。JSONP(JSON ...

    JQury实现Ajax跨域访问

    **jQuery实现Ajax跨域访问** 在Web开发中,由于同源策略的限制,JavaScript通常只能对同一域名下的资源进行操作。然而,有时我们需要从不同源获取数据,这就是跨域访问的需求。jQuery通过Ajax提供了跨域请求的能力...

Global site tag (gtag.js) - Google Analytics