题目

在文本框里输入用户名,焦点退出文本框后,校验服务器,
如果用户名存在,显示提示用户名存在信息,如果不存在显示用户名不存在信息

实现

用户名不存在

用户名已存在

代码

jsp前台页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Example</title>
</head>

<body>

	<form action="">
		用户名:<input name="username" type="text" id="username"><span id="msg"></span>
	</form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/MyAjax.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var nameElement=document.getElementById("username");
		//指定onblur事件
		nameElement.onblur=function(){
			//获取当前用户输入值
			var name = this.value;
			//创建XMLHttpRequest对象
			var xhr=getXMLHttpRequest();
			//编写回调函数处理计算结果,onreadystatechange就是告诉ajax引擎这个是回调函数
			//在server端计算完毕后,将结果发送给ajax引擎,此时,ajax引擎才会调用函数
			xhr.onreadystatechange = function(){
				if(xhr.readyState=4){//请求正常
					if(xhr.status=200){//服务器响应正常
						//拿到id为msg的值并赋给msg
						var msg=document.getElementById("msg");
						if(xhr.responseText == "true"){//responseText可以获取servlet返回的数据
							//msg的内容为用户名已存在
							msg.innerHTML="<font color='red'>用户名已存在</font>";
						}else{
							msg.innerHTML="<font color='green'>用户名可以使用</font>";
						}
					}
				}
			}
			//创建连接
			xhr.open("get","${pageContext.request.contextPath }/regist?name=" + name);
			//发送请求
			xhr.send(null);
		}
	}
</script>

</html>

MyAjax.js脚本文件

//获取XMLHttpRequest对象
function getXMLHttpRequest(){
	var xmlHttp;
	//IE7+,FireFox,Chrome,Opera,Safari
	if(window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}else{//ie6,ie5
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	return xmlHttp;
}

servlet判断用户名是否重复

package ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 判断用户名是否重复
 */
@WebServlet("/regist")
public class regist extends HttpServlet {
	private static final long serialVersionUID = 1L;
	//正常情况下需要 数据库进行判断是否重复,简化演示,直接程序中判断
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	PrintWriter out = response.getWriter();
	String name=request.getParameter("name");
	String name1="davisdai";
			if(name1.equals(name)) {
				out.print(true);
			}else {
				out.print(false);
			}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}