AJAX是全稱asynchronous java and xml,其實主要功能是異步數據傳輸。下面是一個注冊模塊驗證用戶名是否存在的案例:
Register.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
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">
<title>Insert title here</title>
<script type="text/javascript">
var req;

function validate()
{

var idField = document.getElementById("userid");

/**//*if (idField.value.length < 6) {
alert("fail");
}

else {
alert("success");
}*/

var url = "Validate.jsp?id="+ escape(idField.value);
if(window.XMLHttpRequest)

{
req = new XMLHttpRequest();
}

else if(window.ActiveXObject)
{
req = new ActiveXObject("Micorosoft.XMLHTTP");
}

req.open("GET",url,true);
req.onreadystatechange = callback;
req.send(null);
}


function callback()
{


if (req.readyState == 4)
{

if (req.status == 200)
{
var msg = req.responseXML.getElementsByTagName("msg")[0];
setMsg(msg.childNodes[0].nodeValue);
}
}
}


function setMsg(msg)
{
mdiv = document.getElementById("usermsg");

if (msg == "valid")
{
mdiv.innerHTML = "<font color='green'>恭喜!您可以使用當前用戶名注冊。</font>";

} else
{
mdiv.innerHTML = "<font color='red'>對不起!當前用戶名已經被注冊,請重新輸入用戶名。</font>";
}

}
</script>
</head>
<body>
用戶名:
<input type="text" id="userid" name="username" onBlur="validate();">
<span id="usermsg"></span>
<br>
密碼:
<input type="password" name="password">
</body>
</html>
Validate.jsp
<%
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragma","no-cache");
response.setDateHeader("Expires",0);
//這里自己加驗證邏輯,本例中就只驗證了用戶名長度
if(length(response.getAttribute("id"))<6)

{
response.getWriter().write("<msg>invalid</msg>");
}
else

{
response.getWriter().write("<msg>valid</msg>");
}

%>
Register.jsp









































































































