Question

在JSP页面下使用AJAX实现用户名存在的检测

请把我写如题代码注:我用的是MYSQL数据库，当我输入用户名时，input失去焦点时会自动检测用户名是否存在，存在显示用户名已占用，不存在显示用户名可用，并显示在页面上。请注释详细点没怎么仔细学过AJAX，懂JS。

Answer 1

<script type="text/javascript">
	function init(){
		document.getElementById("username").focus();
	}
	function validate(userfield) {
		if (trim(userfield.value).length != 0) {
			var xmlHttpRequest = null;
			var url = "../AccountIsExistServlet?account=" + userfield.value;
			var usermsg = document.getElementById("usermsg");
			if (window.XMLHttpRequest) {//表示当前浏览器不是IE
				xmlHttpRequest = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlHttpRequest.open("GET", url, true);//设置请求方式为GET，设置请求的URL，设置为异步提交
			xmlHttpRequest.onreadystatechange = function(){//将方法地址复制给onreadystatechange属性
				if(xmlHttpRequest.readyState == 4){//Ajax引擎状态为成功
					if(xmlHttpRequest.status == 200){//HTTP协议状态为成功
						if(trim(xmlHttpRequest.responseText) != ""){
							usermsg.innerHTML = "<font color='red'>" + trim(xmlHttpRequest.responseText) + "</font>";
							userfield.focus();
						}else{
							usermsg.innerHTML = "恭喜您，用户名可以使用。 ";
						}
					}else{
						alert("请求失败，错误码=" + xmlHttp.status);
					}
				}
			};
			xmlHttpRequest.send(null);//将设置信息发送到Ajax引擎
		}else{
			usermsg.innerHTML = "";
		}
	}

<tr height="30px;">
    <td><font color="#FF0000">*</font>用户名：</td>
    <td><input type="text" name="account" id="username" maxlength="12" onblur="validate(this)"/></td>
    <td width="220px;"><span id="usermsg"></span></td>
</tr>

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;

import com.gas.bo.UserInfoBO;

@WebServlet("/AccountIsExistServlet")
public class AccountIsExistServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// 阻止缓存
		response.setContentType("text/xml");
		response.setHeader("Cache-Control", "no-store"); // HTTP1.1
		response.setHeader("Pragma", "no-cache"); // HTTP1.0
		response.setDateHeader("Expires", 0); // prevents catching at proxy
												// server

		PrintWriter out = response.getWriter();
		
		//js传过来的汉字进行转码，避免汉字的时候会出现乱码
		String account = request.getParameter("account");
		UserInfoBO userInfoBO = new UserInfoBO();
		boolean b = userInfoBO.accountIsExist(account);
		if (b) {
			out.print("用户名已存在，请重新输入。");
		}
	}

}

第一部分js，ajax。第二部分html。第三部分servlet。。。有不理解的地方继续问我。

追问

求QQ号或者是EMAIL我修改了份代码但是运行不了~~~求解

追答

52_25_30_685

Answer 2

使用jquery
用它里面的validate.js插件。
$().ready(function(){
$(form).validate({

rulus:{

},

messages:{

},
.....

});

});

楼主自己百度下吧，这里就不细说了

Answer 3

$(document).ready(function(){
//用户名失去焦点
$('#name').blur(function(){
goinName();
}
)
}

);
//验证用户名
function goinName(){
$('#name').css('border','1px solid green');
$('#nameError').html("");
}
function outName(){
var name=$('#name').val(); //获得用户名
var tager=/^[a-z,A-z][a-z,A-Z,0-9]{1,23}$/; //处理乱码
if(!tager.test(name)){
$('#name').css('border','1px solid red');
$('#nameError').html("用户名不合法");
$('#nameError').css('color','red');
i=1;

}

else{
$.ajax({
type: "POST",
url: "checkNameuser.action",
data: "user.vuUserName='"+name,
success: function(date){
date=date.replace(/^\s+|\s+$/g,"");
if(date=="true"){
$('#nameError').html("用户名可用");
i=0;
}
else{
$('#nameError').html("用户名已被占用");
$('#nameError').css('color','red');
i=1;
}
}
});
}
}