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

最新推荐文章于 2023-05-22 16:22:50 发布

fuhao9611

最新推荐文章于 2023-05-22 16:22:50 发布

阅读量111

点赞数

分类专栏： Ajax 文章标签： Access JSP Ajax SQL 浏览器

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

[code]
/**
* @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);
}
}
[/code]
[b]服务器端代码，check.jsp:[/b]
[code]
<%@ 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>
[/code]
[b]客户端代码，index.html:[/b]
[code]
<!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" οnchange="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>
[/code]