パスワードを変更するajax実装
8072 ワード
...........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 onload="initFunction()">
<form id="changeForm" method="post" action="" onsubmit="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" onblur="check()"/></td>
</tr>
<tr>
<td><label for="new_password">
new password
</label></td>
<td><input type="password" id="new_password" onblur="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" onclick="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";
}
}
?>