一个基于Ajax简单的数据验证

Ajax用户名验证

最新推荐文章于 2025-09-11 10:42:34 发布

weixin_30788239

最新推荐文章于 2025-09-11 10:42:34 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/linsongbin/archive/2007/11/12/956550.html

本文介绍了一个简单的基于Ajax的用户名验证过程，使用HTML、JavaScript和XML技术实现。通过前端代码调用XMLHttpRequest对象请求XML文件来检查用户名是否已被注册。

1.新建一个checkUser.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>无标题页</title>
    <script src="checkUser.js" type="text/javascript">
    </script>
</head>
<body>
    <h1>基于Ajax简单的数据验证</h1>
    <hr />
    <div>
        <span>用户名:</span><input id="UserName" type="text" onblur="check();"/><span id="checkResult"></span>
    </div>
    <div>
        <span>密码:</span><input id="PassWord" type="password" />
    </div>
</body>
</html>

2.新建一个checkUser.xml文件
<?xml version="1.0" encoding="utf-8" ?>
<User>
<UserName>admin</UserName>
<PassWord>admin</PassWord>
</User>

3.新建一个checkUser.js文件

var xmlHttp;

function createXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    }
}

function check()
{
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET","checkUser.xml");
    xmlHttp.send(null);
}

function handleStateChange()
{
   if(xmlHttp.readyState == 4)
   {
       if(xmlHttp.status ==200)
       {
           checkResult();
       }
   }
}

function checkResult()
{
    var xmlUser = xmlHttp.responseXML;
    var xmlUserName = xmlUser.getElementsByTagName("UserName")[0];
    if(document.getElementById("UserName").value == xmlUserName.childNodes[0].nodeValue)
        document.getElementById("checkResult").innerHTML = "用户名已没被注册了!!!";
    else
        document.getElementById("checkResult").innerHTML = "用户名还没被注册!!!";
}

完成~~!

转载于:https://www.cnblogs.com/linsongbin/archive/2007/11/12/956550.html