Ajax-HelloWorld(运用AJAX技术实现会员注册登录验证功能)
作者：Justin Lee
开发工具：myeclipse 6.5
运用技术：ajax,hibernate,jsp/servlet ,javascript,and so on;
数据库：mysql 5.0.18
所需工具包：Hibernate3.2,mysqlDriver
项目名：ajax_app
目录结构：
+ajax_app
+src：里面有：
四个文件夹：action/MemberServlet.java(servlet主要业务处理：注册，登录，验证用户名)
biz/MemberBiz.java（主要与数据库主互：插入会员，根据用户名或者用户名与密码进行查询）
util/HiberSessionFactory.java（系统自动生成，还是挺好用的，可自主化）
entity/Member.java(会员实体)
三个文件：hibernate.cfg.xml/log4j.properties/database.sql（Hibernate配置文件，日志配置文件，数据库脚本）
具体如下图所示：（simpleServlet.java是多余的）
+webroot：目录结构如下图所示：
核心文件源代码：
client.js(ajax核心运用文件，它讲述了如何获取XMLHttpRequest对象)
/**
*@author Justin Lee
*/
function getXMLHttpRequest(){
var client = XMLHttpRequestFromIE();
//非IE浏览器
if(client == null){
client = new XMLHttpRequest()
}
return client;
}
function XMLHttpRequestFromIE(){
var namePrefixes = ["Msxml3","Msxml2","Msxml","Microsoft"];
for(var i = 0; i < namePrefixes.length; i++){
try{
var name = namePrefixes[i] + ".XMLHTTP";
return new ActiveXObject(name);
}catch(e){
}
}
return null;
}
Web.xml:核心配置
<web-app version="2.5"
<servlet>
<description>会员SERVLET</description>
<display-name>会员SERVLET</display-name>
<servlet-name>MemberServlet</servlet-name>
<servlet-class>action.MemberServlet</servlet-class>
</servlet>
register-1.jsp(用户注册核心页面代码)
<%@page contentType="text/html;charset=UTF-8" %>
<!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" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/calendar.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/style.css"></link>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/client.js" ></script>
<script type="text/javascript">
var client = getXMLHttpRequest();
function checkUsername(){
//第一步获取数据；
var username = document.getElementById("username").value;
//第二步设置连接地址；
var requestUrl = "${pageContext.request.contextPath}";
requestUrl += "/checkUsername.do?username="+username+"&time="+new Date().getTime();
//第三步打开地址；
client.open("GET",requestUrl,true);
//第四步状态判断；
client.onreadystatechange = function(){
if(client.readyState == 4){
var result = client.responseText;
if(result == 1){
document.getElementById("reg_err_msg").innerHTML = "用户："+username+"已经存在，请更换！";
//alert(username+"已经存在，请更换！");
}else{
document.getElementById("reg_err_msg").innerHTML = "用户："+username+"可以使用！";
}
}else{
//alert("client.readystate != 4");
}
};
//第五步，发送数据；
client.send(null);
}
function cleanMsg(){
document.getElementById("reg_err_msg").innerHTML = "";
}
</script>
<style type="text/css">
form{
margin: 5px 0;
}
fieldset{
padding: 0 1em 1em 1em;
margin: auto;
width: 400px;
display: block;
}
fieldset div{
margin: 5px 0;
}
legend {
padding: 1em;
}
label{
float: left;
width: 100px;
}
#content div input{
width: 200px;
}
fieldset.buttons{
border: solid 1px #ffffff;
text-align: center;
display:block;
margin-top: 20px;
}
</style>
<title>新用户注册第一步</title>
</head>
<body>
<div id="container">
<jsp:include page="/common/header.jsp" />
<div id="content">
<form method="post" action="<%= request.getContextPath()%>/registe.do">
<div id="reg_err_msg" style="align:center"></div>
<fieldset>
<legend>登录信息[必选]</legend>
<div>
<label for="username">用户名</label>
<input type="text" name="username" id="username"
onblur="checkUsername()" onfocus="cleanMsg()"/>
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" id="password" />
</div>
- 上一篇： discuz登陆相关
- 下一篇： JSP小项目，会员管理系统之实现登录功能
