Ajax+Jsp+Access实现的唯一性校验例子-优快云博客

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

Java代码

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

服务器端代码，check.jsp:

Java代码

<%@pagelanguage="java"contentType="text/html;charset=GBK"
pageEncoding="GBK"import="java.sql.*"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=GBK">
<title>Inserttitlehere</title>
</head>
<body>
<%
//获得客户端传来的用户名
StringuserName=request.getParameter("userName");
System.out.println("useName:"+userName);
//获得Access数据库的绝对路径
Stringrealpath="data/database.mdb";
//获得Access数据库的相对路径
Stringdbpath=application.getRealPath(realpath);
//设置数据库连接的字符串
Stringurl="jdbc:odbc:driver={MicrosoftAccessDriver(*.mdb)};DBQ="+dbpath;
//加载驱动程序
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
//建立数据库连接
Connectionconn=DriverManager.getConnection(url);
//创建语句对象
Statementstmt=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
Stringsql="";
//创建查询数据库的SQL语句
sql="select*fromuserwhereuser_Name='"+userName+"'";
System.out.println("sql:"+sql);
//得到数据集
ResultSetrs=stmt.executeQuery(sql);
if(rs.next()){
out.println("对不起，该用户名已经被注册了");
}else{
out.println("恭喜你，该用户名可以注册");
}
//关闭数据库连接
rs.close();
stmt.close();
conn.close();
%>
</body>
</html>

 
  
  
 
  客户端代码，index.html: 
  
 
  
  
   
   
     Java代码 
     
    
   
  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
 <metahttp-equiv="Content-Type"content="text/html;charset=GBK">  
<title>测试校验</title> 
 <LINKmedia=allhref="css/style.css"type=text/cssrel=stylesheet>  
 <scripttype="text/javascript"src="js/check.js"></script>  
</head> 
<body> 
 <formaction=""method="">  
 <br/><br/><br/><palign="center"><fontcolor="green"size="4">Ajax+Jsp+Access唯一性校验例子</font></p>  
 <tablealign='center'border='1'bordercolor='#8CB3E3'width="55%"cellpadding='0'cellspacing='0'>  
 <tbodyid="tbodyid">  
<tr> 
 <tdnowrapclass="data_tab_tdr"width="10%">用户名：</td>  
 <tdclass="data_tab_tdl"width="15%">  
 <inputtype="text"name="userName"size="25"id="userName"οnchange="docheck()"/>  
</td> 
 <tdclass="data_tab_tdl"width="15%"><divid="div"style="display:none"><imgsrc="images/ajax-loader.gif"></div></td>  
</tr> 
</tbody> 
</table> 
</form> 
</body> 
</html>