index.html
<!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>Ajax检测用户名</title> <script type="text/javascript" src="ajax.js"></script> </head> <body> <form name="myform"> 用户名：<input type="text" name="username" onblur="checkname();"> <span id="checkbox"></span> <!-- 这里用于在执行后显示结果的地方 --> </form> </body> </html>
ajax.js
// JavaScript Document
var XHR; // 定义一个全局对象
function createXHR() { // 首先我们得创建一个XMLHttpRequest对象
if (window.ActiveXObject) {// IE的低版本系类
XHR = new ActiveXObject('Microsoft.XMLHTTP');// 之前IE垄断了整个浏览器市场，没遵循W3C标准，所以就有了这句代码。。。但IE6之后开始有所改观
} else if (window.XMLHttpRequest) {// 非IE系列的浏览器，但包括IE7 IE8
XHR = new XMLHttpRequest();
}
}
function checkname() {
var username = document.myform.username.value;
createXHR();
XHR.open("GET", "checkUser.jsp?username=" + username, true);// true:表示异步传输，而不等send()方法返回结果，这正是ajax的核心思想
XHR.onreadystatechange = zhangshuang;// 当状态改变时，调用byhongfei这个方法，方法的内容我们另外定义
XHR.send(null);
}
function zhangshuang() {
if ((XHR.readyState == 4) || (XHR.status == 200)) {
{
var textHTML = XHR.responseText;
document.getElementById('checkbox').innerHTML = textHTML;
}
}
}
DB_Conn.java
package com.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DB_Conn {
Connection conn;
Statement st;
public DB_Conn() {
conn_init();
}
void conn_init() {
setConnection();
setStatement();
}
public void setConnection() {
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
conn = DriverManager.getConnection(
"jdbc:oracle:thin:@localhost:1521:orcl", "scott", "tiger");
} catch (Exception e) {
e.printStackTrace();
}
}
public void setStatement() {
try {
st = conn.createStatement();
} catch (SQLException e) {
e.printStackTrace();
}
}
public boolean checkUser(String username) {
String sql="select * from users where username='"+username+"'";
ResultSet rs;
try {
rs = st.executeQuery(sql);
if(rs.next())
{
conn.close();
return true;
}
} catch (SQLException e) {
e.printStackTrace();
}
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
return false;
}
}
checkUser.jsp
<%@ page contentType="text/html;charset=utf-8"%>
<%@ page import="com.db.DB_Conn"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>checkUser</title>
</head>
<body>
<%
String username = request.getParameter("username");
DB_Conn db=new DB_Conn();
if ("".equals(username)) {
out.println("<font color=red>用户名不能为空！ </font>");
} else if (username.length() < 4 || username.length() > 20) {
out.println("<font color=red>用户名" + username
+ "不合法！(长度为4到20位，且不能使用?#=等特殊字符) </font>");
} else if (db.checkUser(username)) {
out.println("<font color=red>用户名" + username + "已经存在！</font>");
} else {
out.println("<font color=green>用户名" + username
+ "尚未存在，可以使用！</font>");
}
%>
</body>
</html>