一个很好的ajax入门小实例，用户登录验证

最新推荐文章于 2020-07-19 09:37:41 发布

feiqiangs

最新推荐文章于 2020-07-19 09:37:41 发布

阅读量748

点赞数

CC 4.0 BY-SA版权

分类专栏： web开发

本文链接：https://blog.csdn.net/dumpling5232/article/details/13616191

web开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的Ajax登录验证方法。通过Ajax技术，网页可以在不重新加载整个页面的情况下，从服务器请求数据并进行局部更新。该示例包括了创建XMLHttpRequest对象、发送GET请求、处理响应及简单的表单验证。

js代码

  <script type="text/javascript">   
        var xmlHttp;    
        function createXMLHttpRequest() {    
            if (window.ActiveXObject) {    
                   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    
            }    
            else if (window.XMLHttpRequest) {    
                xmlHttp = new XMLHttpRequest();    
            }
        }    
        function startRequest(url) {
            createXMLHttpRequest();
            xmlHttp.open("GET", url, true);    
               xmlHttp.onreadystatechange = showResult;
            xmlHttp.send(null);
        }    
        function showResult() {    
            if(xmlHttp.readyState == 4) {    
                if(xmlHttp.status == 200) {
                    var res=xmlHttp.responseXML.getElementsByTagName("res")[0].firstChild.data;
                    loginResult("loginResult",res);
                }    
            }    
        }
        
        function loginResult(divId,result){
            var responseDiv = document.getElementById(divId);
                    if(responseDiv.hasChildNodes()){
                        responseDiv.removeChild(responseDiv.childNodes[0]);
                    }
                var responseContent = document.createTextNode(result);
                responseDiv.appendChild(responseContent);
        }
        function validateUser(){
            var userName = document.loginForm.username.value;
            var password = document.loginForm.pwd.value;
            startRequest('loginServlet?userName='+userName+'&password='+password);
        }
        function checkUserName(){
            var userName = document.loginForm.username.value;
            if(userName==""){
                loginResult("username","用户名不能为空");
            }
            else
                loginResult("username","");
        }
        function checkPassword(){
            var userName = document.loginForm.pwd.value;
            if(userName==""){
                loginResult("pwd","密码不能为空");
            }
            else
                loginResult("pwd","");
        }
        </script>

登录页面html

<body>
        <form action="#" name="loginForm">
        用户名<input type="text" name="username" onblur="checkUserName();"/>
        <font color="red" id="username"></font><br>
        密  码<input type="password" name="pwd" onblur="checkPassword();"/>
        <font color="red" id="pwd"></font><br>
        <input type="button" value="登录" onclick="validateUser();"/>
        <input type="reset" value="重置"/>
        <font color="red" id="loginResult"></font><br>
    </form>
    </body>
</html>