Ajax+js 和 Ajax+Jquery实现异步校验

web.html

<script type="text/javascript" src="${ pageContext.request.contextPath }/03_ajax_regist/regist.js"></script>
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" οnblur="checkUsername()"><span id="s1"></span></td>
</tr>
<tr>
<td colspan="2"><input id="regBut" type="submit" value="注册"></td>
</tr>

Servlet.java

		try{
			// 接收参数:
			String username = request.getParameter("username");
			// 调用业务层:
			UserService userService = new UserService();
			User user = userService.findByUsername(username);
			// 判断:
			response.setContentType("text/html;charset=UTF-8");
			if(user == null){
				// 用户名可以使用.
				response.getWriter().println(1);
				//response.getWriter().println("<font color='green'>用户名可以使用</font>");
			}else{
				// 用户名已经被占用
				response.getWriter().println(2);
				//response.getWriter().println("<font color='red'>用户名已经被占用</font>");
			}
		}catch(Exception e){
			e.printStackTrace();
			throw new RuntimeException();
		}

Ajax+js实现异步校验(了解)

    * regist.js

function checkUsername() {
	// 获得文本框的值:
	var username = document.getElementById("username").value;
	// 创建异步对象:
	var xhr = createXMLHttp();
	// 设置监听:
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				var data = xhr.responseText;
				//
				if (data == 1) {
					document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
					document.getElementById("regBut").disabled = false;
				} else if (data == 2) {
					document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被占用</font>";
					document.getElementById("regBut").disabled = true;
				}
			}
		}
	}
	// 打开连接:
	xhr.open("GET", "/day15/ServletDemo2?username=" + username, true);
	// 发送请求:
	xhr.send(null);
}

function createXMLHttp() {
	var xmlHttp;
	try { // Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		try {// Internet Explorer
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
			}
		}
	}

	return xmlHttp;
}

 Ajax+Jquery实现异步校验(必须会)

    * regist.js

$(function(){
	$("#username").blur(function(){
		// 获得文本框的值:
		var username = $(this).val();
		// 演示load方法:
		// $("#s1").load("/day15/ServletDemo3",{"username":username});
		// 演示get/post方法:
		$.get("/day15/ServletDemo3",{"username":username},function(data){
			if(data == 1){
				$("#s1").html("<font color='green'>用户名可以使用</font>");
				$("#regBut").attr("disabled",false);
			}else if(data == 2){
				$("#s1").html("<font color='red'>用户名已经存在</font>");
				$("#regBut").attr("disabled",true);
			}
		});
	});
});

使用load方式,在Servelt中可以直接返回输出的值.

// $("#s1").load("/day15/ServletDemo3",{"username":username});

//response.getWriter().println("<font color='green'>用户名可以使用</font>");