ajax经典案例之无刷新验证用户名源码以及分析

其中js代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<form method="post" action="user.do">
	用户名：<input type="text" onkeyup="check()" id="username" name="username"><span id="span"></span><br>
	密码：<input type="password">
</form>

<script>
	function check(){
		var request = new XMLHttpRequest();//第一条线打通（创建ajax对象）
		var username = document.getElementById("username").value;//创建一个名叫username的变量使其值等于用户输入的用户名
		//第二条线打通（打开此ajax引擎，并向服务器发送http请求）
		request.open("get", "user.do?username="+username, true);//指明向哪里发出http请求以及请求的方式。此处true定义了此请求为异步。如果不加true，默认的也是true
		request.send(null);
		//第三条线打通(服务器返回的http响应)
		request.onreadystatechange = function (){
			if(request.readyState == 4 && request.status == 200){//条件成立则说明得到服务器相应成功.其中request.readyState == 4表示请求发送成功，request.status == 200 表示请求得到了回应.4 和 200这两个数字都是响应码
				var text = request.responseText;
				if(text == "true"){
					document.getElementById("span").innerHTML= "yes";
					document.getElementById("span").style.color="green";
				}else{
					document.getElementById("span").innerHTML= "no";
					document.getElementById("span").style.color="red";
				}
			}
		}
 }
</script>

serlvet代码如下：

package ajax12demo;

import java.io.IOException;

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

public class UserServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String userName = request.getParameter("username");
		if(userName.equals("ZwZ")){
			response.getWriter().print(false);
		}else{
			response.getWriter().print(true);
		}
		System.out.println(userName);
	}
}

 

以上代码可以实现对用户名验证的效果。

 

当请求为同步，即request.open( )中async参数值为false时，其中js代码的顺序应如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<form method="post" action="user.do">
	用户名：<input type="text" onkeyup="check()" id="username" name="username"><span id="span"></span><br>
	密码：<input type="password">
</form>

<script>
	function check(){
		var request = new XMLHttpRequest();//第一条线打通（创建ajax对象）
		var username = document.getElementById("username").value;
		
		//第三条线打通(服务器返回的http响应)
		request.onreadystatechange = function (){
			if(request.readyState == 4 && request.status == 200){//条件成立则说明得到服务器相应成功
				var text = request.responseText;
				if(text == "true"){
					document.getElementById("span").innerHTML= "yes";
					document.getElementById("span").style.color="green";
				}else{
					document.getElementById("span").innerHTML= "no";
					document.getElementById("span").style.color="red";
				}
			}
		}
		//第二条线打通（向服务器发送http请求）
		request.open("get", "user.do?username="+username, false);
		request.send(null);
	}
</script>

原因：与ajax同步与异步机制和js的解释运行原理有关。