<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax验证用户名是否存在</title>
<!-- ${pageContext.request.contextPath}采用绝对路径导入资源 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/common/js/jquery-1.4.4.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/common/css/main.css" type="text/css"></link>
</head>
<script type="text/javascript">
$(function(){
$(':input[name="userName"]').bind('propertychange',function(){
//获取userName值
var userName = $(this).val();
//去除userName值的前后空格
userName = $.trim(userName);
if (userName != '') {
var url = '${pageContext.request.contextPath}/isExistUserName';
//添加时间戳去除ajax缓存
var args = {'userName': userName,'time': new Date()};
//发送ajax请求
$.post(url,args,function(data){
//回调函数获取服务器返回的信息
$('#message').html(data);
});
}
});
});
</script>
<body>
<center>
<form action="" method="post">
帐号：<input type="text" name="userName" /><span id="message" ></span>
<br/><br/>
<input type="submit" value="提交"/>
</form>
</center>
</body>
</html>
备注：这里给userName文本框绑定的是onpropertychange事件，解释一下该事件与onchange的不同之处。onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点后才触发，用js改变其值不触发。
服务器后台处理ajax请求代码：
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//获取userName
String userName = new String(request.getParameter("userName").getBytes("ISO-8859-1"),"UTF-8");
//自定义一个List集合，用来存储已存在的用户名
List<String> userNames = Arrays.asList("张三","zhangsan","李四","rose");
String result = null;
//判断userName是否存在
if (userNames.contains(userName)) {
result = "<font color='red'>此用户已存在</font>";
} else {
result = "<font color='green'>此用户可用</font>";
}
//返回信息
response.getWriter().print(result);
out.flush();
out.close();
}
