一个最简单的应用,也就是输入用户名然后自动检测是否已被占用.
register.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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var ajax;
function AJAX()
{
this.CreateAjax = function(_method,_url,_callBackMethod,_info)
{
this.request = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("MSXML2.XmlHttp");
this.request.onreadystatechange = _callBackMethod;
this.request.open(_method,_url,true);
this.request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
this.request.send(_info);
}
}
function chkUser()
{
var username = document.getElementById("user").value;
if(username=="")
{
return;
}
var postTxt = "user=";
postTxt += escape(username);
ajax = new AJAX();
ajax.CreateAjax("POST","command.asp",checkReply,postTxt);
if(!ajax)
{
showInfo("创建XMLHTTPRQUEST对象出现异常.");
}
}
function checkReply()
{
var aStatus = ajax.request.readyState;
switch(aStatus)
{
case 1:
showInfo("加载中...");
break;
case 2:
showInfo("加载完毕,等待交互...");
break;
case 3:
showInfo("交互中...");
break;
case 4:
showInfo("完成!");
var aInfo = ajax.request.responseText;
if(aInfo=="occupy")
{
showInfo( "<img src='555.gif' /> 该用户名已经被使用！");
}
else
{
showInfo("恭喜你，" + aInfo + " 还未被占用！");
}
break;
default:
showInfo("检测未成功...");
}
}
function showInfo(info)
{
document.getElementById("statusInfo").innerHTML = info;
document.getElementById("statusInfo").style.display = "";
}
function displaydiv(did)
{
document.getElementById(did).style.display = "none";
}
</script>
<style type="text/css">
<!--
.dd {
font-size: 12px;
background-color: #C0F1FE;
border: 1px solid #26B9FF;
text-align:left;
width:300px;
height:20px;
line-height:20px;
float:left;
margin-left:10px;
padding-left:10px;
}
-->
</style>
</head>
<body onload='displaydiv("statusInfo")' style="text-align:center;">
<div style="text-align:center;width:760px;">
<div style="text-align:center;float:left;">
<label style="height:20px;line-height:20px;font-size:14px;">请输入downfly测试:</label>
<input type="text" id="user" style="height:18px;line-height:18px;" onblur="chkUser()" />
</div>
<div id="statusInfo" class="dd"></div>
</div>
</body>
</html>
command.asp
------------------------------
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<%
var user = Request.Form("user");
user = unescape(user);
if(user == "downfly")
{
Response.Write("occupy");
}
else
{
Response.Write(user);
}
%>
PS:因为POST数据时会出现乱码,所以我在COMMAND.ASP的顶部加上CODEPAGE="65001" ,把编码转换成UTF-8.
代码很乱啊!