1. JSONP定义
JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。
2.JSONP由来
要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。
如何解决跨域访问呢?那就要借助浏览器的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊,它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“This is Victor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。由于站外脚本的引用是通过script tag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过<script> 标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。
3. JSONP原理与实现
首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp.
然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法的文档,返回给客户端。
最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。
js代码
function backOrder(mainRef,terminalSn,cinemaId){ var ticketSystem=$('#ticketSystem').val(); var flag=$.ajax({ dataType: 'jsonp', type : 'get', url : ctx + '/ord/rebackOrder/backOrder?mainRef=' + mainRef, jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"success_jsonpCallback", success : function(data){ var url = ctxStatic + '/excel/export.xlsx'; window.location.href = url; window.location.reload();//刷新当前页面. // alert(data.code) alert("退票成功"); }, error:function (data, status, e){ alert("------退票失败----"); } }); }
后台代码
@RequestMapping(value = "backOrder") @ResponseBody public String backOrder(Order entity ,@RequestParam(required = false)String mainRef,@RequestParam(required = false)String callback, HttpServletRequest request , HttpServletResponse response){ String result = "{\"code\":0,\"msg\":\"fail\"}"; //加上返回参数{"code":0,"msg":"fail"} result=callback+"("+result+")"; return result; }
相关推荐
在本文中,我们将详细探讨如何使用JSONP(JSON with Padding)技术解决Ajax跨域问题,特别是在调用Java后台时的实现方法。 JSONP是由浏览器的一个安全特性所启发,即虽然不允许跨域脚本直接读取数据,但允许跨域...
1. **AJAX跨域**: 通常,AJAX请求受到同源策略限制。为实现跨域,我们可以使用CORS(Cross-Origin Resource Sharing)机制。服务器需要在响应头中添加`Access-Control-Allow-Origin`字段,允许特定的源进行跨域访问...
以下是实现AJAX跨域调用WCF服务的具体步骤和相关知识点: 1. **开启WCF服务的跨域支持**:在WCF服务的配置文件(通常是ServiceName.svc.cs或IServiceName.cs)中,需要启用跨域资源共享(CORS)。这可以通过添加`...
本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域问题。 首先,理解JSONP的基本概念。JSONP是一种非官方的数据交换格式,它的核心思想是利用HTML中的`<script>`标签不受同源策略...
4. AJAX跨域: AJAX本身不支持跨域,但是通过CORS(Cross-Origin Resource Sharing,跨源资源共享)机制,可以实现AJAX的跨域请求。服务器需要在响应头中添加`Access-Control-Allow-Origin`字段,允许指定的源进行...
- **JSON**可以直接被JavaScript解析,而**JSONP**实际上是一个JavaScript函数调用。 - **JSON**主要用于同域内的数据交互,而**JSONP**专门用于跨域场景。 - **JSON**的响应是纯数据,而**JSONP**的响应是可执行的...
**Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...
1. **jQuery的Ajax设置**:在使用Ajax进行跨域请求时,我们需要在`$.ajax()`方法中设置`dataType: 'jsonp'`。这告诉jQuery我们期望服务器返回JSON格式的数据,并通过JSONP机制来处理。 2. **JSONP原理**:JSONP的...
通过上述分析和示例代码,我们可以看到在Java环境中解决JSP中的AJAX跨域访问问题并不复杂,关键在于理解跨域访问的原理以及正确配置CORS或实现JSONP。无论是通过设置响应头来启用CORS,还是通过包装数据来实现JSONP...
**Ajax JSONP 跨域处理详解** 在Web开发中,由于浏览器的安全策略限制,JavaScript通常不能直接访问不同源(协议、域名或端口不同)的资源,这就是所谓的“同源策略”。然而,随着Web应用的发展,跨域数据交互的...
【AJAX跨域解决办法】 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下更新部分网页的技术。然而,由于浏览器的同源策略限制,AJAX请求通常只能发送到与当前页面同一源的...
总结起来,Ajax与Jsonp的结合使用能够让我们在Jquery中轻松地实现跨域数据交互,从而提升Web应用的功能性和用户体验。在实际开发中,需要注意处理可能出现的错误情况,以及合理设计API接口的调用,以保证应用的稳定...
根据提供的文件信息,本文将详细介绍如何通过JSONP等方法解决Ajax跨域问题。 #### Ajax与同源策略 首先,我们需要了解为什么会出现跨域问题。浏览器出于安全考虑,实施了一项名为“同源策略”的安全机制。同源策略...
JavaScript跨域和Ajax跨域是Web开发中常见的问题,尤其在进行前后端分离或API调用时,由于浏览器的同源策略限制,不同域名、协议或端口的资源请求会被阻止,这就是所谓的“跨域”。本文将深入探讨JavaScript和Ajax...
在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp 。 代码如下: html: <body> ...
JSONP(JSON with Padding)是一种跨域数据交互协议,它...这个过程涉及到的知识点包括:JSONP工作原理、Jquery的ajax方法、跨域请求、URL编码以及API调用等。理解这些知识点对于进行前端开发和与各种API交互至关重要。
本文将详细介绍在后台使用JSP实现Ajax跨域的方法。 1. **通过JSONP(JSON with Padding)** JSONP是一种绕过同源策略的方法,它利用了浏览器允许跨域加载`<script>`标签的特性。在客户端,我们可以创建一个`...
**Ajax跨域详解** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术允许我们实现页面的异步更新,无需刷新整个页面即可获取并展示新数据。然而,由于浏览器的安全策略,同一源策略(Same-Origin Policy)...
跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...