Struts+Spring+Hibernate项目整合AJAX+JSON
1、什么是AJAX
if(window.ActiveObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
if(window.ActiveObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
- readyState —— 返回当前请求状态,用0-5表示
- status —— 返回当前服务器的状态,用数字(状态码)表示,如200、500、404 etc.
- statusText —— 功能同status,不同点在于它以文本的形式进行表示
- onreadystatechange —— 事件触发器,readyState/status发生变化会触发该项
- responseText —— 接收服务器端返回的文本内容,以字符串形式存在
- responseXML —— 接收服务器响应,以XML存在,可以解析为一个DOM对象
- 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>
<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>
2、JSON替代XML的优势
3、SSH整合AJAX(JSON)的步骤
3.1 配置准备
3.1.1 添加jar包
- 添加struts2-json-plugin-x.x.x.x.jar,用来支持struts和ajax-json的集成
<!--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>
<!--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>
- 添加org.json.jar,用来解析json
<!--JSON-->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>
</dependency>
<!--JSON-->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>
</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>
<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>
- 这里不再继承struts-default,而是json-default(这个文件在我们引入的struts-json插件包中就有配置)
- type需要修改为json
- <param name="root">message</param> 这里我们单独来叙述
public class JsonJqueryStruts2Action extends ActionSupport {
private String message; //使用json返回单个值
private UserInfo userInfo; //使用json返回对象
... ...
}
public class JsonJqueryStruts2Action extends ActionSupport {
private String message; //使用json返回单个值
private UserInfo userInfo; //使用json返回对象
... ...
}
{"userInfo":[
{"userId":"Patrick", "userName":"123456"}
]}
{"userInfo":[
{"userId":"Patrick", "userName":"123456"}
]}
{"data":[
{"userInfo":[ {"userId":"Patrick", "userName":"123456"} ] },
{"message":"testMesssageData"}
]}
{"data":[
{"userInfo":[ {"userId":"Patrick", "userName":"123456"} ] },
{"message":"testMesssageData"}
]}
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";
}
}
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";
}
}
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>";
}
});
});
<!--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>";
}
});
});
<div id="loginNameMsg"></div>
<div class="login_sr">账号:<s:textfield cssClass="login_inputYhm" name="sysUser.loginName" id="loginName" />
<div id="loginNameMsg"></div>
<div class="login_sr">账号:<s:textfield cssClass="login_inputYhm" name="sysUser.loginName" id="loginName" />
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人 ...
随机推荐
- Node.js之使用Buffer类处理二进制数据
Node.js之使用Buffer类处理二进制数据 Buffer类可以在处理TCP流或文件流时处理二进制数据,该类用来创建一个专门存放二进制数据的缓存区. 1. 创建Buffer对象 1.1 直接创建: ...
- Git 默认不区分大小写
背景: 通过代码规范,修改了包名为全小写(修改了文件夹目录),但发现push后,git服务器的文件夹目录还是为大写 解决方法: git默认是不区分大小写的,意思是你修改一个文件名/文件夹的时候,git ...
- 80C51学习 蜂鸣器
/* 蜂鸣器分为有源和无源 其中有源是指有振荡源 ULN2003 达林顿管 输入输出反向放大 */ #include "reg52.h" typedef unsigned int ...
- 【Centos7】安装memcached
1.Linux系统安装memcached,首先要先安装libevent库. 安装libevent库有两种方式 (1)rpm安装 yum install libevent libdeve (2)源码包安 ...
- Eclipse字体颜色的设置方法
Eclipse字体颜色的设置方法.. ----------------- .---------------------此时我们就希望设置一下字体eclipse字体颜色,让他像其它编辑器一样的,有不同的 ...
- Java利用自定义注解、反射实现简单BaseDao
在常见的ORM框架中,大都提供了使用注解方式来实现entity与数据库的映射,这里简单地使用自定义注解与反射来生成可执行的sql语句. 这是整体的目录结构,本来是为复习注解建立的项目^.^ 好的,首先 ...
- BestCoder Round #34_1002 以及 hdu 5191
枚举最终的W堆积木在哪,确定了区间,那么就需要把高于H的拿走,低于H的补上,高处的积木放到矮的上面,这样最优. 注意多出来的积木可以放在已有积木的前面或者后面,独立成一堆积木,所以需要在n堆积木的前后 ...
- Tomcat知识1
- 我的Markdown的利器——Markdown Here、有道云笔记、iPic
Markdown逐渐成为大家文章编辑的首选,这里推荐两个比较冷门的Markdown工具. 用什么当做Markdown的主力工具? 网上有很多人推荐的Markdown的工具包括专业的Markdown工具 ...
- Java 生产图片验证码
import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;impor ...