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定義了此請求爲異步
		request.send(null);
		//第三條線打通(服務器返回的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";
				}
			}
		}
 }
</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的解釋運行原理有關。