Struts+Spring+Hibernate项目整合AJAX+JSON
1、什么是AJAX
AJAX是 “Asynchronous JavaScript and XML” 的简称，即异步的JavaScript和XML。
所谓异步，就是提交一个请求不必等待响应回来，可以直接去做其他事情。同步则是提交请求必须等待结果返回才能进行下一步操作。同时，异步能够局部刷新页面，比如网站常见的输入用户名后的局部显示该用户名是否可用的信息，这种可以更好地提高用户体验。
接下来我们回顾一下AJAX的基本用法：
核心对象 XMLHttpRequest，它是浏览器内部的对象，可以用来发送HTTP请求和接收HTTP响应。它的实现根据浏览器可能有不同，一般创建需要进行条件判断
if(window.ActiveObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}5
1
if(window.ActiveObject) {
2
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
3
} else if (window.XMLHttpRequest) {
4
xmlHttp = new XMLHttpRequest();
5
}
XMLHttpRequest的重要属性
- readyState —— 返回当前请求状态，用0-5表示
- status —— 返回当前服务器的状态，用数字（状态码）表示，如200、500、404 etc.
- statusText —— 功能同status，不同点在于它以文本的形式进行表示
- onreadystatechange —— 事件触发器，readyState/status发生变化会触发该项
- responseText —— 接收服务器端返回的文本内容，以字符串形式存在
- responseXML —— 接收服务器响应，以XML存在，可以解析为一个DOM对象
XMLHttpRequest的重要方法
- open() --> e.g. open("GET", url, true)
- send() --> e.g. send(null)
下面是一个简单例子
<script type="text/javascript">
var xmlHttp;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function validate() {
//todo 编写Ajax校验，发送请求和处理，并且显示信息
//创建createXMLRequest对象
createXMLHttpRequest();
//使用DOM，得到id值是username的域
var username = document.getElementById("username");
var url = "ValidateUsernameCtl?username=" + escape(username.value);
//向服务器端的ValidateUsernameCtl发送异步请求
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
//以responseXML属性，接收服务器端返回的xml文件，使用DOM进行解析
var msg = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(msg, passed);
}
}
}
function setMessage(message, passed) {
var validateMessage = document.getElementById("usernamemsg");
var fontColor = "red";
if(passed == "true") {
fontColor = "green";
}
//对<div name="usernmaesg">的地方设置其间的代码innerHTML为指定代码
validateMessage.innerHTML = "<font color=" + fontColor + ">" + message + "</font>";
}
</script>46
1
<script type="text/javascript">
2
var xmlHttp;
3
4
//创建XMLHttpRequest对象
5
function createXMLHttpRequest() {
6
if(window.ActiveXObject) {
7
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
8
} else if(window.XMLHttpRequest) {
9
xmlHttp = new XMLHttpRequest();
10
}
11
}
12
13
function validate() {
14
//todo 编写Ajax校验，发送请求和处理，并且显示信息
15
//创建createXMLRequest对象
16
createXMLHttpRequest();
17
//使用DOM，得到id值是username的域
18
var username = document.getElementById("username");
19
var url = "ValidateUsernameCtl?username=" + escape(username.value);
20
//向服务器端的ValidateUsernameCtl发送异步请求
21
xmlHttp.open("GET", url, true);
22
xmlHttp.onreadystatechange = callback;
23
xmlHttp.send(null);
24
}
25
26
function callback() {
27
if(xmlHttp.readyState == 4) {
28
if(xmlHttp.status == 200) {
29
//以responseXML属性，接收服务器端返回的xml文件，使用DOM进行解析
30
var msg = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
31
var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
32
setMessage(msg, passed);
33
}
34
}
35
}
36
37
function setMessage(message, passed) {
38
var validateMessage = document.getElementById("usernamemsg");
39
var fontColor = "red";
40
if(passed == "true") {
41
fontColor = "green";
42
}
43
//对<div name="usernmaesg">的地方设置其间的代码innerHTML为指定代码
44
validateMessage.innerHTML = "<font color=" + fontColor + ">" + message + "</font>";
45
}
46
</script>
2、JSON替代XML的优势
在标题1中我们提到的AJAX中X实际上是XML，这里我们要换成JSON，为什么要采取JSON呢？
1）数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
2）易于解析，客户端JavaScript可以简单的通过eval_r()进行JSON数据的读取。
另外，JSON是趋势，我们要跟着大势走，顺水推舟，不要没事就去逆流而上。
3、SSH整合AJAX（JSON）的步骤
网上类似的博客几乎都是相同的在不停转载，这个跟我参考的那位网友的感觉是一样，参考的帖子很少，于是自己也鼓捣了很久才解决。Struts2实际上有多种方式实现AJAX，可以参考博文《Struts 2三种方式实现Ajax》，这里为了更好地结合JSON，采用了struts2-json插件的方式。
3.1 配置准备
3.1.1 添加jar包
- 添加struts2-json-plugin-x.x.x.x.jar，用来支持struts和ajax-json的集成
如果你是用的Maven方式，你可以直接添加依赖
<!--struts + ajax json //tips struts 整合 ajax json-->
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-json-plugin</artifactId>
<version>2.3.16.1</version>
</dependency>6
1
<!--struts + ajax json //tips struts 整合 ajax json-->
2
<dependency>
3
<groupId>org.apache.struts</groupId>
4
<artifactId>struts2-json-plugin</artifactId>
5
<version>2.3.16.1</version>
6
</dependency>
- 添加org.json.jar，用来解析json
如果你是用的Maven方式，你可以直接添加依赖
<!--JSON-->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>
</dependency>6
1
<!--JSON-->
2
<dependency>
3
<groupId>org.json</groupId>
4
<artifactId>json</artifactId>
5
<version>20160810</version>
6
</dependency>
3.1.2 配置struts.xml
<package name="ajax" namespace="/ajax" extends="json-default" >
<action name="ajaxAction" class="ajaxAction">
<!-- 返回类型为json-->
<result name="register" type="json">
<!--tips 参数root的含义-->
<param name="root">message</param>
</result>
</action>
</package>9
1
<package name="ajax" namespace="/ajax" extends="json-default" >
2
<action name="ajaxAction" class="ajaxAction">
3
<!-- 返回类型为json-->
4
<result name="register" type="json">
5
<!--tips 参数root的含义-->
6
<param name="root">message</param>
7
</result>
8
</action>
9
</package>
重点注意的是：
- 这里不再继承struts-default，而是json-default（这个文件在我们引入的struts-json插件包中就有配置）
- type需要修改为json
- <param name="root">message</param> 这里我们单独来叙述
这里最难理解的大概就是这个<param name="root">message</param>了，下面来简单说说到底是什么意思（参考链接：JSON中result的root属性）：
所谓root的含义，是指返回的json数据为指定的对象（Action中作为属性的那个类），例如我的源码中AjaxAction中为Message message，将返回和Message对等的json对象。如果没有指定root属性，则默认使用Action作为返回的json对象。
是否使用Action作为返回的json数据的根，区别如下：
例如有Action如下，含两个属性String message、UserInfo userInfo：
public class JsonJqueryStruts2Action extends ActionSupport {
private String message; //使用json返回单个值
private UserInfo userInfo; //使用json返回对象
... ...
}5
1
public class JsonJqueryStruts2Action extends ActionSupport {
2
private String message; //使用json返回单个值
3
private UserInfo userInfo; //使用json返回对象
4
... ...
5
}
result中使用了root参数（<param name="root">userInfo</param>）后返回的json数据：
{"userInfo":[
{"userId":"Patrick", "userName":"123456"}
]} 3
1
{"userInfo":[
2
{"userId":"Patrick", "userName":"123456"}
3
]}
result中没有设置root参数返回Action中的json数据：
{"data":[
{"userInfo":[ {"userId":"Patrick", "userName":"123456"} ] },
{"message":"testMesssageData"}
]} 4
1
{"data":[
2
{"userInfo":[ {"userId":"Patrick", "userName":"123456"} ] },
3
{"message":"testMesssageData"}
4
]}
3.2 编写Action
package com.zker.action;
import com.opensymphony.xwork2.ActionSupport;
import com.zker.common.util.Message;
import com.zker.common.util.SpringContextUtils;
import com.zker.dao.user.UserDao;
import org.json.JSONObject;
import java.io.IOException;
public class AjaxAction extends ActionSupport {
/**用来接受封装的参数 LoginName 用户名*/
String loginName;
/**封装信息，为了测试JSON刻意做成简单的类*/
Message message = new Message();
/**用来返回用于js接收*/
String result;
//tips 要有getter&setter，否则$post的param参数传递不过来
public String getLoginName() {
return loginName;
}
public void setLoginName(String loginName) {
this.loginName = loginName;
}
public Message getMessage() {
return message;
}
public void setMessage(Message message) {
this.message = message;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
/**
* 利用Ajax实现注册的用户名重复性校验
* @return
*/
public String ajaxRegister() throws IOException {
//tips 如何手动取出容器中的bean?答案如下
UserDao userDao = (UserDao)SpringContextUtils.context.getBean("userDao");
if (userDao.findAdminByLoginName(loginName) != null
|| userDao.findUserByLoginName(loginName) != null) {
message.setMsg("用户名已存在");
message.setStatus(false);
} else {
message.setMsg("用户名可以注册");
message.setStatus(true);
}
/*
//JSON-String转换 obj -> jsonStr
//当struts-login.xml中root为result时，此处才需要解开
this.result = JSONObject.wrap(message).toString();
*/
return "register";
}
}71
1
package com.zker.action;
2
3
import com.opensymphony.xwork2.ActionSupport;
4
import com.zker.common.util.Message;
5
import com.zker.common.util.SpringContextUtils;
6
import com.zker.dao.user.UserDao;
7
import org.json.JSONObject;
8
9
import java.io.IOException;
10
11
12
public class AjaxAction extends ActionSupport {
13
/**用来接受封装的参数 LoginName 用户名*/
14
String loginName;
15
16
/**封装信息，为了测试JSON刻意做成简单的类*/
17
Message message = new Message();
18
19
/**用来返回用于js接收*/
20
String result;
21
22
//tips 要有getter&setter，否则$post的param参数传递不过来
23
public String getLoginName() {
24
return loginName;
25
}
26
27
public void setLoginName(String loginName) {
28
this.loginName = loginName;
29
}
30
31
public Message getMessage() {
32
return message;
33
}
34
35
public void setMessage(Message message) {
36
this.message = message;
37
}
38
39
public String getResult() {
40
return result;
41
}
42
43
public void setResult(String result) {
44
this.result = result;
45
}
46
47
/**
48
* 利用Ajax实现注册的用户名重复性校验
49
* @return
50
*/
51
public String ajaxRegister() throws IOException {
52
//tips 如何手动取出容器中的bean?答案如下
53
UserDao userDao = (UserDao)SpringContextUtils.context.getBean("userDao");
54
if (userDao.findAdminByLoginName(loginName) != null
55
|| userDao.findUserByLoginName(loginName) != null) {
56
message.setMsg("用户名已存在");
57
message.setStatus(false);
58
} else {
59
message.setMsg("用户名可以注册");
60
message.setStatus(true);
61
}
62
63
/*
64
//JSON-String转换 obj -> jsonStr
65
//当struts-login.xml中root为result时，此处才需要解开
66
this.result = JSONObject.wrap(message).toString();
67
*/
68
69
return "register";
70
}
71
}
这里为了验证AJAX+JSON，故意采取的建立一个Message类来传递信息，多此一举只为学习，实际操作请注意。其他信息详见代码，这里不做具体展开。
3.3 编写JS
<!--Ajax + JSON-->
$(document).ready( function() {
//使用 Ajax 的方式 判断登录
$("#loginName").blur( function() {
var url = "/ajax/ajaxAction!ajaxRegister";
var params = {loginName : $("#loginName").val()};
/*method1 <param name="root">result</param>
$.post(
url, //服务器要接受的url
params, //传递的参数
function validateLoginName(result){ //服务器返回后执行的函数 参数msg保存的是服务器发送到客户端的数据
//alert("服务器端返回的data --> " + result);
var msgObj = eval("(" + result + ")"); //jsonStr -> jsObj(jsonObj)
var passed = msgObj.status;
setMessage(msgObj.msg, passed);
},
'json' //数据传递的类型 json
);
*/
/*method2 <param name="root">message</param> */
$.post(
url, //服务器要接受的url
params, //传递的参数
function validateLoginName(message){ //服务器返回后执行的函数 参数是服务器发送到客户端的数据
var msg = message.msg;
var passed = message.status;
setMessage(msg, passed);
},
'json' //数据传递的类型 json
);
function setMessage(message, passed) {
var validateMessage = document.getElementById("loginNameMsg");
var fontColor = "red";
if(passed) {
fontColor = "green";
}
//对<div name="loginNameMsg">的地方设置其间的代码innerHTML为指定代码
validateMessage.innerHTML = "<font color=" + fontColor + ">"
+ " "
+ message + "</font>";
}
});
}); 46
1
<!--Ajax + JSON-->
2
$(document).ready( function() {
3
//使用 Ajax 的方式 判断登录
4
$("#loginName").blur( function() {
5
var url = "/ajax/ajaxAction!ajaxRegister";
6
var params = {loginName : $("#loginName").val()};
7
8
/*method1 <param name="root">result</param>
9
$.post(
10
url, //服务器要接受的url
11
params, //传递的参数
12
function validateLoginName(result){ //服务器返回后执行的函数 参数msg保存的是服务器发送到客户端的数据
13
//alert("服务器端返回的data --> " + result);
14
var msgObj = eval("(" + result + ")"); //jsonStr -> jsObj(jsonObj)
15
var passed = msgObj.status;
16
setMessage(msgObj.msg, passed);
17
},
18
'json' //数据传递的类型 json
19
);
20
*/
21
22
/*method2 <param name="root">message</param> */
23
$.post(
24
url, //服务器要接受的url
25
params, //传递的参数
26
function validateLoginName(message){ //服务器返回后执行的函数 参数是服务器发送到客户端的数据
27
var msg = message.msg;
28
var passed = message.status;
29
setMessage(msg, passed);
30
},
31
'json' //数据传递的类型 json
32
);
33
34
function setMessage(message, passed) {
35
var validateMessage = document.getElementById("loginNameMsg");
36
var fontColor = "red";
37
if(passed) {
38
fontColor = "green";
39
}
40
//对<div name="loginNameMsg">的地方设置其间的代码innerHTML为指定代码
41
validateMessage.innerHTML = "<font color=" + fontColor + ">"
42
+ " "
43
+ message + "</font>";
44
}
45
});
46
});
<div id="loginNameMsg"></div>
<div class="login_sr">账号：<s:textfield cssClass="login_inputYhm" name="sysUser.loginName" id="loginName" />2
1
<div id="loginNameMsg"></div>
2
<div class="login_sr">账号：<s:textfield cssClass="login_inputYhm" name="sysUser.loginName" id="loginName" />
这里值得一提的就是JQuery的$.post()方法，原型是ajax()，通过 HTTP 请求加载远程数据，返回其创建的 XMLHttpRequest 对象。
至此，已经OK。
4、参考链接
Struts+Spring+Hibernate项目整合AJAX+JSON的更多相关文章
- Struts+Spring+Hibernate项目的启动线程
在Java Web项目中,经常要在项目开始运行时启动一个线程,每隔一定的时间就运行一定的代码,比如扫描数据库的变化等等.要实现这个功能,可以现在web.xml文件中定义一个Listener,然后在这个 ...
- Struts+Spring+Hibernate整合入门详解
Java 5.0 Struts 2.0.9 Spring 2.0.6 Hibernate 3.2.4 作者: Liu Liu 转载请注明出处 基本概念和典型实用例子. 一.基本概念 St ...
- 用eclipse搭建SSH（struts+spring+hibernate）框架
声明: 本文是个人对ssh框架的学习.理解而编辑出来的,可能有不足之处,请大家谅解,但希望能帮助到大家,一起探讨,一起学习! Struts + Spring + Hibernate三者各自的特点都是什 ...
- Struts+Spring+Hibernate、MVC、HTML、JSP
javaWeb应用 JavaWeb使用的技术,比如SSH(Struts.Spring.Hibernate).MVC.HTML.JSP等等技术,利用这些技术开发的Web应用在政府项目中非常受欢迎. 先说 ...
- velocity+spring mvc+spring ioc+ibatis初试感觉(与struts+spring+hibernate比较)
velocity+spring mvc+spring ioc+ibatis框架是我现在公司要求采用的,原因是因为阿里巴巴和淘宝在使用这样的框架,而我公司现在还主要是以向阿里巴巴和淘宝输送外派人员为 主 ...
- SSH（struts+spring+hibernate）常用配置整理
SSH(struts+spring+hibernate)常用配置整理 web.xml配置 <?xml version="1.0" encoding="UTF-8&q ...
- Struts,spring,hibernate三大框架的面试
Struts,spring,hibernate三大框架的面试 1.Hibernate工作原理及为什么要用? 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3 ...
- Struts+Spring+Hibernate进阶开端(一)
入行就听说SSH,起初还以为是一个东西,具体内容就更加不详细了,总觉得高端大气上档次,经过学习之后才发现,不仅仅是高大上,更是低调奢华有内涵,经过一段时间的研究和学习SSH框架的基本原理与思想,总算接 ...
- 【SSH进阶之路】Struts + Spring + Hibernate 进阶开端（一）
[SSH进阶之路]Struts + Spring + Hibernate 进阶开端(一) 标签: hibernatespringstrutsssh开源框架 2014-08-29 07:56 9229人 ...
随机推荐
- Servlet 服务器端小程序
1.tomcat安装及目录介绍 JAVA_HOME CATALINA_HOME PATH=%JAVA_HOME%/bin;2.静态web项目.动态web项目 WEB-INF lib classes w ...
- let、var、const声明的区别
前言 看了方应杭老师的一篇解释let的文章,对JavaScript中的声明有了深刻的理解,这里也就有了总结一下JavaScript中各种声明之间区别的这篇文章. JavaScript中变量声明机制 首 ...
- BYS推荐MS前端PhoneCall面试问题整理-2
JS:1. 如何为一个已有的对象加一个新的方法,Prototype,这个不仅要知道,还要用过,写过 2. Angular和Ember比较的优势或不同点在哪里 3. null和undefined的区别, ...
- Mysql数据库防SQL注入原理
每个语言都有自己的数据库框架或库,无论是哪种语言,哪种库,它们在数据库防注入方面使用的技术原理无外乎下面介绍的几种方法. 一.特殊字符转义处理 Mysql特殊字符指在mysql中具有特殊含义的字符,除 ...
- 如何生成转储(dmp)文件--工具篇
转储文件也就是我们常说的dump文件.可以把转储文件看成软件的某个时刻的一个快照.转储文件一般都是在软件出现问题时手动生成或者程序自动生成.下面我们介绍几种生成转储文件的方法. 1. 任务管理器 任务 ...
- 聊聊GIS中那些坐标系
从第一次上地图学的课开始,对GIS最基本的地图坐标系统就很迷.也难怪,我那时候并不是GIS专业的学生,仅仅是一门开卷考试的专业选修课,就没怎么在意. 等我真正接触到了各种空间数据产品,我才知道万里长征 ...
- Andrew Ng机器学习课程笔记--week5(下)
Neural Networks: Learning 内容较多,故分成上下两篇文章. 一.内容概要 Cost Function and Backpropagation Cost Function Bac ...
- pdf.js跨域问题的分析
最近在做公司业务时,需要在线浏览pdf.在现代浏览器中, 均可直接浏览pdf文件,无兼容性问题.但公司的业务线需要支持到ie8. 经过自己的搜索调研, pdf.js比较适合.pdf.js兼容到ie9, ...
- 数据结构-环形队列 C和C++的实现
队列: 含义:是一种先入先出(FIFO)的数据结构. 当我们把数据一个一个放入队列中.当我们需要用到这些数据时,每次都从队列的头部取出第一个数据进行处理.就像排队进场一样,先排队的人先进场. 结构如下 ...
- python专题-Mysql数据库（python2._+ Mysqldb）
Python使用MySQL数据库 MySQLdb驱动从2014年1月停止了维护. Python2 MySQLdb 一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安 ...