4.1 完成验证 Ajax+c#

4.1  完成验证

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

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

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

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