4.1 完成验证 Ajax+c#

4.1  完成验证

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

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

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

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


代码清单4-1  validation.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    
<title>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.aspx?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>
<a>Birth date:</a><input id="birthDate" type="text" onchange="validate()" />
    
<div id="dateMessage">
    
</div>
</body>
</html>

ValidationServlet.aspx 服务器端代码也很简单(见代码清单4-2)。 這里是C#做的服務端,開發工具是 vs2005
<%@ Page Language="C#" %>
<script runat="server">
    protected 
void Page_Load(object sender, EventArgs e)
    
{
        Response.ContentType 
= "text/xml";
        bool passed 
= validateDate(Request["birthDate"]);
        string message 
= "You have entered an invalid date.";
        
if (passed)
        
{
            message 
= "You have entered a valid date.";
        }

        string  textxml;
        textxml 
= "<response>"+"<passed>"+passed.ToString()+"</passed>"+"<message>"+message+"</message>"+"</response>";
        Response.Write(textxml);   
    }

    
//日期處理函數
    public bool validateDate(string date)
    
{
        bool isValid 
= true;
        
if (date != null)
        
{
            
try { DateTime daDate = DateTime.Parse(date); }
            
catch (FormatException) { isValid = false; }
        }

        
else {
            isValid 
= false;
        }

        
return isValid;
    }

</script>

posted on 2008-02-26 13:59  破曉之陽  阅读(507)  评论(0编辑  收藏  举报

导航