修改密码的ajax实现

最新推荐文章于 2022-04-08 11:50:24 发布

iteye_5994

最新推荐文章于 2022-04-08 11:50:24 发布

阅读量321

点赞数

分类专栏： javascript/ajaix 文章标签： Ajax PHP JavaScript Microsoft ViewUI

javascript/ajaix 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

完结篇...........2008年5月16日

<html>
<head>
<title>
change password page
</title>
<style>
 body,#form{
  text-align:center;
  background:cyan;
 }
 #div-note{
  margin:10 auto;
  background:white;
  font:16px;
  border:1px  solid red;
  padding:0;
  width:300px;
  color:red; 
 }
</style>
<script language="javascript">
  //alert("erer");
  var note={};
     note.old="please input the old password";
  note.newpwd="please input the new password";
  note.repeat="please input the repeat of the new password";
  note.different="the repeat of the new password is different of the new password!";
  note.success="the password has been chenged successfully!";
  note.wrong="the old password is wrong,please input it again!";
  note.error="Some error has  happend,please login again!";
  note.length="the length of the  password must less than 20!";
  var type={ check: 'check', change:'change'};
  var state={ ok: 'success', wrong:'false', error:'error'};
 
  var httpRequest;
  
  var theForm,oldPassword,newPassword,newPassword2,noteDiv,changeButton;
  function createXMLHttpRequest(){
   var request;
   if(window.ActiveXObject){
    try{
     request=new ActiveXObject("Msxml3.XMLHTTP");
    }catch(e){
     try{
      request=new ActiveXObject("Msxml2.XMLHTTP");
     }catch(e){
      try{
       request=new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){}
     }
    }
   }else if(window.XMLHttpRequest){    
    request=new XMLHttpRequest();
    if(request.overrideMimeType){
     request.overrideMimeType('text/xml');
    }
   }
   
   return request;
  }
  function initFunction(){
  
   httpRequest=createXMLHttpRequest();
   theForm=document.getElementById("changeForm");
   oldPassword=document.getElementById("old_password");
   newPassword=document.getElementById("new_password");
   newPassword2=document.getElementById("new_password2");
   noteDiv=document.getElementById("div-note");
   changeButton=document.getElementById("changeButton");
   //alert(httpRequest);
   oldPassword.focus();
   newPassword.disabled=true;
   newPassword2.disabled=true;
   changeButton.disabled=true;
   noteDiv.innerHTML=note.old; 
      
  }
  function setNote(thenote){
   noteDiv.innerHTML=thenote;
  }
  /*
   confirm the values between the newPassword  and the newPassword2  is same and right
  */
function confirm(){
   if(""==newPassword.value||null==newPassword.value){
    setNote(note.newpwd);
    newPassword.disabled=false;
    newPassword.focus();
    return false;
   }else if(newPassword.value.length>20){
    setNote(note.length);
    newPassword.disabled=false;
    newPassword.value="";
    newPassword.focus();    
    return false;
   }
   else if(""==newPassword2.value||null==newPassword2.value){
    setNote(note.repeat);
    newPassword2.disabled=false;
    newPassword2.focus();
    return false;
   }else if(newPassword2.value!=newPassword.value){
    setNote(note.different);
    newPassword2.disabled=false;
    newPassword2.value="";
    newPassword2.focus();
    return false;
   }
   return true;
   
  }
 
 /*
  receive the responseText and deal it
 */
 
  function deal_check(){
   if (httpRequest.readyState == 4) {
            if (httpRequest.status == 200) {
                
                var thestate=httpRequest.responseText.toLowerCase();
                //alert(thestate);
     if(thestate==""||thestate==state.error){
      setNote(note.error);
     }else if(thestate==state.ok){
      setNote(note.newpwd);
      oldPassword.disabled=true;
      newPassword.disabled=false;
      newPassword2.disabled=false;
      changeButton.disabled=false;
      newPassword.focus();
     }else if(thestate==state.wrong){    
      setNote(note.wrong);
      oldPassword.value="";
      oldPassword.focus();
      newPassword.disabled=true;
      newPassword2.disabled=true;
      changeButton.disabled=true;
     }
            } else {
              
                alert(note.error);
            }
        }
   
  }
  
 /*
  check the oldPassword 
 */
 
  function check(){
   //var url=window.location;
   if(null==oldPassword.value||""==oldPassword.value){
    oldPassword.focus();
    return false;
   }
   var url="http://localhost/test/response.php";
   httpRequest=createXMLHttpRequest();
   var param="type="+type.check;
    param+="&old_password="+oldPassword.value;
    param+="&time="+new Date();
   httpRequest.onreadystatechange=deal_check; 
   //alert(url+"?"+param);
   httpRequest.open("GET",url+"?"+param,"true");
   httpRequest.send(null);
   
   
  }
  
 
  /*
   change the password 
  */
  
  function change(){
   if(!confirm()){
    return false;
   }else{
    //var url=window.location;
    var url="http://localhost/test/response.php";
    httpRequest=createXMLHttpRequest();
    var param="type="+type.change;
    param+="&old_password="+oldPassword.value;
    param+="&new_password="+newPassword.value;
    param+="&time="+new Date();
    //alert(url+"?"+param);
    httpRequest.onreadystatechange=deal_change;     
    httpRequest.open("GET",url+"?"+param,"true");
    httpRequest.send(null);
    return false;
   }
  }
  
  /*
   receive the responseText and deal it
  */
  
  function deal_change(){
   if(httpRequest.readyState==4){
    if(httpRequest.status==200){
     var thestate=httpRequest.responseText.toLowerCase();
     if(state.ok==thestate){
      alert(note.success);
      window.close();
     }else{
      alert(note.error);
      initFunction();
     }
    
    }else{
     alert(note.error);
     initFunction();    
    }
   }
  
  }
</script>
</head>
<body οnlοad="initFunction()">
<form id="changeForm" method="post" action="" οnsubmit="change()">
 <div id="form">
 <div id="form-head"><h1>
  Change Password
  </h1>
 </div>
 
 <table align="center">
 <tr>
  <td><label for="old_password">
  old password
  </label></td>
  <td><input type="password" id="old_password" οnblur="check()"/></td>
 </tr>
  <tr>
  <td><label for="new_password">
  new password
  </label></td>
  <td><input type="password" id="new_password" οnblur="return confirm();"/></td>
 </tr>
  <tr>
  <td><label for="new_password2" >
  repeat of new password
  </label></td>
  <td><input type="password" id="new_password2" /></td>
 </tr>
 </table>
 
 <div id="div-note"></div>
 <input type="button" id="changeButton" οnclick="change()" value="Change"/>
</div>
</form>
</body>
</html>

response.php,测试用

<?php
	$type=$_GET["type"];
	$old=$_GET["old_password"];
	$new=$_GET["new_passwrod"];
	if($type=="check"){
		if("123"==$old){
			echo "success";
		}else{
			echo "false";
		}
	}else if($type=="change"){
		if("123"==$old){
			echo "success";
		}else{
			echo "false";
		}
	}
?>