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>
