一客户端(url:http://192.168.1.2:81/jsonp_test.jsp)
客户端页面首先在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_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: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”是客户端传过来的
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的编码最好,这样省得编码转换了
捐助开发者
在兴趣的驱动下,写一个免费
的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(右上角的爱心标志,支持支付宝和PayPal捐助),没钱捧个人场,谢谢各位。
谢谢您的赞助,我会做的更好!
相关推荐
在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许我们绕过这个限制,实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...
jQuery-JSONP jQuery-JSONP 是 jQuery 的 JSONP 实现的一个紧凑(1.8kB 缩小)但功能丰富的替代解决方案。 许可 jQuery-JSONP 是在下发布的。 下载 您可以下载 jQuery-JSONP(提供全文和缩小版本)。 特征 jQuery-...
在jQuery中,JSONP提供了两种实现方式,主要用于解决JavaScript进行AJAX请求时遇到的跨域问题。 ### 第一种实现方式 在jQuery中,我们可以通过设置`dataType`参数为`"jsonp"`来指定使用JSONP。同时,我们需要指定`...
这里,`dataType`指定为'jsonp',jQuery会自动处理JSONP的请求过程,包括动态创建`<script>`标签以及处理回调函数。`jsonp`参数可以用来指定回调函数的名称。 需要注意的是,JSONP只支持GET请求,且存在安全隐患,...
ajax跨域请求,jquery.jsonp插件
jQuery 提供了更简洁的方式来实现JSONP。`$.ajax` 方法可以通过配置`dataType: 'jsonp'` 来自动处理JSONP的相关逻辑。 ```javascript $.ajax({ url: "http://site1.com/api/user.php", dataType: 'jsonp', ...
jquery-jsonp插件
本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...
`jquery-jsonp-master.zip`这个压缩包文件包含了一个专门用于jQuery的JSONP插件,旨在简化和优化JSONP请求的过程。通过这个插件,开发者能够更方便地在他们的应用中集成跨域数据请求,从而获取远程服务器上的JSON...
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON...
`jquery-jsonp-master.zip`是一个包含jQuery JSONP实现的压缩包,适用于学习和应用轻量级的JSONP解决方案。 首先,我们需要了解JSONP的基本原理。由于同源策略的限制,JavaScript通常不能直接向其他域名发送Ajax...
jQuery库提供了方便的JSONP实现,通过`.ajax()`或`.getScript()`方法,只需指定`dataType: 'jsonp'`,jQuery会自动处理JSONP请求的细节。 以下是一个简单的jQuery JSONP示例: ```javascript $.ajax({ url: ...
**Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...
在本场景中,前端使用jQuery库,通过设置`dataType`为`jsonp`来发起JSONP请求,而服务端使用C#编写的Web Service来响应这个请求。 首先,我们来看服务端的C# Web Service代码。在C#中,我们需要创建一个支持JSONP的...
在本案例中,我们将探讨如何使用Jquery和ajax通过JSONP方式来调用新浪的API,将长网址转换为新浪的短网址。 首先,我们需要了解JSONP的工作原理。JSONP的基本思路是服务器提供一个JavaScript函数,这个函数接收JSON...
JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术,尤其在jQuery中得到了广泛的应用。由于浏览器的同源策略限制,JavaScript通常无法在不同源之间进行Ajax请求。但JSONP巧妙地利用了HTML中`...
- `<script type='text/javascript' src='commons/scripts/jquery.js'></script>`:引入jQuery库,这是执行JSONP请求的前提,因为JSONP是jQuery支持的功能之一。 3. **jQuery部分**: - `$$(function() { ... })`...
在本文中,我们将深入探讨如何使用jQuery、JSONP和artDialog技术实现虾米音乐的检索、选取和播放功能。这是一套常见的Web开发技术组合,适用于跨域数据获取和交互式用户界面的创建。 首先,jQuery是一个强大的...
NULL 博文链接:https://wangchengyong.iteye.com/blog/1460101