Ajax - 简单验证例子
2007-08-14 12:39
375 查看
我们已经介绍了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=/^20d{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-1validation.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 = "<font color=" + fontColor + ">"
[align=right] + message + " </font>";[/align]
}
</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>
服务器端代码也很简单（见代码清单4-2）。为简单起见，这里把验证代码放在servlet中，而在生产环境中很可能会把验证代码委托给验证服务。
代码清单4-2ValidationServlet.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所示的结果。
[align=center]图4-1输入非法的日期[/align]
[align=center]图4-2输入合法的日期[/align]
红色字体为lin49940修改部分，测试通过，毕竟是老书了，很多要改的
对Calendar类不熟悉的请看：http://gceclub.sun.com.cn/Java_Docs/html/zh_CN/api/java/util/class-use/Calendar.html
http://gceclub.sun.com.cn/Java_Docs/html/zh_CN/api/java/util/GregorianCalendar.html
原书本链接：http://book.csdn.net/bookfiles/11/100117034.shtml
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=/^20d{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-1validation.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 = "<font color=" + fontColor + ">"
[align=right] + message + " </font>";[/align]
}
</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>
服务器端代码也很简单（见代码清单4-2）。为简单起见，这里把验证代码放在servlet中，而在生产环境中很可能会把验证代码委托给验证服务。
代码清单4-2ValidationServlet.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所示的结果。
[align=center]图4-1输入非法的日期[/align]
[align=center]图4-2输入合法的日期[/align]
红色字体为lin49940修改部分，测试通过，毕竟是老书了，很多要改的
对Calendar类不熟悉的请看：http://gceclub.sun.com.cn/Java_Docs/html/zh_CN/api/java/util/class-use/Calendar.html
http://gceclub.sun.com.cn/Java_Docs/html/zh_CN/api/java/util/GregorianCalendar.html
原书本链接：http://book.csdn.net/bookfiles/11/100117034.shtml
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 初学ajax登录验证简单例子
- Ajax-用户名验证简单例子（详解）
- 利用ajax技术验证数据是否存在的一个简单例子
- 一个简单的用ajax验证注册用户名是否存在的例子
- ajax 验证 简单例子
- 服务器端验证-简单例子ValidateLogin.java
- 一个基于Ajax简单的数据验证
- \t\tajax验证日期小例子
- Ajax简单客户登陆验证
- ajax 笔记－－ 写了一个不用刷新就能实现－－用户名验证的例子
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- ssh框架ajax获取后台list数据简单例子
- ajax简单的后台用户登录验证
- 一个最最简单的Ajax例子
- ASP+Ajax实现无刷新评论简单例子
- Ajax几个简单的案例（ajax_用户唯一验证、ajax_返回xml数据的处理（包括分页处理）
- 由基础触类旁通--Ajax调用WebService的简单例子
- 使用JSP Servlet和Ajax实现简单的注册页面的用户名密码验证
- ajax 的简单例子
- ajax最简单验证