一直对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的前后台代码
基于jQuery的jsonp ajax跨域请求,
该资源为ASP.NET网站开发技术中使用Ajax进行跨域请求时利用JSONP方案解决浏览器同源策略限制的源码,比较简单,仅供参考
html通过 ajax jsonp跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
ajax跨域CORS方案 JSONP跨域请求方案.zip
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 这篇文章主要介绍了AJAX跨域请求JSONP获取JSON数据的实例代码,需要的朋友可以参考下
PHP AJAX JSONP实现跨域请求使用范例
NULL 博文链接:https://sagewsg.iteye.com/blog/1670992
本篇文章主要介绍了详解Ajax跨域(jsonp) 调用JAVA后台 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为...不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数 据驻留的远程服务器并
主要介绍了原生js实现ajax请求和JSONP跨域请求操作,结合实例形式分析了基于原生js实现的ajax请求和JSONP跨域请求相关操作技巧与使用注意事项,需要的朋友可以参考下
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决...
JSON 可通过 JavaScript 进行解析,JSON 数据可使用 AJAX 进行传输,这篇文章主要介绍了通过jsonp获取json数据(实现AJAX跨域请求),有兴趣的可以了解一下。
dataType:”json”, } 不能用jsonp 因为jsonp发送数据 type 为 ... 您可能感兴趣的文章:跨域请求之jQuery的ajax jsonp的使用解惑AJAX跨域请求json数据的实现方法jQuery.ajax 跨域请求webapi设置headers的解决方案JQuer
我们都知道,AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己...
本文主要是介绍了JSONP跨域是如何实现的,并探讨下JSONP跨域的原理。以及采用JSONP跨域GET请求解决Ajax跨域访问问题,需要的朋友可以参考下
本篇文章主要介绍了详解Java Ajax jsonp 跨域请求,具有一定的参考价值,感兴趣的小伙伴们可以参考一下