- 浏览: 230343 次
- 性别:
- 来自: 上海
最新评论
什么是JSONP?
先说说JSONP是怎么产生的:
其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;
5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
如果对于callback参数如何使用还有些模糊的话,我们后面会有具体的实例来讲解。
JSONP的客户端具体实现:
JSONP的服务端具体实现:
先说说JSONP是怎么产生的:
其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;
5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
如果对于callback参数如何使用还有些模糊的话,我们后面会有具体的实例来讲解。
JSONP的客户端具体实现:
$.getJSON("http://127.0.0.1/creat/getJsonpCourseDataList?callback=?", function(data){ alert(data[0].name); });
JSONP的服务端具体实现:
@RequestMapping(value="/getJsonpCourseDataList") public void getJsonpCourseDataList(HttpServletRequest req, HttpServletResponse response) { String callback = req.getParameter("callback"); callback = callback == null ? "" : callback; response.setContentType("application/x-javascript"); response.setCharacterEncoding("UTF-8"); response.setHeader("P3P", "CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"); try { PrintWriter out = response.getWriter(); if(StringUtil.isNullOrEmpty(callback)){ out.write(result); }else{ out.write(callback+ "([{ name:'John',age:'19'},{ name:'joe',age:'20'}]);"); } out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } }
发表评论
-
三分钟学会@Autowired@Qualifier@Primary注解
2018-05-20 09:39 0今天主要简单的跟大家介绍一下spring自动装配相关的@A ... -
两分钟学会自动注入@Resource和@Inject注解
2018-05-20 09:25 9286上文系统的介绍了spring自动装配@Autowired注解 ... -
一分钟学会spring注解之@Lazy注解
2018-05-20 09:24 6339今天主要从以下几方面来介绍一下@Lazy注解 @La ... -
一分钟学会spring注解之@Autowired注解(二)
2018-05-20 09:35 6029上一遍文章中有简单的介绍@Autowired注解的使用,没有 ... -
全网最全技术电子书免费发放
2018-05-20 09:19 1317之前整理过一些互联网技术相关的视频资料,大家的反馈都不错,然 ... -
深入理解spring之Aware接口的相关实现
2018-05-20 09:28 1515前面几篇文章简单的介绍了spring中bean注解以及怎么在 ... -
200G免费偷懒必看资料全集(二)
2018-05-05 16:10 1151在上文小编整理过一大波资料分享出来之后,大家的回应说都不错 ... -
250G偷懒必看资料全集
2018-05-05 16:04 1250要想成为一个专业的'偷懒'程序员,没有点偷懒必看资料怎么能 ... -
200G免费偷懒必看资料全集(二)
2018-05-04 22:41 0在上文小编整理过一大波资料分享出来之后,大家的回应说都不错( ... -
深入理解java的反射机制
2018-04-29 19:03 582今天将从以下4方面来系统的学习一下java的反射机制: ... -
深入理解java注解的实现原理
2018-04-29 19:13 738今天将从以下4个方面来系统的学习一下java注解 ... -
深入理解java动态代理的实现机制
2018-04-29 19:10 567今天将从以下5方面来系统的学习一下java动态代理的实现机 ... -
spring boot 过滤器去除请求参数前后空格
2017-09-26 21:54 11378需求:去除用户表单参数中由于用户不小心输 ... -
spring+quartz实现定时任务支持集群
2016-08-08 16:49 747最近项目要做集群,然后找了下资料发现quartz本身就支持集 ... -
spring+aop+自定义注解实现操作日志记录
2016-08-07 11:49 75731,spring配置文件 <bean class= ... -
Nginx1.9+LuaJIT+Kafka的点播监控系统实战
2016-05-21 11:03 1107安装前的准备 Nginx1.9.9LuaJIT-2.0. ... -
post,get请求nginx记录日志kafka自动扫描程序
2016-04-14 16:03 1254kafka的介绍以及使用安装请查看博文ht ... -
springmvc整合dubbo分布式系统的搭建小例子
2016-01-30 12:56 5430四个步骤 1 搭建zookeepe ... -
redis Jedis序列化自定义存储list对象和map数据
2016-01-28 20:07 255941,redis缓存配置类 public class Redis ... -
SpringMVC通过Redis实现缓存主页
2016-01-28 10:48 1783这里说的缓存只是为了提供一些动态的界面没办法作静态化 ...
相关推荐
在本文中,我们将深入探讨如何使用jQuery、JSONP和artDialog技术实现虾米音乐的检索、选取和播放功能。这是一套常见的Web开发技术组合,适用于跨域数据获取和交互式用户界面的创建。 首先,jQuery是一个强大的...
在本文中,我们将详细探讨如何使用JSONP(JSON with Padding)技术解决Ajax跨域问题,特别是在调用Java后台时的实现方法。 JSONP是由浏览器的一个安全特性所启发,即虽然不允许跨域脚本直接读取数据,但允许跨域...
总结,jQuery Mobile通过AJAX与后台进行通信,结合页面生命周期事件、表单提交和响应数据处理,可以实现动态、交互的移动应用。在与Java后端集成时,理解JSP和Servlet的工作原理,以及RESTful API设计,有助于构建...
2. **使用AJAX发起请求**:使用jQuery的`$.ajax`方法发起JSONP请求,设置`dataType`为`jsonp`,并指定`callback`参数为之前定义的回调函数名。 ```javascript $.ajax({ url: 'http://example.com/data', type: '...
在Visual Studio 2008(VS2008)中,开发人员经常需要在后台(服务器端)和前台(客户端)之间进行交互,以实现更复杂的Web应用程序功能。这通常涉及到ASP.NET中的页生命周期、AJAX技术以及事件处理机制。下面我们将...
这通常结合JSONP或AJAX实现。 4. **事件处理(Event Handling)**:EasyUI组件也支持事件监听,如 `onLoadSuccess` 用于在数据加载成功后执行的回调,`onClickRow` 用于监听行点击事件。 5. **插件扩展(Plugin ...
2. **数据绑定**:jQuery EasyUI 支持与后台数据源进行数据绑定,通过Ajax或JSONP实现异步加载,使页面内容动态更新,提高用户体验。例如,表格组件Grid可以直接与服务器端的数据接口进行交互,实现分页、排序、过滤...
虽然jQuery主要与客户端JavaScript关联,但通过各种技术如JSONP和CORS,它可以与任何支持HTTP的服务器进行通信,包括Java服务器。 在提供的压缩文件列表中,"Manning.jQuery.in.Action.Feb.2008.1933988355.pdf"很...
在jQuery中,可以使用`$.ajax()`方法的`jsonp`或`dataType: 'jsonp'`选项来实现JSONP请求,如下所示: ```javascript $(document).ready(function () { $('#jqueryajax').bind('click', function () { $.ajax({ ...
本主题将深入探讨Ajax与Java后台交互的核心概念和技术。 一、Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信。当用户触发一个事件(如点击按钮),JavaScript会创建一个...
- **跨域请求**:由于同源策略限制,JSON常用于解决跨域问题,通过JSONP(JSON with Padding)或CORS(跨域资源共享)实现。 4. **整合应用**: - **前端交互**:jQuery通过AJAX与后台Struts2 Action通信,发送...
7. **JSONP跨域通信**:如果需要跨域请求,可以使用JSONP(JSON with Padding)技术,通过动态插入`<script>`标签来实现。 8. **错误处理**:在Ajax请求中,我们需要处理网络错误、服务器错误以及解析错误等各种...
结合 AJAX 技术,可以在不刷新整个页面的情况下,实现后台数据的异步加载。 2. **详述** - **依赖的库文件** - JSON 功能通常依赖于 JSON 库,如 json.org 提供的 `json.jar`,用于 Java 端的数据转换。 - ...
这个“ajax示例java版本”应该是一个Java实现的Ajax应用,用于演示如何在后台处理和前端交互。 在Java中实现Ajax通常涉及到以下关键知识点: 1. **JavaScript库**:虽然Ajax的核心是JavaScript,但实际开发中我们...
标题中提到的"json数据处理常用前后台文件"主要包括了JSON相关的JavaScript库和Java的jar包,这些都是在处理JSON数据时非常重要的工具。 1. **json.js**:这是一个JavaScript库,通常用于在浏览器环境中解析和生成...
Java通过Servlet、JSP(JavaServer Pages)以及Spring框架等工具来配合Ajax实现后台的数据处理。以下是一些关键知识点: 1. **XMLHttpRequest对象**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与...
通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这种技术的最大优点是,用户可以与页面进行交互,而无需等待整个新页面的加载,从而提供了更好的用户体验。 **jQuery**是一个快速、简洁的...
在前端,项目大量运用Ajax(jQuery和JSON)技术,实现了页面的异步更新,提升了用户体验。 责任描述中,主要职责包括: 1. 预约教练模块:设计并实现了一个让学员可以按时间或教练预约的功能。学员登录后,能够查看...
首先,Ajax的核心原理在于XMLHttpRequest对象,它允许JavaScript在后台与服务器进行异步数据交换,从而实现页面的局部刷新。在Java环境中,通常结合JSP(JavaServer Pages)和Servlet来处理前端与后端的交互。JSP...
本篇文章将通过一个具体的示例(JSP页面+后台实例)来详细介绍如何实现AJAX跨域请求。 #### 二、同源策略概述 同源策略(Same-origin policy)是浏览器的一项安全措施,用于限制一个源上的网页脚本与另一个源上的...