使用场景:
在处理客户端跨域请求时,可以使用JSONP(JSON with Padding)资料格式,该方式允许我们在客户端使用get方式配合服务器端,实现跨域请求。
JSONP存在的原因:
首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。但我们可根据<script/> 标签引用远程资源获得灵感
<script src="http://ajax....com/ajax/jquery/jquery-1.7.0.js" type="text/javascript"></script>
通过使用<script/> 标签来绕过浏览器的同源策略。主要是利用了 <script/> 标签对 javascript 文档的动态解析来实现。
以jquery+springmvc为例:
客户端
$.ajax({ url : "http://localhost:8888/demo/queryUser", type : "GET", dataType:"jsonp", jsonpCallback:"jsonpCallback", success : function(data) { alert(data); } });
服务端
@RequestMapping(value = "/demo/queryUser") @ResponseBody public JSONPObject queryUser(@RequestParam String jsonpCallback,@RequestParam String param) { List<User> userList=queryUserList(param); return new JSONPObject(jsonpCallback, userList); }
相关推荐
本篇文章将深入探讨如何利用SpringMVC框架构建一个简单的服务端接口,提供JSONP(JSON with Padding)服务。 JSONP是一种跨域数据交互协议,通过动态插入`<script>`标签来实现JavaScript获取非同源服务器的数据。在...
- 如果需要支持JSONP,后端需要根据请求中的`callback`参数动态构建返回的JSON字符串,将数据包裹在回调函数内。 - 前端则通过创建`<script>`标签并监听`onload`事件来接收和执行JSONP响应。 通过"vue-springboot...
2. **处理JSONP请求**:在Controller方法中,通过检测请求参数(通常是`callback`或`jsonp`),判断是否为JSONP请求。如果是JSONP请求,我们需要将返回的JSON数据包裹在一个JavaScript函数调用中,函数名即为请求...
jsonpCallback: "successCallback", xhrFields: { withCredentials: true }, success: function (data) { // 成功处理逻辑 }, error: function (data) { console.log("登录出错"); $.we.utils.gotoUrl("/...
jsonpCallback: "successCallback", xhrFields: { withCredentials: true }, success: function (data) {}, error: function (data) { console.log("登录出错"); $.we.utils.gotoUrl("/"); } }); ``` ####...