在很多注册的页面上,我们可能会遇到以下情况,当我们注册用户名的时候可能会提示该用户名已注册,其实现是应用AJAX技术。
首先写一个登陆页面
<html> <head></head> <body> <%@ page contentType="text/html" pageEncoding="gbk"%> <title></title> <script type="text/JavaScript"> var xmlHttp; var flag; function createXMLHttp() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } function checkUserid(userid) { createXMLHttp(); xmlHttp.open("POST", "CheckServlet?userid=" + userid); xmlHttp.onreadystatechange = checkUseridCallback; xmlHttp.send(); document.getElementById("msg").innerHTML = "正在验证。。。"; } function checkUseridCallback() { if (xmlHttp.readyState == 400) { if (xmlHttp.status == 200) { var text = xmlHttp.responseText; if (text == "true") { flag = false; document.getElementById("msg").innerHTML = "用户ID重复,无法使用"; } else { flag = true; document.getElementById("msg").innerHTML = "此用户ID可以注册"; } } } } function checkForm() { return flag; } </script> <form action="tt.jsp" method="post" onsubmit="return checkForm()"> 用户ID <input type="text" name="userid" onblur="checkUserid(this.value)" /> <span id="msg"></span> <br /> 姓名: <input type="text" name="name" /> <br /> 密码: <input type="password" name="password" /> <br /> <input type="button" value="注册" /> <input type="reset" value="重置" /> </form> </body> </html>
随后写一个servlet的Java代码
import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class CheckServlet extends HttpServlet { public static final String DBDRIVER = "Oracle.jdbc.OracleDriver"; public static final String DBURL = "jdbc:oracle:thin:@59.173.240.149:1521:heer"; public static final String DBUSER = "hnsyu_dev"; public static final String DBPASS = "hnsyuok"; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("gbk"); response.setContentType("text/html"); Connection connection = null; PreparedStatement preparedStatement = null; ResultSet resultSet = null; PrintWriter out = response.getWriter(); String userid = request.getParameter("userid"); try { Class.forName(DBDRIVER); connection = DriverManager.getConnection(DBURL, DBUSER, DBPASS); String sql = "select count(userid) from userdemo where userid=?"; preparedStatement = connection.prepareStatement(sql); preparedStatement.setString(1, userid); resultSet = preparedStatement.executeQuery(); if (resultSet.next()) { if (resultSet.getInt(1) > 0) { out.print("false"); System.out.println("true"); } else { out.print("false"); } } out.close(); } catch(Exception e) { e.printStackTrace(); } finally { try { connection.close(); } catch(Exception e) { e.printStackTrace(); } } } }
其中还需要在web.xml中进行配置
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name></display-name> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>CheckServlet</servlet-name> <servlet-class>CheckServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CheckServlet</servlet-name> <url-pattern>/CheckServlet</url-pattern> </servlet-mapping> </web-app>