`

jquery实现的jsonp掉java后台

阅读更多
什么是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();
		}
	}
分享到:
评论

相关推荐

    jQuery+JSONP+artDialog 实现虾米音乐的检索、选取和播放

    在本文中,我们将深入探讨如何使用jQuery、JSONP和artDialog技术实现虾米音乐的检索、选取和播放功能。这是一套常见的Web开发技术组合,适用于跨域数据获取和交互式用户界面的创建。 首先,jQuery是一个强大的...

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

    在本文中,我们将详细探讨如何使用JSONP(JSON with Padding)技术解决Ajax跨域问题,特别是在调用Java后台时的实现方法。 JSONP是由浏览器的一个安全特性所启发,即虽然不允许跨域脚本直接读取数据,但允许跨域...

    JQueryMobile与后台通信

    总结,jQuery Mobile通过AJAX与后台进行通信,结合页面生命周期事件、表单提交和响应数据处理,可以实现动态、交互的移动应用。在与Java后端集成时,理解JSP和Servlet的工作原理,以及RESTful API设计,有助于构建...

    AJAX jsonp应用,页面配置以及后台代码

    2. **使用AJAX发起请求**:使用jQuery的`$.ajax`方法发起JSONP请求,设置`dataType`为`jsonp`,并指定`callback`参数为之前定义的回调函数名。 ```javascript $.ajax({ url: 'http://example.com/data', type: '...

    vs2008后台调用前台,前台调用后台代码

    在Visual Studio 2008(VS2008)中,开发人员经常需要在后台(服务器端)和前台(客户端)之间进行交互,以实现更复杂的Web应用程序功能。这通常涉及到ASP.NET中的页生命周期、AJAX技术以及事件处理机制。下面我们将...

    JqueryAPI +easyUI+demo

    这通常结合JSONP或AJAX实现。 4. **事件处理(Event Handling)**:EasyUI组件也支持事件监听,如 `onLoadSuccess` 用于在数据加载成功后执行的回调,`onClickRow` 用于监听行点击事件。 5. **插件扩展(Plugin ...

    jQueryEasyUI1.3.6版本

    2. **数据绑定**:jQuery EasyUI 支持与后台数据源进行数据绑定,通过Ajax或JSONP实现异步加载,使页面内容动态更新,提高用户体验。例如,表格组件Grid可以直接与服务器端的数据接口进行交互,实现分页、排序、过滤...

    Manning.jQuery.in.Action

    虽然jQuery主要与客户端JavaScript关联,但通过各种技术如JSONP和CORS,它可以与任何支持HTTP的服务器进行通信,包括Java服务器。 在提供的压缩文件列表中,"Manning.jQuery.in.Action.Feb.2008.1933988355.pdf"很...

    Ajax跨域实现代码(后台jsp).docx

    在jQuery中,可以使用`$.ajax()`方法的`jsonp`或`dataType: 'jsonp'`选项来实现JSONP请求,如下所示: ```javascript $(document).ready(function () { $('#jqueryajax').bind('click', function () { $.ajax({ ...

    Ajax与Java交互

    本主题将深入探讨Ajax与Java后台交互的核心概念和技术。 一、Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信。当用户触发一个事件(如点击按钮),JavaScript会创建一个...

    struts2+jquery+json 小例子

    - **跨域请求**:由于同源策略限制,JSON常用于解决跨域问题,通过JSONP(JSON with Padding)或CORS(跨域资源共享)实现。 4. **整合应用**: - **前端交互**:jQuery通过AJAX与后台Struts2 Action通信,发送...

    Ajax+Java开发实例源文件

    7. **JSONP跨域通信**:如果需要跨域请求,可以使用JSONP(JSON with Padding)技术,通过动态插入`&lt;script&gt;`标签来实现。 8. **错误处理**:在Ajax请求中,我们需要处理网络错误、服务器错误以及解析错误等各种...

    J2EE中JSON+Jquery_AJAX应用.pdf

    结合 AJAX 技术,可以在不刷新整个页面的情况下,实现后台数据的异步加载。 2. **详述** - **依赖的库文件** - JSON 功能通常依赖于 JSON 库,如 json.org 提供的 `json.jar`,用于 Java 端的数据转换。 - ...

    ajax示例java版本

    这个“ajax示例java版本”应该是一个Java实现的Ajax应用,用于演示如何在后台处理和前端交互。 在Java中实现Ajax通常涉及到以下关键知识点: 1. **JavaScript库**:虽然Ajax的核心是JavaScript,但实际开发中我们...

    json数据处理常用前后台文件

    标题中提到的"json数据处理常用前后台文件"主要包括了JSON相关的JavaScript库和Java的jar包,这些都是在处理JSON数据时非常重要的工具。 1. **json.js**:这是一个JavaScript库,通常用于在浏览器环境中解析和生成...

    ajax java 典型实例下载

    Java通过Servlet、JSP(JavaServer Pages)以及Spring框架等工具来配合Ajax实现后台的数据处理。以下是一些关键知识点: 1. **XMLHttpRequest对象**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与...

    Ajax 使用Jquery与服务器的交互。

    通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这种技术的最大优点是,用户可以与页面进行交互,而无需等待整个新页面的加载,从而提供了更好的用户体验。 **jQuery**是一个快速、简洁的...

    java开发简历中参考项目

    在前端,项目大量运用Ajax(jQuery和JSON)技术,实现了页面的异步更新,提升了用户体验。 责任描述中,主要职责包括: 1. 预约教练模块:设计并实现了一个让学员可以按时间或教练预约的功能。学员登录后,能够查看...

    面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序

    首先,Ajax的核心原理在于XMLHttpRequest对象,它允许JavaScript在后台与服务器进行异步数据交换,从而实现页面的局部刷新。在Java环境中,通常结合JSP(JavaServer Pages)和Servlet来处理前端与后端的交互。JSP...

    ajax跨域请求

    本篇文章将通过一个具体的示例(JSP页面+后台实例)来详细介绍如何实现AJAX跨域请求。 #### 二、同源策略概述 同源策略(Same-origin policy)是浏览器的一项安全措施,用于限制一个源上的网页脚本与另一个源上的...

Global site tag (gtag.js) - Google Analytics