ajax.js
function Ajax(recvType){
var aj=new Object();
aj.recvType=recvType ? recvType.toUpperCase() : 'HTML';
aj.targetUrl='';
aj.sendString='';
aj.resultHandle=null;
aj.createXMLHttpRequest=function(){
var request=false;
//window对象中有XMLHttpRequest存在就是非IE,包括(IE7,IE8)
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
if(request.overrideMimeType){
request.overrideMimeType("text/xml");
}
//window对象中有ActiveXObject属性存在就是IE
}else if(window.ActiveXObject){
var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for(var i=0; i<versions.length; i++){
try{
request=new ActiveXObject(versions[i]);
if(request){
return request;
}
}catch(e){
request=false;
}
}
}
return request;
}
aj.XMLHttpRequest=aj.createXMLHttpRequest();
aj.processHandle=function(){
if(aj.XMLHttpRequest.readyState == 4){
if(aj.XMLHttpRequest.status == 200){
if(aj.recvType=="HTML")
aj.resultHandle(aj.XMLHttpRequest.responseText);
else if(aj.recvType=="XML")
aj.resultHandle(aj.XMLHttpRequest.responseXML);
}
}
}
aj.get=function(targetUrl, resultHandle){
aj.targetUrl=targetUrl;
if(resultHandle!=null){
aj.XMLHttpRequest.onreadystatechange=aj.processHandle;
aj.resultHandle=resultHandle;
}
if(window.XMLHttpRequest){
aj.XMLHttpRequest.open("get", aj.targetUrl);
aj.XMLHttpRequest.send(null);
}else{
aj.XMLHttpRequest.open("get", aj.targetUrl, false);
aj.XMLHttpRequest.send();
}
}
aj.post=function(targetUrl, sendString, resultHandle){
aj.targetUrl=targetUrl;
if(typeof(sendString)=="object"){
var str="";
for(var pro in sendString){
str+=pro+"="+sendString[pro]+"&";
}
aj.sendString=str.substr(0, str.length-1);
}else{
aj.sendString=sendString;
}
if(resultHandle!=null){
aj.XMLHttpRequest.onreadystatechange=aj.processHandle;
aj.resultHandle=resultHandle;
}
aj.XMLHttpRequest.open("post", targetUrl,false);
aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
aj.XMLHttpRequest.send(aj.sendString);
}
return aj;
}
user.js
function validate(val) {
var boolean1 = false;
var userText = document.getElementById('userText'); // 获取 SPAN 对象
// 如果为空或者输入空格执行
if (!(val.match(/^\S+$/))) {
userText.innerHTML = '<font color="red">请输入用户名!</font>';
} else {
if (val.match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)) {
var ajax = Ajax(); //创建 Ajax 对象
// 通过 Ajax POST 方法把用户名提交, 进行验证用户名是否存在,并返回结果
ajax.post('user_findUser.action', {"userName":val}, function(data){
if(data == 'false'){
userText.innerHTML = '<font color="red">用户名已存在!</font>';
}else{
boolean1 = true;
userText.innerHTML = '';
}
});
} else {
userText.innerHTML = '<font color="red">用户名格式不正确,请输入邮箱!</font>';
}
}
return boolean1;
}
function checkPwd(val) {
var boolean2 = false;
var pwdText = document.getElementById('pwdText');
if (!(val.match(/^\S+$/))) {
pwdText.innerHTML = '<font color="red">请输入密码!</font>';
} else {
pwdText.innerHTML = '';
boolean2 = true;
}
return boolean2;
}
function checkLogin(val) {
var boolean3 = false;
var userText = document.getElementById('userText');
if (!(val.match(/^\S+$/))) {
userText.innerHTML = '<font color="red">请输入用户名!</font>';
}else{
if (!(val.match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/))) {
userText.innerHTML = '<font color="red">用户名格式不正确,请输入邮箱!</font>';
}else{
userText.innerHTML = '';
boolean3 = true;
}
}
return boolean3;
}
user_update.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="<%=basePath%>css/zhaopin.css" rel="stylesheet" />
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=basePath%>js/ajax.js"></script>
<script type="text/javascript" src="<%=basePath%>js/user.js"></script>
<script type="text/javascript">
function _onsubmit(){
var username = document.getElementsByName("user.userName")[0].value;
var pwd = document.getElementsByName("user.password")[0].value;
var lastName = "<s:property value="user.userName"/>";
if(lastName == username){
if(checkLogin(username) && checkPwd(pwd)){
document.forms[0].submit();
}
}else{
if(validate(username) && checkPwd(pwd)){
document.forms[0].submit();
}
}
}
</script>
</head>
<body>
<form action="user_updateExcute.action" method="post">
<div class="qtzc">
<div class="title">
<div class="text">修改</div>
<div class="text1">已有账号?<a href="<%=basePath%>login.jsp">马上登陆</a></div>
<div class="cle"></div>
</div>
<div class="btn">
<table>
<tr>
<td width="60" height="50">用户名</td>
<td class="inp1">
<input name="user.userName" type="text" onBlur="checkLogin(this.value);" value="<s:property value="user.userName"/>"/><span id="userText"></span>
</td>
</tr>
<tr>
<td height="50">密码</td>
<td class="inp1"><input name="user.password" type="password" onBlur="checkPwd(this.value);" value="<s:property value="user.password"/>"/><span id="pwdText"></span>
<input type="hidden" name="user.usersid" value="<s:property value="user.usersid"/>"/>
<input type="hidden" name="user.createtime" value="<s:property value="user.createtime"/>"/>
<input type="hidden" name="user.state" value="<s:property value="user.state"/>"/>
</td>
</tr>
<tr>
<td height="50"></td>
<td><a href="#" οnclick="_onsubmit();"><img src="<%=basePath%>images/zc_bgqt1.jpg" width="109" height="34" /></a></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
后台处理方法:
public void findUser() throws IOException {
HttpServletResponse response =ServletActionContext.getResponse();
user=userService.getUserByUserName(userName);
if(user != null){
//用户名已存在
response.getWriter().print(false);
}else{
response.getWriter().print(true);
}
}