久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

Ajax- 完成驗(yàn)證

來自站長(zhǎng)百科
跳轉(zhuǎn)至： 導(dǎo)航、? 搜索

導(dǎo)航: 上一頁 | ASP | PHP | JSP | HTML | CSS | XHTML | aJAX | Ruby | JAVA | XML | Python | ColdFusion

我們已經(jīng)介紹了Ajax技術(shù)，也知道了如何使用XMLHttpRequest對(duì)象，現(xiàn)在要把它們結(jié)合起來，該怎么做呢？哪些情況下需要應(yīng)用Ajax技術(shù)？當(dāng)然，Ajax的潛力幾乎是無窮盡的，關(guān)于Ajax的使用，靈感可能源源不斷。本章將展示一些例子，在這些情況下，使用Ajax技術(shù)可以讓應(yīng)用突飛猛進(jìn)。有些情況是一目了然的，有些則不是。不過無論怎樣，對(duì)Ajax應(yīng)用積累的經(jīng)驗(yàn)越多，你就越會(huì)找到自己的方法來改善應(yīng)用。在這些例子中，大多數(shù)都使用Java servlet作為服務(wù)器端組件，其實(shí)每個(gè)例子也都能很容易地使用.NET、Ruby、Perl、PHP或任何其他服務(wù)器端技術(shù)來編寫。

完成驗(yàn)證

關(guān)于可用性有一句金玉良言，即防患于未然，根本杜絕錯(cuò)誤的發(fā)生。但是如果真的出現(xiàn)了錯(cuò)誤，你就要第一時(shí)間通知用戶。在Ajax之前，基于Web的應(yīng)用必須提交整個(gè)頁面才能驗(yàn)證數(shù)據(jù)，或者要依賴復(fù)雜的JavaScript來檢查表單。盡管有些檢查確實(shí)很簡(jiǎn)單，可以使用JavaScript編寫，但另外一些檢查則不然，完全靠JavaScript編寫是辦不到的。當(dāng)然，在客戶端編寫的每一個(gè)驗(yàn)證例程都必須在服務(wù)器上以某種方式重寫，因?yàn)橛脩粲锌赡芙肑avaScript。

利用Ajax，你不用再受這個(gè)限制，不再只是編寫簡(jiǎn)單的客戶端驗(yàn)證和重復(fù)的邏輯?，F(xiàn)在，如果你想為用戶提供更能體現(xiàn)交互性的體驗(yàn)，可以簡(jiǎn)單地調(diào)用為服務(wù)器編寫的驗(yàn)證例程。在大多數(shù)情況下，這個(gè)邏輯編寫起來更簡(jiǎn)單，測(cè)試也更容易，而且完全可以借助于現(xiàn)有的框架。

有人問，在應(yīng)用中應(yīng)該從哪里開始使用Ajax，我們一般會(huì)建議從驗(yàn)證開始。你很可能要去掉一些JavaScript，而且可以很容易地加入一些現(xiàn)有的服務(wù)器端邏輯。本節(jié)將介紹一個(gè)例子，這是最常見的驗(yàn)證之一：日期驗(yàn)證。

這個(gè)例子的HTML很簡(jiǎn)單（見代碼清單4-1）。其中有一個(gè)標(biāo)準(zhǔn)的輸入框，相應(yīng)的onchange()事件（當(dāng)然，可以使用你認(rèn)為合適的任何事件）會(huì)觸發(fā)驗(yàn)證方法。可以看到，要調(diào)用標(biāo)準(zhǔn)的createXMLHttpRequest()方法，然后把輸入值發(fā)送到ValidationServlet servlet。callback()函數(shù)從服務(wù)器得到結(jié)果，然后委托給setMessage()方法，這個(gè)方法會(huì)檢查值以確定用什么顏色顯示消息。

代碼清單4-1 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 validate() {

           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 = "" 

               + message + " ";

       }

   </script>

 </head>

 <body>

    <h1>Ajax Validation Example</h1>

   Birth date: <input type="text" size="10" id="birthDate" onchange="validate();"/>

   <div id="dateMessage"></div>

 </body>

</html>

服務(wù)器端代碼也很簡(jiǎn)單（見代碼清單4-2）。為簡(jiǎn)單起見，這里把驗(yàn)證代碼放在servlet中，而在生產(chǎn)環(huán)境中很可能會(huì)把驗(yàn)證代碼委托給驗(yàn)證服務(wù)。

代碼清單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("<response>");

       out.println("<passed>" + Boolean.toString(passed) + "</passed>");

       out.println("<message>" + message + "</message>");

       out.println("</response>");

       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;

   }

}

運(yùn)行這個(gè)例子會(huì)得到圖4-1和圖4-2所示的結(jié)果。
Image001.jpg Image002.jpg