完结篇...........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";
}
}
?>
分享到：
相关推荐
在IT领域，构建Web应用程序是常见的任务之一，而"html+Servlet+ajax实现登录修改"是一种常见的技术组合，用于创建动态、交互式的用户界面。在这个项目中，我们使用HTML作为前端展示层，Servlet作为服务器端处理逻辑...
本教程将深入讲解如何使用AJAX实现用户登录和注册功能，这对于初学者来说是一个很好的起点。 首先，我们需要理解AJAX的基本结构。一个基本的AJAX调用通常涉及以下步骤： 1. 创建XMLHttpRequest对象：这是AJAX的...
在这个"Ajax实现的登录弹出窗口"项目中，我们可以看到如何利用Ajax来创建一个用户友好的登录界面。 首先，Ajax的核心是JavaScript，它负责发送请求到服务器、处理返回的数据以及更新DOM（Document Object Model）以...
在本文中，我们将深入探讨如何使用jQuery和Ajax技术实现一个简单的登录验证系统。这个系统能够实时检查用户输入的用户名和密码是否有效，而无需页面刷新，从而提供更流畅的用户体验。 首先，jQuery是一个轻量级的...
这个"Ajax登录例程（内存判定账号密码）"是一个简单的实现，它演示了如何在客户端通过Ajax发送请求到服务器端，然后由服务器端进行账号密码的验证。在这个例子中，账号和密码的验证是基于内存中的固定值——"admin...
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现一个修改密码的验证功能。首先，我们从给定的代码片段出发，理解整个流程。 ### 1. 获取URL中的参数 在JavaScript中，`window.location.href` 属性用于...
本项目主要涉及使用Ajax和Servlet来实现一个基础的图书管理系统的登录功能以及图书数据的增删改查操作。以下是对这些技术及其应用的详细解释： 首先，让我们理解Ajax（Asynchronous JavaScript and XML）的核心概念...
6. **更新DOM**：利用JavaScript操作DOM元素，如修改特定元素的文本内容，或者显示/隐藏某些元素，实现无刷新的页面更新。 **安全性和优化** 虽然Ajax无刷新登录提供了良好的用户体验，但也需要注意安全问题。比如...
本文将详细介绍在FineReport表格制作软件中，如何通过ajax技术实现跨域异步单点登录的方法。 首先，我们需要了解单点登录的基本概念。单点登录是指用户只需要进行一次身份认证，便可以访问多个应用系统，无需重复...
注：此项目是用IntelliJ IDEA 13.1.3此软件编写而成，不过和myeclipse都差不多，本项目包含SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录，注册，修改密码，拦截器，如果用户没有登录则不能进行相应操作...
在这个“Ajax实现jsp登陆”的主题中，我们将深入探讨如何利用Ajax技术来构建一个高效的JSP登录系统，提高用户体验。 首先，我们需要理解JSP（JavaServer Pages）的基础。JSP是一种动态网页技术，它允许开发者在HTML...
ASP和Ajax技术在Web开发中占据着重要地位，它们分别代表了服务器端脚本和...通过查看和修改这些代码，你可以深入了解如何将ASP的服务器端处理与Ajax的客户端交互相结合，以实现高效、用户体验良好的会员注册流程。
演示功能包括： 图形验证码功能; 邮件地址校验功能; Struts2异常控制; 使用Struts2的JSON插件完成与Ajax的交互 ...修改reg_login\WEB-INF路径下的applicationContext.xml文件，将其中的数据库密码修改为你的数据库密码
Ajax技术允许我们实现页面的异步更新，提高了交互性。其主要组成部分包括： - **XMLHttpRequest对象**：JavaScript内置对象，用于在后台与服务器交换数据。 - **JavaScript**：编写AJAX请求和处理响应的代码。 - **...
本主题将深入探讨如何在Java中实现用户密码的修改，以及与MySQL数据库的交互。 首先，让我们了解基础概念。Java是一种面向对象的编程语言，广泛用于后端服务器开发。JSP则是Java的一种动态网页技术，它允许开发者在...
在本文中，我们将深入探讨如何使用Jquery和Ajax技术实现用户注册与登录功能，特别针对Asp.Net平台。首先，我们需要理解Jquery和Ajax的基本概念，然后逐步介绍它们在Asp.Net中的应用。 Jquery是一个高效、简洁且功能...
"asp.net+jquery+ajax无刷新用户注册，登录，修改密码"是一个典型的技术组合，用于实现动态、实时的用户交互，无需每次操作都刷新整个页面。下面我们将深入探讨这个主题。 ASP.NET是由微软开发的一种强大的Web应用...
本项目为Springmvc+mybatis+JSON+jQuery+Ajax无刷新登录,导出Excel,修改密码,RestFUL风格增删改查,加Js用户名检验以及密码长度校验等等。并且有大家喜欢的功能导出EXCEL，并且也实现了ajax无刷新注册，登录等等，...
在IT行业中，密码管理是确保数据安全的重要环节。...总的来说，"修改密码步骤"是一个结合前端交互和后端安全处理的过程，JavaScript在这个过程中起到了关键的桥梁作用，实现了用户界面与服务器之间的通信。