Ajax - 简单验证例子-优快云博客

本文介绍了一个使用Ajax技术进行日期验证的例子。通过结合JavaScript前端与Java Servlet后端，实现了即时反馈用户输入日期的有效性。

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

4.1 完成验证

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

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

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

(像格式的验证最好还是用正则表达式验证，这个例子你用124/124/888这样都是正确的，明显是有问题嘛！

不过这个例子用了servlet，这样别人就看不到你的验证方法了，如果是单纯的js验证方法，很容易被别人看到验证方法 , 个人看法，不对请指出

< script language = " javascript " >

// 验证给定的日期是否合法   ,参数格式要求：yyyy-mm-dd 可以根据情况更改正则表达式
function isDate(oStartDate)
{
     // 对日期格式进行验证要求为2000-2099年  格式为 yyyy-mm-dd 并且可以正常转换成正确的日期
     var pat_hd =/^ 20 d{ 2 } - (( 0 [ 1 - 9 ]{ 1 }) | ( 1 [ 0 - 2 ]{ 1 })) - (( 0 [ 1 - 9 ]{ 1 }) | ([ 1 - 2 ]{ 1 }[ 0 - 9 ]{ 1 }) | ( 3 [ 0 - 1 ]{ 1 }))$ / ;

try {
      if ( ! pat_hd.test(oStartDate)){ throw " 日期非法！ " ;}
   var arr_hd = oStartDate.split( " - " );
   var dateTmp;
  dateTmp = new Date(arr_hd[ 0 ],parseFloat(arr_hd[ 1 ]) - 1 ,parseFloat(arr_hd[ 2 ]));
   if (dateTmp.getFullYear() != parseFloat(arr_hd[ 0 ]) || dateTmp.getMonth() != parseFloat(arr_hd[ 1 ]) - 1 || dateTmp.getDate() != parseFloat(arr_hd[ 2 ]))
  {
    throw " 日期非法！ " ;
  }
}
catch (ex)
{
   if (ex.description)
   { return false ;}
    else
    { return false ;}
}
return true ;
}

// 调用

alert(isDate( " 2005-12-12 " ));
alert(isDate( " 2004-13-30 " ));
alert(isDate( " 2005-12-32 " ));
alert(isDate( " 2005-02-30 " ));

</ script >

)

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

代码清单 4-1 validation.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

<html>

<head>

<title>Using Ajax for validation</title>

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 = "<font color=" + fontColor + ">"

+ message + " </font>";

}

</script>

</head>

<body>

<h1>Ajax Validation Example</h1>

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

</body>

</html>

服务器端代码也很简单（见代码清单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.*;

import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;

public class ValidationServlet extends HttpServlet {

/** Handles the HTTP <code>GET</code> 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 {

                     String[] dates = new String[10];

                dates = date.split("/");

                int year;
                int month;
                int day;

                try {

                year = Integer.parseInt(dates[2]);
                month = Integer.parseInt(dates[0]); ;
                day = Integer.parseInt(dates[1]);
                System.out.println(year+"-" + month +"-"+ day);
                }

                catch(Exception e){
                e.printStackTrace();
                return false;
                }

                Date dd = formatter.parse(month+"/"+day+"/"+year);

                Calendar ca =new GregorianCalendar();           //Calendar为抽象类

                ca.setTime(dd);                                                       //设置时间

                System.out.println(" year:"+ ca.get(ca.YEAR)+" month:"+ ca.get(ca.MONTH) +" day:" +ca.get(ca.DAY_OF_MONTH));

//Calendar.YEAR返回的是int，但不是年的数字，而是在Calendar中的数据位置，配合

                //Calendar.get(int Field)使用
                if(ca.get(ca.YEAR)!=year||ca.get(ca.MONTH)!=(month-1)||ca.get(ca.DAY_OF_MONTH)!=day){
                isValid = false;
                }

//下面是原来的就一段，就验证来说，是不完整的

//formatter.parse(date);

} catch (ParseException pe) {

System.out.println(pe.toString());

isValid = false;

}

} else {

isValid = false;

}

return isValid;

}

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