Chinaunix首页 | 论坛 | 博客
  • 博客访问: 631099
  • 博文数量: 37
  • 博客积分: 106
  • 博客等级: 民兵
  • 技术积分: 993
  • 用 户 组: 普通用户
  • 注册时间: 2012-03-30 18:26
个人简介

来自汉江北邻的IT男一枚,专注于PHP和C#开发... 最常更新的技术Blog → https://enjoy233.cnblogs.com/

文章分类

全部博文(37)

文章存档

2013年(36)

2012年(1)

我的朋友

分类: 系统运维

2013-04-19 07:48:33

原文地址:Ajax实现验证(3/4) 作者:tkchks

在这个例子中使用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 = "

    + fontColor +"\'>" + message + "

    "
    ;
  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("");
  24.         out.println("" + Boolean.toString(passed) + "");
  25.         out.println("" + message +"");
  26.         out.println("");
  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. }


阅读(1582) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~