您的位置：首页 > 其它

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

2013-10-30 00:42 471 查看
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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航