文档章节

Ajax+Spring MVC实现跨域请求(JSONP)

蜀山下的鱼
 蜀山下的鱼
发布于 2015/04/29 00:37
字数 861
阅读 236
收藏 2

背景:

AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源。可

以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。

百度一下,发现是遇到了跨域请求请求问题。搜集资料如下

JSONP解释

在解释JSONP之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载额文档的属性。有点绕,说的简单点就是浏览器限制脚本只能和同协议、同域名、同端口的脚本进行交互。

JSONP就是为了解决这一问题的,JSONP是英文JSON with Padding的缩写,是一个非官方的协议。他允许服务端生成script tags返回值客户端,通过javascript callback的形式来实现站点访问。JSONP是一种script tag的注入,将server返回的response添加到页面是实现特定功能。

简而言之,JSONP本身不是复杂的东西,就是通过scirpt标签对javascript文档的动态解析绕过了浏览器的同源策略。

JSONP原理及实现

接下来,来实际模拟一个跨域请求的解决方案。后端为Spring MVC架构的,前端则通过Ajax进行跨域访问。

1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback)),然后以JavaScript语

法的方式,生成一个function

2、接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端。

3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的

回调函数里(动态执行回调函数)。

这种动态解析js文档和eval函数是类似的。


经过一番努力,解决如下:

SpringMVC端:

@RequestMapping("/get")
	   public void get(HttpServletRequest req,HttpServletResponse res) {
	       res.setContentType("text/plain");
	       String callbackFunName =req.getParameter("callbackparam");//得到js函数名称
	       try {
	           res.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp数据
	       } catch (IOException e) {
	           e.printStackTrace();
	       }
	   }
	   
	   @RequestMapping("/getJsonp")
	   @ResponseBody
	   public JSONPObject getJsonp(String callbackparam){
			Company company=new Company();
			company.setAddress("广州天河华景软件园");
			company.setEmail("123456@qq.com");
			company.setName("广州讯动网络可以有限公司");
			company .setPhone("12345678912");
		   return new JSONPObject(callbackparam, company); 
	   }

AJAX端:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function(){
	
	
$("#but1").click(function(){
     $.ajax({
		url:'http://127.0.0.1:8080/DevInfoWeb/get',
		type: "get",
		async: false,
		dataType: "jsonp",
		jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数 
		jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来 
		success: function(json) {
		 alert(json);
		},
		error: function(){alert('Error');}
});
});


$("#but2").click(function(){
     $.ajax({
		url:'http://127.0.0.1:8080/DevInfoWeb/getJsonp',
		type: "get",
		async: false,
		dataType: "jsonp",
		jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数 
		jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来 
		success: function(json) {
		 alert(json);
		},
		error: function(){alert('Error');}
});
});


});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button id="but1">按钮1</button> <br/>
<button id="but2">按钮2</button>

</body>
</html>


参考文章:

http://www.2cto.com/kf/201411/351856.html

http://blog.csdn.net/d8111/article/details/45249871


本文转载自:http://blog.csdn.net/caiwenfeng_for_23/article/details/45300739

蜀山下的鱼
粉丝 9
博文 405
码字总数 0
作品 0
广州
高级程序员
私信 提问
Ajax+Spring MVC实现跨域请求(JSONP)

JSONP解释 在解释JSONP之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源...

熊大熊二
2015/09/18
508
2
bboss mvc结合jsonp实现跨站跨域应用间通讯功能介绍

本文介绍bboss mvc结合jsonp实现跨站跨域应用间通讯功能的使用方法和实现机制,切入主题。 bboss最新版本下载: https://github.com/bbossgroups/bbossgroups-3.5 bboss mvc最新版本通过mvc...

bboss
2012/05/16
0
0
spring mvc+Ajax跨域请求-CORS方式

关于跨域问题,主要用的比较多的是cros跨域和JSONP跨域,JSONP跨域我已经在另外一篇博客中写了,这里主要说的是CORS方式的跨域。 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin re...

别寒
2016/11/02
350
0
JSONP跨域的原理解析

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页...

武文海
2016/03/21
57
0
Web APi之手动实现JSONP或安装配置Cors跨域(七)

前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器、Action方法,以及过滤器、模型绑定等等,想想也是心...

jeffcky
2015/09/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
46分钟前
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部