页面文件：XMLHttpRequest.htm
Code<!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>Ajax-XmlHttpRequest</title>
<style type="text/css">
body
{
font-family: @宋体;
font-size: 12px;
}
.invalid
{
color: Red;
}
</style>
<script type="text/javascript">
var xmlhttp;
function doCheck(username){
if(username!=null && username!=""){
document.getElementById("invalidMessage").innerHTML = "";
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
}
}
}
if(xmlhttp){
xmlhttp.onreadystatechange = checkNames;
xmlhttp.open("GET","usernames.xml",true);
xmlhttp.send(null);
}
}
function checkNames(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var enteredUserName = document.getElementById("txtUserName").value;
var usernameList = xmlhttp.responseXML.getElementsByTagName("username");
for(var i=0;i<usernameList.length;i++){
if(enteredUserName == usernameList[i].firstChild.nodeValue){
document.getElementById("invalidMessage").innerHTML = "Sorry, this username is already in use.Choose another.";
break;
}
}
}
}
}
</script>
</head>
<body>
<form>
<p>
UserName:<input type="text" id="txtUserName" size="20" onblur="doCheck(this.value);" />
<span id="invalidMessage" class="invalid"></span>
</p>
<p>
Password:<input type="password" id="txtPassword" size="20" />
</p>
</form>
</body>
</html>
XML数据文件:usernames.xml
Code<?xml version="1.0" encoding="utf-8" ?>
<userInfo>
<user>
<username>张三</username>
<usersex>男</usersex>
</user>
<user>
<username>李四</username>
<usersex>男</usersex>
</user>
<user>
<username>张丽</username>
<usersex>女</usersex>
</user>
<user>
<username>李平</username>
<usersex>女</usersex>
</user>
</userInfo>
