功能: 检测userName是否可用.userName为admin则不可用,反之可用.实际则可根据自己的需求到数据库验证.
login.jsp 代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>无刷新验证用户名是否可用</title>
<script type="text/javascript" src="js/checkUsernamePost/login.js" charset="utf-8"></script>
</head>
<body>
<h2>无刷新验证用户名是否可用</h2>
<input type="text" id="userName" />
<span id="tip" style="display:none;color:red"></span>
<br />
<input type="button" value="ajax验证" οnclick="checkUserName();"/>
</body>
</html>
login.js 代码:
var $ = function(id) { return document.getElementById(id); } // 得到 XMLHttpRequest 对象 var getXMLHttpRequest = function() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e2) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e3) { window.alert("Sorry,your browser does not support Ajax!"); } } } return xmlHttp; } var xmlHttp = ""; // 检测 username var checkUserName = function() { // 得到 XMLHttpRequest xmlHttp = getXMLHttpRequest(); if (xmlHttp) { // open xmlHttp.open("post", document.URL + "checkUsername", true); // window.alert(document.URL + "checkUsername"); // 设置 Content-type xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 设置回调函数 xmlHttp.onreadystatechange = statechange; // send var sendData = "userName=" + $("userName").value; xmlHttp.send(sendData); } } // ajax回调函数 var statechange = function() { // 0: 请求未初始化 // 1: 服务器连接已建立 // 2: 请求已接收 // 3: 请求处理中 // 4: 请求已完成,且响应已就绪 if (xmlHttp.readyState == "4") { // 200: "OK" // 404: 未找到页面 if (xmlHttp.status == "200") { var isOK = xmlHttp.responseText; if ("t" == isOK) { $("tip").innerHTML = "恭喜,用户名可用!"; } else if ("f" == isOK) { $("tip").innerHTML = "对不起,用户名不可用!"; $("userName").value = ""; } $("tip").style.display="inline-block"; } } }
CheckUsername.java 代码:
package com.checkUsernamePost;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckUsername extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset-utf-8");
String userName = req.getParameter("userName");
// System.out.println(userName);
PrintWriter out = resp.getWriter();
// 简单验证,不从数据库中取数据.userName为admin则不可用
if ("admin".equals(userName)) {
out.print("f");
} else {
out.print("t");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doGet(req, resp);
}
}
web.xml 配置文件:
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" 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_2_5.xsd"> <servlet> <servlet-name>checkUsername</servlet-name> <servlet-class>com.checkUsernamePost.CheckUsername</servlet-class> </servlet> <servlet-mapping> <servlet-name>checkUsername</servlet-name> <url-pattern>/checkUsername</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
文件结构:
运行结果: