Ajax,Java无刷新简单验证用户名[详细代码]

l万lin

浏览: 28816 次
性别:
来自: 江西

最近访客更多访客>>

Black_Me

ysl_228

zhangxn

ohMyG

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax
javascript

ajax java 无刷新验证 javascript

功能: 检测userName是否可用.userName为admin则不可用,反之可用.实际则可根据自己的需求到数据库验证.

<%@ 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验证" onclick="checkUserName();"/>
  </body>
</html>

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>

文件结构: