现在的位置: 首页 > 综合 > 正文

Ajax实现验证(3/4)

2014年09月05日 ⁄ 综合 ⁄ 共 3648字 ⁄ 字号 评论关闭
在这个例子中使用java servlet作为服务器端组件,完成验证日期功能
例子包括2个文件,分别是validation.html和ValidationServlet.java

在html代码里,有一个输入框,相应的onchange事件会触发验证方法。
首先调用createXMLHttpRequest()方法,然后把输入值发送到ValidationServlet.
callback()方法从服务器得到结果,然后委托给setMessage()方法,这个方法会检查值以确定使用什么颜色来显示消息。

以下是完整的源代码:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>validation.html</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.   <script language="javascript" type="text/javascript">
  7.     var xmlHttp;
  8.     
  9.     function createXMLHttpRequest(){
  10.       if(window.ActiveXObject){
  11.          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  12.       }
  13.       else if(window.XMLHttpRequest){
  14.          xmlHttp = new XMLHttpRequest();
  15.       }
  16.     }
  17.     
  18.     function validate(){
  19.       
  20.       createXMLHttpRequest();
  21.      
  22.       var date = document.getElementById("birthDate");
  23.       var url = "servlet/ValidationServlet?birthDate=" + escape(date.value);
  24.       xmlHttp.open("GET",url,true);
  25.       xmlHttp.onreadystatechange = callback;
  26.       xmlHttp.send(null);
  27.       
  28.     
  29.     }
  30.     
  31.     function callback(){
  32.       if(xmlHttp.readyState == 4){
  33.          if(xmlHttp.status == 200){
  34.       
  35.             var mes = xmlHttp.respon***ML.getElementsByTagName("message")[0].firstChild.data;
  36.             // alert(xmlHttp.respon***ML.getElementsByTagName("message")[0].firstChild.data);
  37.             var val = xmlHttp.respon***ML.getElementsByTagName("passed")[0].firstChild.data;
  38.             setMessage(mes,val);
  39.             
  40.          }
  41.       }
  42.     }
  43.     
  44.     
  45.     function setMessage(message,isValid){
  46.        var messageArea = document.getElementById("dateMessage");
  47.        var fontColor = "red";
  48.        if(isValid== "true"){
  49.           fontColor = "green";
  50.        }
  51.       
  52.        messageArea.innerHTML = "<p style=\'color:" + fontColor +"\'>" + message + "</p>";
  53.     }
  54.   </script>
  55.   </head>
  56.   
  57.   <body>
  58.     <h2>Ajax validation Example</h2>
  59.     Birth Date(MM/dd/yyyy):<input type="text" size="10" id="birthDate" value="11/11/2011" onchange="validate();" />
  60.     <div id="dateMessage"></div>
  61.  </body>
  62. </html>

  1. package ajax.study;
  2. import java.io.IOException;
  3. import java.io.PrintWriter;
  4. import java.text.ParseException;
  5. import java.text.SimpleDateFormat;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10. public class ValidationServlet extends HttpServlet {
  11.     private static final long serialVersionUID = 1L;
  12.     public void doGet(HttpServletRequest request, HttpServletResponse response)
  13.             throws ServletException, IOException {
  14.         PrintWriter out = response.getWriter();
  15.         response.setContentType("text/xml");
  16.         boolean passed = validateDate(request.getParameter("birthDate"));
  17.         response.setHeader("Cache-Control", "no-cache");
  18.         String message = "You have entered an invalid date";
  19.         if(passed){
  20.             
  21.             message = "You have entered a valid date";
  22.         }
  23.         out.println("<response>");
  24.         out.println("<passed>" + Boolean.toString(passed) + "</passed>");
  25.         out.println("<message>" + message +"</message>");
  26.         out.println("</response>");
  27.         
  28.         out.close();
  29.     }
  30.     
  31.     private boolean validateDate(String date) {
  32.         boolean isValid = true;
  33.         if(date != null){
  34.             SimpleDateFormat formatter = new SimpleDateFormat("MM/dd/yyyy");
  35.             try{
  36.                 formatter.parse(date);
  37.             }catch(ParseException pe){
  38.                 System.out.println(pe.toString());
  39.                 isValid = false;
  40.             }
  41.         }
  42.         else{
  43.             isValid = false;
  44.         }
  45.         return isValid;
  46.     }
  47.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  48.             throws ServletException, IOException {
  49.         doGet(request,response);
  50.     }
  51.     
  52. }

抱歉!评论已关闭.