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

发布时间：2020-12-16 00:50:31 所属栏目：百科来源：网络整理

导读：js代码 script type="text/javascript" var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } functi

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!