數據庫準備
create table user(
id int primary key auto_increment,
username varchar(20),
password varchar(20),
nickname varchar(20),
type varchar(20)
);
insert into user values (null,'aaa','111','小鳳','user');
insert into user values (null,'bbb','111','小森','user');
編寫前端頁面 regist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
<style>
div{
border:1px solid blue;
}
.bodyDiv{
width:90%;
}
.bodyDiv > div{
width:100%;
}
.logoDiv{
width:33%;
height:50px;
float:left;
}
.clear{
clear:both;
}
ul li{
display:inline;
}
a:link{
color:blue;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:green;
font-size: 20px;
}
a:active{
color:red;
font-size:30px;
}
</style>
<script type="text/javascript" src="${ pageContext.request.contextPath }/03_ajax_regist/regist.js"></script>
</head>
<body>
<!--整體DIV-->
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="../img/logo2.png" height="50"/>
</div>
<div class="logoDiv">
<img src="../img/header.png" height="50"/>
</div>
<div class="logoDiv" style="margin-top:0px;padding-top:10px;height:40px;">
<a href="#">登錄</a>
<a href="#" id="reg">註冊</a>
<a href="#">購物車</a>
</div>
<div class="clear"></div>
</div>
<div style="height:50px;background-color: black;color:white;font-size: 20px;">
<ul >
<li>首頁</li>
<li>首頁</li>
<li>首頁</li>
<li>首頁</li>
</ul>
</div>
<div style="height:500px;background-image: url(../img/regist_bg.jpg);">
<div style="border:5px solid gray;background-color:white;position:absolute;left:350px;top:160px;width:600px;">
<form action="" method="post" >
<table border="0" width="100%" cellspacing="15">
<tr>
<td>用戶名</td>
<td><input type="text" id="username" name="username" onblur="checkUsername()"><span id="s1"></span></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" id="password" name="password" ></td>
</tr>
<tr>
<td>確認密碼</td>
<td><input type="password" id="repassword" name="repassword"></td>
</tr>
<tr>
<td>性別</td>
<td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>籍貫</td>
<td>
<select id="province" name="province" >
<option value="">-請選擇-</option>
<option value="0">浙江省</option>
<option value="1">江蘇省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
<option value="4">吉林省</option>
</select>
<select id="city" name="city">
<option>-請選擇-</option>
</select>
</td>
</tr>
<tr>
<td>愛好</td>
<td>
<input type="checkbox" name="hobby" value="籃球" />籃球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="排球" />排球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
</td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input id="regBut" type="submit" value="註冊"></td>
</tr>
</table>
</form>
</div>
</div>
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<div>
<center>
關於我們 聯繫我們 招賢納士 法律聲明 友情鏈接 支付方式 配送方式 服務聲明 廣告聲明 <br/>
Copyright © 2015-2018 博客商城 版權所有
</center>
</div>
</div>
</body>
</html>
編寫 regist.js
function checkUsername(){
// 獲得文本框的值:
var username = document.getElementById("username").value;
// 創建異步對象:
var xhr = createXMLHttp();
// 設置監聽:
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
if(data == 1){
document.getElementById("s1").innerHTML = "<font color='green'>用戶名可以使用</font>";
document.getElementById("regBut").disabled = false;
}else if(data == 2){
document.getElementById("s1").innerHTML = "<font color='red'>用戶名已經被佔用</font>";
document.getElementById("regBut").disabled = true;
}
}
}
}
// 打開連接:
xhr.open("GET","/ServletDemo2?username="+username,true);
// 發送請求:
xhr.send(null);
}
function createXMLHttp() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
編寫實體類user
package test.domain;
public class User {
private int id;
private String username;
private String password;
private String nickname;
private String type;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
}
簡單三層調用
編寫servlet
package test.servlet;
import test.domain.User;
import test.service.UserService;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 異步校驗用戶名的Servlet:
*/
public class ServletDemo2 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try{
// 接收參數:
String username = request.getParameter("username");
// 調用業務層:
UserService userService = new UserService();
User user = userService.findByUsername(username);
// 判斷:
if(user == null){
// 用戶名可以使用.
response.getWriter().println(1);
}else{
// 用戶名已經被佔用
response.getWriter().println(2);
}
}catch(Exception e){
e.printStackTrace();
throw new RuntimeException();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
編寫service
package test.service;
import test.dao.UserDao;
import test.domain.User;
import java.sql.SQLException;
public class UserService {
public User findByUsername(String username) throws SQLException {
UserDao userDao = new UserDao();
return userDao.findByUsername(username);
}
}
編寫dao
package test.dao;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import test.domain.User;
import test.utils.JDBCUtils;
public class UserDao {
public User findByUsername(String username) throws SQLException {
QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
User user = queryRunner.query("select * from user2 where username = ?", new BeanHandler<User>(User.class), username);
return user;
}
}
c3p0-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
<default-config>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql:///ajax</property>
<property name="user">root</property>
<property name="password">root</property>
<property name="initialPoolSize">5</property>
<property name="maxPoolSize">20</property>
</default-config>
</c3p0-config>
JDBCUtils
package test.utils;
import java.sql.Connection;
import java.sql.SQLException;
import javax.sql.DataSource;
import com.mchange.v2.c3p0.ComboPooledDataSource;
/**
* JDBC的工具類：
* @author admin
*/
public class JDBCUtils {
private static final ComboPooledDataSource DATA_SOURCE =new ComboPooledDataSource();
/**
* 獲得連接的方法
*/
public static Connection getConnection(){
Connection conn = null;
try {
conn = DATA_SOURCE.getConnection();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
public static DataSource getDataSource(){
return DATA_SOURCE;
}
}
web.xml
創建servlet時候會自動生成路徑
<servlet>
<description></description>
<display-name>ServletDemo2</display-name>
<servlet-name>ServletDemo2</servlet-name>
<servlet-class>test.servlet.ServletDemo2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServletDemo2</servlet-name>
<url-pattern>/ServletDemo2</url-pattern>
</servlet-mapping>
發佈測試：好使
光標離開
注意：如果在eclipse中沒有配置訪問路徑，需要在xhr.open打開鏈接時加工程名，否則會報404錯誤（我用idea，在發佈tomcat時候配置了路徑）