2007-05-11

Ajax+Jsp+Access实现的唯一性校验例子

如标题，Ajax+Jsp+Access实现的唯一性校验例子，这里主要说明的是Ajax的原理，为了使得大家把例子下载下来就能运行，所以使用Access数据库，而且不需要配置数据源头，使用Tomcat发布就可以啦！
主要代码如下：
check.js: 

/**
 * @author fuhao
 */

var http_request = false ;
// 向服务器发起XMLHTTP请求
function send_request(){
	// 获得文本框里面输入的用户名
	var loginname=document.getElementById("userName").value;
	// 要请求的服务器地址
	url="check.jsp?userName="+loginname;
	http_request = false ;
	// 开始初始化XMLHttpRequest对象
	if(window.XMLHttpRequest){ // 说明是Mozila浏览器
		http_request = new XMLHttpRequest();
		if(http_request.ovverideMimeType){ // 设置MiME类别
			http_request.ovverideMimeType('text/xml');
		}
	}
	else if(window.ActiveXObject){ //说明是IE浏览器
		try{
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){}
		}
	}
	if(!http_request){ // 异常，创建对象实例失败
		alert("创建XMLHttpRequest对象失败");
		return false ;
	}
	http_request.onreadystatechange = callback ;
	// 确定发送请求的方式和URL
	http_request.open("GET",url,true);
	http_request.send(null);
}
// 处理返回信息的函数
function callback(){
	if(http_request.readystate == 4){ // 判断对象状态
		if(http_request.status == 200 ){ // 说明信息已经成功的返回
			displays();
		}else{
			alert("从服务器返回的状态是:"+http_request.statusText);	
		}
	}else{
		document.getElementById("div").style.display = "";
	}
}
function displays(){
	var div = document.getElementById("div");
	div.innerHTML = http_request.responseText ;	
	
}
function docheck(){
	var loginname=document.getElementById("userName").value;
	document.getElementById("div").style.display = "none";
	if(loginname==""){ // 判断文本框是否为空
		document.getElementById("div").style.display = "none";
		return false;
	}else{
		document.getElementById("div").style.display = "";
		// 为了观察效果，设置延迟
		setTimeout(send_request,3000);	
	}
}

服务器端代码，check.jsp: 
<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK" import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
</head>
<body>
<%
// 获得客户端传来的用户名
String userName = request.getParameter("userName");
System.out.println("useName:"+userName);
// 获得Access数据库的绝对路径
String realpath = "data/database.mdb";
// 获得Access数据库的相对路径
String dbpath = application.getRealPath(realpath);
// 设置数据库连接的字符串
String url="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ="+dbpath;
// 加载驱动程序
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
// 建立数据库连接
Connection conn=DriverManager.getConnection(url);
// 创建语句对象
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
String sql="";
// 创建查询数据库的SQL语句
sql="select * from user where user_Name='" +userName+ "'";
System.out.println("sql:"+sql);
// 得到数据集
ResultSet rs = stmt.executeQuery(sql);
if(rs.next()){
	out.println("对不起，该用户名已经被注册了");	
}else{
	out.println("恭喜你，该用户名可以注册");	
}
// 关闭数据库连接
rs.close();
stmt.close();
conn.close();
%>
</body>
</html>

客户端代码，index.html: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>测试校验</title>
<LINK media=all href="css/style.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="js/check.js" ></script>
</head>
<body>
<form action="" method="" >
<br /><br /><br /><p align="center"><font color="green" size="4">Ajax+Jsp+Access 唯一性校验例子</font></p>
<table align='center' border='1' bordercolor='#8CB3E3' width="55%" cellpadding='0' cellspacing='0'>
	<tbody id="tbodyid">
		<tr>
			<td nowrap class="data_tab_tdr" width="10%">用户名：</td>  
			<td class="data_tab_tdl" width="15%">
				<input type="text" name="userName" size="25" id="userName" onchange="docheck()" />
			</td>
			<td class="data_tab_tdl" width="15%"><div id="div" style="display:none"><img src="images/ajax-loader.gif"></div></td>
		</tr>
	</tbody>
</table>
</form>
</body>
</html>
  • ajaxCheck.zip (26.3 KB)
  • 描述: 全部代码，使用Tomcat5.0+IE浏览器发布即可
  • 下载次数: 175
评论
fuhao9611
  • 浏览: 26363 次
  • 性别: Icon_minigender_1
  • 来自: 陕西 西安
  • 详细资料
搜索本博客
我的相册
Cf1cbee5-eeca-429d-9d48-20639fef6b17-thumb
result
共 10 张
最近加入圈子
存档
最新评论