浏览 4761 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-05-11
如标题，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> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
