<script type=text/javascript> new Draggable("related_topics"); </script> 如标题,Ajax+
Jsp+Access实现的唯一性校验例子,这里主要说明的是Ajax的原理,为了使得大家把例子下载下来就能运行,所以使用Access数据库,而且不需要配置数据源头,使用Tomcat发布就可以啦!
主要代码如下:
check.js:
主要代码如下:
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" ο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>
ajaxCheck.zip (26.3 KB)