文件一览
- ValidationServlet.java
- validation.html
- web.xml
ValidationServlet.java
package ajaxbook.chap4;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ValidationServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
PrintWriter out = resp.getWriter();
boolean passed = validateDate(req.getParameter("birthDate"));
resp.setContentType("text/xml");
resp.setHeader("Cache-Control", "no-Cache");
String message = "You have entered an invalid date. ";
if (passed) {
message = "You have entered a valid date. ";
}
out.println("<response>");
out.println("<passed>" + Boolean.toString(passed) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
}
private boolean validateDate(String date) {
boolean isValid = true;
if (date != null) {
SimpleDateFormat formatter = new SimpleDateFormat("MM/dd/yyyy");
try {
formatter.parse(date);
} catch (ParseException e) {
isValid = false;
}
} else {
isValid = false;
}
return isValid;
}
}
validation.html
<!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Using Ajax for validation</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function validation() {
createXMLHttpRequest();
var date = document.getElementById("birthDate");
var url = "ValidationServlet?birthDate=" + escape(date.value);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var mes = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(mes,val);
}
}
}
function setMessage(message,isValid) {
var messageArea = document.getElementById("dateMessage");
var fontColor = "red";
if (isValid == "true") {
fontColor = "green";
}
messageArea.innerHTML = "<font color=" + fontColor + ">" + message + " </font>";
}
</script>
</head>
<body>
<h1>Ajax Validtion Example</h1>
Birth Date:<input type="text" size="10" id="birthDate" οnchange="validation();" />
<div id="dateMessage"></div>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name>AjaxBookWeb</display-name> <servlet> <servlet-name>ValidationServlet</servlet-name> <servlet-class>ajaxbook.chap4.ValidationServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ValidationServlet</servlet-name> <url-pattern>/ValidationServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>validation.html</welcome-file> </welcome-file-list> </web-app>
执行效果如下附件: