Ajax+Spring MVC实现跨域请求(JSONP)JSONP 跨域
JSONP原理及实现
接下来,来实际模拟一个跨域请求的解决方案。后端为Spring MVC架构的,前端则通过Ajax进行跨域访问。
1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback)),然后以JavaScript语
法的方式,生成一个function
2、接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端。
3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的
回调函数里(动态执行回调函数)。
这种动态解析js文档和eval函数是类似的。
AJAX端:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!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>
|
SpringMVC端:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@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+Spring MVC实现跨域请求(JSONP)JSONP 跨域的更多相关文章
- JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- 跨域请求之JSONP 一
跨域请求之JSONP 一 跨域请求的方式有很多种, iframe document.domain window.name script XDomainRequest (IE8+) XMLHTTPReq ...
- Django跨域请求之JSONP和CORS
现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...
- js跨域请求(jsonp)
jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...
- Spring MVC体系结构和处理请求控制器
Spring MVC体系结构和处理请求控制器 一:MVC设计模式: (1.)数据访问接口:DAO层 (2.)处理业务逻辑层:Service层 (3.)数据实体:POJO (4.)负责前段请求接受并处理 ...
- Spring MVC 原理探秘 - 一个请求的旅行过程
1.简介 在前面的文章中,我较为详细的分析了 Spring IOC 和 AOP 部分的源码,并写成了文章.为了让我的 Spring 源码分析系列文章更为丰富一些,所以从本篇文章开始,我将来向大家介绍一 ...
- Spring MVC的handlermapping之请求分发如何找到正确的Handler(BeanNameUrlHandlerMapping,SimpleUrlHandlerMapping)
本文讲的是Spring MVC如何找到正确的handler, 前面请求具体怎么进入到下面的方法,不再细说. 大概就是Spring mvc通过servlet拦截请求,实现doService方法,然后进入 ...
- Ajax+Spring MVC实现跨域请求(JSONP)(转)
背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...
- Ajax+Spring MVC实现跨域请求(JSONP)
背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...
随机推荐
- 转:JMeter 参数化之利用JDBC Connection Configuration从数据库读取数据并关联变量
1. 下载mysql jar包 下载mysql jar包 http://dev.mysql.com/downloads/connector/j/ 网盘下载地址:mysql-connector-ja ...
- nmon安装(转)
安装说明安装环境:CentOS-6.3安装方式:源码编译安装软件:nmon_linux_14i.tar.gz下载地址:nmon:http://nmon.sourceforge.net/pm ... n ...
- 《Mastering Opencv ...读书笔记系列》车牌识别(I)
http://blog.csdn.net/jinshengtao/article/details/17883075/ <Mastering Opencv ...读书笔记系列>车牌识别(I ...
- java 读取excel 正常 xls
package com.sun.test; import java.io.BufferedInputStream;import java.io.File;import java.io.FileInpu ...
- json恶补
JS操作JSON总结 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScr ...
- 6、Web应用程序中的安全向量 -- customErrors(适当的错误报告和堆栈跟踪)
几乎所有的网站在开发过程中都在web.config文件中设置了特性<customErrors mode="off">. customErrors模式有3个可选的设置项: ...
- 【转】Java线程与Linux内核线程的映射关系
Linux从内核2.6开始使用NPTL (Native POSIX Thread Library)支持,但这时线程本质上还轻量级进程. Java里的线程是由JVM来管理的,它如何对应到操作系统的线程是 ...
- contenteditable模仿textarea文本框
contenteditable 属性是 HTML5 中的新属性. 例子:<p contenteditable="true" style=" border:solid ...
- erlang调试技术之etop
etop是erlang进程信息查看工具,类似于UNIX的top. 一.配置参数 node The measured node. Value: atom() Mandatory setcookie Co ...
- 36.中国特色社会主义的体制中有这样的现象:地方省政府要坚持党的领导和按 照国务院的指示进行安全生产。请编写一个java应用程序描述上述的体制现象。 要求如下: (1)该应用程序中有一个“党中央”接口:CentralPartyCommittee,该接口中 有个“坚持党的领导”方法:void partyLeader() (2)该应用程序中有一个“国务院”抽象类:StateCouncil,该抽象类中有
//接口:CentralPartyCommittee package jieKou; public interface CentralPartyCommittee { void partyLeader ...