编辑“Ajax- 完成验证”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[Ajax学习教程#Ajax学习教程|上一页]] | {{template:开发语言导航}}</span>
<div style="clear:both;"></div>

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

'''完成验证'''<br>

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

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

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

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

代码清单4-1  validation.html<br>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ><br>
 <html><br>
  <head><br>
    <nowiki><title>Using Ajax for validation</title></nowiki><br>
    <nowiki><script type="text/javascript"></nowiki><br>
        <nowiki>var xmlHttp;</nowiki><br>
        <nowiki>function createXMLHttpRequest() {</nowiki><br>
            if (window.ActiveXObject) {<br>
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
            }<br>
            else if (window.XMLHttpRequest) {<br>
                xmlHttp = new XMLHttpRequest();<br>
            }<br>
        }<br>
        function validate() {<br>
            createXMLHttpRequest();<br>
            var date = document.getElementById("birthDate");<br>
            var url = "ValidationServlet?birthDate=" + escape(date.value);<br>
            xmlHttp.open("GET", url, true);<br>
            xmlHttp.onreadystatechange = callback;<br>
            xmlHttp.send(null);<br>
        }<br>
        function callback() {<br>
            if (xmlHttp.readyState == 4) {<br>
                if (xmlHttp.status == 200) {<br>
                   var mes =<br>
                     xmlHttp.responseXML<br>
                           .getElementsByTagName("message")[0].firstChild.data;<br>
                    var val =<br>
                       xmlHttp.responseXML<br>
                              .getElementsByTagName("passed")[0].firstChild.data;<br>
                    setMessage(mes, val);<br>
                }<br>
            }<br>
        }<br>
      function setMessage(message, isValid) {<br>
            var messageArea = document.getElementById("dateMessage");<br>
            var fontColor = "red";<br>
            if (isValid == "true") {<br>
                fontColor = "green";<br>
            }<br>
            messageArea.innerHTML = "<font color=" + fontColor + ">" <br>
                + message + " </font>";<br>
        }<br>
    </script><br>
  </head><br>
  <body><br>
    <nowiki> <h1>Ajax Validation Example</h1></nowiki><br>
    <nowiki>Birth date: <input type="text" size="10" id="birthDate" onchange="validate();"/></nowiki><br>
    <nowiki><div id="dateMessage"></div></nowiki><br>
  </body><br>
 </html><br>

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

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

运行这个例子会得到图4-1和图4-2所示的结果。<br>
[[Image:Image001.jpg‎]]
[[Image:Image002.jpg‎]]
[[category:Ajax]]