Ajax的第一个例子
两个.aspx文件，一个是Validation.aspx，一个是Default.aspx。这个例子基本实现了输入控件中日期的验证。
1.Validation.aspx中文件的代码：
Code1
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Validation.aspx.cs" Inherits="_Default" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
5
<html xmlns="http://www.w3.org/1999/xhtml" >6
<head runat="server">7
<title>Using Ajax for validation</title> 8
<script type="text/javascript" src="Validation.js">9
</script>10
</head>11
<body>12
<form id="form1" runat="server">13
<div>14
<h1>Ajax Validation Example</h1>15
Birth date:16
<input type="text" size="10" id="birthDate" name="birthDate" onkeydown="validation()" />17
<div id="dateMessage"></div>18
</div>19
</form>20
21
22
</body>23
</html>24
2. 下面是Validation.js代码
Code1
// JScript 文件2
var xmlHttp;3
4
function createXMLHttpRequest()5
{6
if(window.ActiveXObject)7
{8
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");9
}10
else11
{12
xmlHttp=new XMLHttpRequest();13
}14
}15
16
function validation()17
{18
createXMLHttpRequest();19
var date=document.getElementById("birthDate");20
var url="Default.aspx?birthDate="+escape(date.value);21
xmlHttp.open("GET",url,true);22
xmlHttp.onreadystatechange=callback;23
xmlHttp.send(null);24
}25
26
function callback()27
{28
if(xmlHttp.readyState==4)29
{30
if(xmlHttp.status==200)31
{32
var mes=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;33
var val=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;34
setMessage(mes,val);35
}36
}37
}38
39
function setMessage(message,isValid)40
{41
var messageArea=document.getElementById("dateMessage");42
var fontColor="red";43
if(isValid=="true")44
{45
fontColor="green";46
}47
messageArea.innerHTML="<font color="+fontColor+">"+message+"</font>";48
}49
50
51
3.最后是Default.aspx的代码
Code1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>2
3
4.Default.aspx.cs的代码：
Default.aspx.cs1
using System;2
using System.Data;3
using System.Configuration;4
using System.Collections;5
using System.Web;6
using System.Web.Security;7
using System.Web.UI;8
using System.Web.UI.WebControls;9
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
12
public partial class _Default : System.Web.UI.Page13
{14
protected void Page_Load(object sender, EventArgs e)15
{16
bool passed = validateDate(Request.QueryString["birthDate"]);17
18
string message = "You have entered an invalid date";19
if (passed)20
{21
message = "You have entered an valid date";22
}23
24
string xml = "<response><passed>" + passed.ToString() + "</passed><message>" + message + "</message></response>";25
//Response.Write("<passed>" + passed.ToString() + "</passed>");26
//Response.Write("<message>" + message + "</message>");27
Response.ClearContent();28
Response.Cache.SetNoStore();29
Response.ContentType = "text/xml";30
Response.ContentEncoding = System.Text.Encoding.UTF8;31
32
Response.Write(xml);33
}34
35
36
public bool validateDate(string date)37
{38
bool isValid = true;39
if (date != null)40
{41
try42
{43
//string tempStr = string.Format("{0,d}", date);44
Convert.ToDateTime(date); 45
46
}47
catch (Exception e)48
{49
isValid = false;50
}51
}52
else53
{54
isValid = false;55
}56
return isValid;57
}58
}59
5.不足之处：
- 在输入控件birthDate中，事件中使用的onkeydown，《Ajax基础教程》中使用的是onchange事件，但是在程序中却无法执行。不明白是什么原因？
- 因为使用事件是onkeydown事件，感觉验证还是有那么点问题？
- 在js文件中，setMessage()函数无法正确设置颜色，不晓得什么原因？
浙公网安备 33010602011771号