具体代码如下：
1 login.php
登录界面中,javascript脚本用ajax方式异步请求dologin.php,dologin.php负责用户信息验证(包括验证码,php生成验证码可以自行搜索).登录界面的代码如下:
<?php session_start();?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>login</title> <link type="text/css" href="https://www.jb51.net/CSS/login.css" /> <script src="https://www.jb51.net/JS/ajaxhelper.js" type="text/javascript"></script> <script src="https://www.jb51.net/JS/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function chkForm() { if (m$('username').value == "") { alert('用户名不能为空.'); m$('username').focus(); return false; } if (m$('password').value == "") { alert('密码不能为空.'); m$('password').focus(); return false; } if (m$('password').value != "" && m$('username').value != "") { var xmlhttp = createRequest(); if (xmlhttp) { m$('loading').innerHTML = "<font color='red'>loading...</font>"; var username = m$('username').value; var pwd = m$('password').value; var code = m$('txtCode').value; var url = "dologin.php"; xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = ValidateResult; xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send("username=" + escape(username) + "&password=" + escape(pwd) + "&code=" + escape(code)); } else { alert('xmlHttp创建失败.'); } function ValidateResult() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { if (xmlhttp.responseText != "") { //window.alert(xmlhttp.responseText); var obj = eval("(" + xmlhttp.responseText + ")"); if (obj.result == true) { alert("提示:" + obj.info); window.location = 'index.php'; } else { alert("错误:" + obj.info); } } else { window.alert("从服务器获取失败"); window.location.reload(); } m$('loading').innerHTML = ""; } } } } } function m$(id) { return document.getElementById(id); } function changeCode() { var xmlhttp = createRequest(); if (xmlhttp) { m$('loading').innerHTML = "<font color='red'>loading...</font>"; var dt = new Date().getTime(); // alert(dt); var url = "function/imagecode.php?dummay" + escape(dt); xmlhttp.open("GET", url, true); xmlhttp.onreadystatechange = ValidateResult; xmlhttp.send(null); } else { alert('xmlHttp创建失败.'); } function ValidateResult() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { var dt = new Date().getTime(); var url = "function/imagecode.php?dummay" + escape(dt); m$('imgCode').src = "function/imagecode.php?dummay" + escape(dt); m$('loading').innerHTML = ""; } } } } function showTool() { $('#divToolTip').css("display", "block"); } function hideTool() { $('#divToolTip').css("display", "none"); } window.onload = initPage; function initPage() { $('#divToolTip').css("display", "none"); } </script> </head> <body> <div> </div> <div> <div> <div> <div>Ajax PHP Demo System <img src="https://www.jb51.net/Images/appstorm-icon.png" alt="appcation storm image"/> </div> <br/> <hr/> <div> Author:<a href="#" onmousemove="showTool();">wangming</a> </div> <div>DateTime:2009-9-1</div> <div>Version:1.0.0</div> <div>Email:wangmingemail@163.com </div> <div> <img src="https://www.jb51.net/Images/ming.jpg"/> <span> <br/> 姓名:wangming<br/> 电商06-2<br/> </span> </div> </div> </div> <div> <form> <br/> <table> <tr> <td>用户名:</td> <td><input type="text"/></td> <td></td> </tr> <tr> <td>密 码:</td> <td><input type="password" /></td> <td></td> </tr> <tr> <td>验证码:</td> <td> <input type="text" size="12" /> <img src="https://www.jb51.net/function/imagecode.php" alt="image code"/> </td> <td><input type="button" /></td> </tr> <tr> <td></td> <td><input type="button" /></td> <td></td> </tr> <tr> <td></td> <td><span></span></td> <td><span></span></td> </tr> </table> </form> </div> </div> <div> ©Copyright 2015. </div> </body> </html>
2 ajaxhelper.js