JavaScript和JQuery分别实现Ajax

index010_js & index010_jquery的body代码中都写入：

<form action="validate" method="post">
	<table align="center" width="500px" frame="box" rules="rows">
		<tr><td>用户名</td><td><input type="text" size="20" name="username"><font id="mess" color="red"></font></td></tr>
		<tr><td>邮箱号：</td><td><input type="text" size="20" name="email"></td></tr>
		<tr><td colspan="2"><input type="submit" value="登录"></td></tr>
	</table>
	</form>

controller包下公用的servlet文件ValidateServlet.java

package Controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ValidateServlet
 */
@WebServlet("/validate")
public class ValidateServlet extends HttpServlet {
	
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String username=request.getParameter("username");
		if(username.equals("admin")) {
			response.getWriter().print("0");//失败
		}else {
			response.getWriter().print("1");//成功
		}
	}

}

index010_js.jsp

<script>
	var xhr;
	function checkUsers(t){
		var username=t.value;
		//1.获取XMLHttpRequest
		xhr=getRequest();
		//2.设置请求方式
		xhr.open("post","validate");
		//3.指定回调函数
		xhr.onreadystatechange=doResult;
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//发送请求
		xhr.send("username="+username);
	}
	
	//回调函数
	function doResult(){
		if(xhr.status==200){
			var res=xhr.responseText;//获取响应结果
			var mess=document.getElementById("mess");//获取相应结果后，找到id为mess放值
			if(res=='1'){
				mess.innerHTML="用户名可以使用！";
			}else{
				mess.innerHTML="用户名已存在！";
			}
		}
	}

	function getRequest() {
		if (window.XMLHttpRequest) {
			//在IE7及非IE浏览器中
			xmlhttp = new XMLHttpRequest();
		} else {
			try {
				//在较新的IE版本中
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					//这是在IE7以前的版本中
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					alert("对不起，您的浏览器不支持xmlHttpRequest对象");
				}
			}
		}
		return xmlhttp;
	}
</script>

index010_jquery.jsp写入：

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
	$("[name=username]").blur(function(){
		$.ajax({
			url:"validate",
			data:{"username":$(this).val()},
			type:"post",
			dataType:"text",
			success:function(result){
				if(result=="1"){
					$("#mess").html("用户名可用");
				}else{
					$("#mess").html("用户名不可用");
				}
			},
			error:function(result){
				alert(result);
			}
		});
	});
</script>