Ajax基础教程：完成验证

 我们已经介绍了Ajax技 术，也知道了如何使用XMLHttpRequest对象，现在要把它们结合起来，该怎么做呢？哪些情况下需要应用Ajax技术？当然，Ajax的潜力几乎 是无穷尽的，关于Ajax的使用，灵感可能源源不断。本章将展示一些例子，在这些情况下，使用Ajax技术可以让应用突飞猛进。有些情况是一目了然的，有 些则不是。不过无论怎样，对Ajax应用积累的经验越多，你就越会找到自己的方法来改善应用。在这些例子中，大多数都使用Java servlet作为服务器端组件，其实每个例子也都能很容易地使用，net、Ruby、Perl、php或任何其他服务器端技术来编写。

    4.1  完成验证

    关于可用性有一句金玉良言，即防患于未然，根本杜绝错误的发生。但是如果真的出现了错误，你就要第一时间通知用户。在Ajax之前，基于web的 应用必须提交整个页面才能验证数据，或者要依赖复杂的JavaScript来检查表单。尽管有些检查确实很简单，可以使用JavaScript编写，但另 外一些检查则不然，完全靠JavaScript编写是办不到的。当然，在客户端编写的每一个验证例程都必须在服务器上以某种方式重写，因为用户有可能禁用 JavaScript。

    利用Ajax，你不用再受这个限制，不再只是编写简单的客户端验证和重复的逻辑。现在，如果你想为用户提供更能体现交互性的体验，可以简单地调用为服务器编写的验证例程。在大多数情况下，这个逻辑编写起来更简单，测试也更容易，而且完全可以借助于现有的框架。

    有人问，在应用中应该从哪里开始使用Ajax，我们一般会建议从验证开始。你很可能要去掉一些JavaScript，而且可以很容易地加入一些现有的服务器端逻辑。本节将介绍一个例子，这是最常见的验证之一：日期验证。

    这个例子的html很简单（见代码清单4-1）。其中有一个标准的 输入框，相应的onchange()事件（当然，可以使用你认为合适的任何事件）会触发验证方法。可以看到，要调用标准的 createXMLHttpRequest()方法，然后把输入值发送到ValidationServlet servlet。callback()函数从服务器得到结果，然后委托给setMessage()方法，这个方法会检查值以确定用什么颜色显示消息。

    代码清单4-1  validation.html
    
     
    
     
       
     
       
     
     
       

AjaxValidation Example

        Birth date:
       

     
    

    服务器端代码也很简单（见代码清单4-2）。为简单起见，这里把验证代码放在servlet中，而在生产环境中很可能会把验证代码委托给验证服务。

    代码清单4-2  ValidationServlet.java
    package ajaxbook.chap4;
     
    import java.io.*;
    import java.text.ParseException;
    import java.text.SimpleDateFormat;
     
    import javax.servlet.*;
    import javax.servlet.http.*;
     
    public class ValidationServlet extends HttpServlet {

  /** Handles the HTTP GET method.
         * @param request servlet request
         * @param response servlet response
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
            PrintWriter out = response.getWriter();
     
            boolean passed = validateDate(request.getParameter("birthDate"));
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            String message = "You have entered an invalid date.";
            if (passed) {
                message = "You have entered a valid date.";
            }
            out.println("");
            out.println("" + Boolean.toString(passed) + "");
            out.println("" + message + "");
            out.println("");
            out.close();
        }
     
       /**
        * Checks to see whether the argument is a valid date.
        * A null date is considered invalid. This method
        * used the default data formatter and lenient
        * parsing.
        *
        * @param date a String representing the date to check
        * @return message a String representing the outcome of the check
        */
       private boolean validateDate(String date) {
     
            boolean isValid = true;
            if(date != null) {
                SimpleDateFormat formatter= new SimpleDateFormat("MM/dd/yyyy");
                try {
                    formatter.parse(date);
                } catch (ParseException pe) {
                    System.out.println(pe.toString());
                    isValid = false;
                }
            } else {
                isValid = false;
            }
            return isValid;
        }
    }

    运行这个例子会得到图4-1和图4-2所示的结果。

图4-1  输入非法的日期

图4-2  输入合法的日期