Ajax异步验证用户名是否已经存在

当我们注册一个新的用户的时候，都需要验证下注册的用户是否已经存在，经常发现网站上都是这样实现友好提示的，如下图：

那具体怎么实现这样异步验证用户名是否已经存在的呢？

这里用到了Ajax的异步操作，也就相当于，Ajax发送了一个需要验证用户名是否存在的请求，然后在设置请求所返回的时间，完成用户名是否存在的请求。

下面看下具体的代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">    //定义一个请求
	var xmlHttp;
	 
	function createXMLHttpRequest() {
		//表示当前浏览器不是ie,如ns,firefox
		if(window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	
	
	//field为获取用户所填写的用户名
	function validate(field) {
        //判断用户名是否为空
		if (trim(field.value).length != 0) {
			//创建Ajax核心对象XMLHttpRequest
			createXMLHttpRequest();
			//将获取用户名发送到另一个jsp中去验证
			var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
			
			//设置请求方式为GET，设置请求的URL，设置为异步提交，true为异步，false为同步
			xmlHttp.open("GET",url,true);	
			//将方法地址复制给onreadystatechange属性
			//类似于电话号码
			xmlHttp.onreadystatechange=callback;
			
			//将设置信息发送到Ajax引擎
			xmlHttp.send(null);
		} else {
			document.getElementById("spanUserId").innerHTML = "";
		}	
	}
	
	//发送请求之后，返回的状体
	function callback() {
		//alert(xmlHttp.readyState);
		//Ajax引擎状态为成功
		if (xmlHttp.readyState == 4) {
			//HTTP协议状态为成功
			if (xmlHttp.status == 200) {
				if (trim(xmlHttp.responseText) != "") {
					//设置请返回的消息信息
					document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
				}else {
					document.getElementById("spanUserId").innerHTML = "";
				}
			}else {
				alert("请求失败，错误码=" + xmlHttp.status);
			}
		}
	}</span>

将获取的用户名去验证：这里为user_validate.jsp页面，具体的后台代码就不作展示了！

<span style="font-family:KaiTi_GB2312;font-size:18px;"><%
	//Thread.currentThread().sleep(5000);
	String userId = request.getParameter("userId");
	if (UserManager.getInstance().findUserById(userId) != null) {
		out.println("用户代码已经存在");
	}	
%></span>

用户名HTML代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><td width="78%">
	<input name="userId" type="text" class="text1" id="userId"
	    size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="validate(this)">
	<span id="spanUserId"></span>
</td></span>

整体的一个异步验证用户名是否存在的例子就完成了，这样提高了用户体验度，美化了界面！

原文地址：https://www.jb51.cc/ajax/162541.html