JSP+Servlet+Ajax兑现后台异步检验用户信息实例
日期：2014-05-16 浏览次数：20364 次
下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验（校验方式多种，包括提取数据库信息，校验用户名是否重复等），异步在JSP表单页面显示校验结果信息的基本过程。
一、说明：
?????? 1.由于本文只限于介绍JSP+Servlet+Ajax运用的基本流程，重点不在于后台数据库的访问和校验内容，因此省略Servlet对数据库的访问。
二、基本流程：
????? 1. JSP页面login.jsp提供一个表单“form”，表单中有两个“text”类型的输入框，其中我们将用第一个输入框来做实验。
??????? 在第一个输入框中（输入用户名），通过onblur=validate();，当用户光标离开输入框时，触发JS函数validate() ，函数validate()在Ajax.js文件中声明。
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="javascript" src="Ajax.js"></script>
</head>
<body>
<h1>Test Ajax</h1><p>
<form action="" method="get" name="form">
<br>
输入用户名：
<input type="text" size="10" maxlength="8" id="userName" name="name" onblur="validate()">
<span id="info"></span>
<br>
输入商品名：
<input type="text" size="10" maxlength="8" >
</form>
</body>
</html>
?
??????
2、Ajax.js文件声明了一系列函数，用于完成向表单与servlet的中接处理。
2.1、函数validate()要点：
??????? 2.1.1、通过document.getElementById(String id)获取表单中有特定id值的输入框的值，即获取用户输入的用户名。?
??????? 2.1.2、声明一个变量url，存放要访问的servlet:"validate.do?id=" + escape(idField.value)，问号？后面表示在url后添加一个值，这个值在validate.do这个servlet中可以通过request.getParameter("id")来获取。
var url = "validate.do?id=" + escape(idField.value);
??
?????? 2.1.3、 通过if()语句以兼容IE，Firefox等多个浏览器版本的方式创建一个XMLHttpRequest对象。
if(window.XMLHttpRequest) {
//IE7, Firefox, Opera支持
req = new XMLHttpRequest();
}else if(window.ActiveXObject) {
//IE5,IE6支持
req = new ActiveXObject("Microsoft.XMLHTTP");
}
?
?????? 2.1.4、调用XMLHttpRequest对象函数open()准备向servlet发送请求（此时只是“准备发送”，并没有发送）
req.open("GET", url, true);
??
?????? 2.1.5、 调用XMLHttpRequest对象函数send(param)向servlet发送请求。param参数的值null（关于send()方法使用请另外查阅）
req.send(null);
?
?????? 2.1.6、调用一个触发事件onreadystatechange，每当 readyState 改变时，onreadystatechange 函数就会被执行。readyState有5个可能值：0：请求未初始化（在调用open()之前）；1：请求已经提出（调用send()之前）；2：请求已经发送（这里通常可以从响应得到内容头部）；3：请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）；4：请求已经完成（可以访问服务器响应并使用它）
req.onreadystatechange = callback;
?
2.2、function callback()要点：
????? 2.2.1??? XMLHttpRequest.status = 200表示服务器已经成功响应。
????????????????? 通过XMLHttpRequest.responseText获取servlet端的getPrintWriter().write()输出的响应。得到的值是 一个String类型数据。
var check = req.responseText;
?
2.3、通过show()函数输出结果到标签标记的位置。
?
完整的Ajax.js文件：
var req;
function validate() {
//获取表单提交的内容
var idField = document.getElementById("userName");
//访问validate.do这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给validate.do
var url = "validate.do?id=" + escape(idField.value);
//创建一个XMLHttpRequest对象req
if(window.XMLHttpRequest) {
//IE7, Firefox, Opera支持
req = new XMLHttpRequest();
}else if(window.ActiveXObject) {
//IE5,IE6支持
req = new ActiveXObject("Microsoft.XMLHTTP");
}
/*
