以下是ajax代碼示例：
HTML
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function validation()
{
var name = document.getElementById("username").value;
var pwd = document.getElementById("password").value;
var postStr = "username="+name+"&password="+pwd;
ajax("connect.php",postStr,function(result){
document.getElementById("info").innerHTML=result;
});
}
function ajax(url,postStr,onsuccess)
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創建XMLHTTP對象，考慮兼容性。XHR
xmlhttp.open("POST", url, true); //“准備”向服務器的GetDate1.ashx發出Post請求（GET可能會有緩存問題）。這里還沒有發出請求
//AJAX是異步的，並不是等到服務器端返回才繼續執行
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4) //readyState == 4 表示服務器返回完成數據了。之前可能會經歷2（請求已發送，正在處理中）、3（響應中已有部分數據可用了，但是服務器還沒有完成響應的生成）
{
if (xmlhttp.status == 200) //如果Http狀態碼為200則是成功
{
onsuccess(xmlhttp.responseText);
}
else
{
alert("AJAX服務器返回錯誤！");
}
}
}
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//不要以為if (xmlhttp.readyState == 4) {在send之前執行！！！！
xmlhttp.send(postStr); //這時才開始發送請求。並不等於服務器端返回。請求發出去了，我不等！去監聽onreadystatechange吧！
}
</script>
</head>
<body>
用戶名:<input id="username" name="username" type="text" />
<BR />
密碼:<input id="password" name="password" type="password" />
<BR />
<input type="button" name="button" value="提交" onclick="validation();" />
<div id="info"></div>
</body>
</html>
php
<?php
$con = mysql_connect('localhost','root','root');
if(!$con)
{
die('error:'.mysql_error());
}
mysql_select_db("ajax-login",$con);
$result = mysql_query("select * from user where username='$_POST[username]'");
while($row = mysql_fetch_array($result))
{
if($row['password'] == md5($_POST['password']))
{
header("Location:success.php");
}
else
{
echo 'error';
}
}
//echo "<br/>";
//print_r($_POST['password']);exit();
?>
mysql
/*
Navicat MySQL Data Transfer
Source Server : localhost
Source Server Version : 50553
Source Host : localhost:3306
Source Database : ajax-login
Target Server Type : MYSQL
Target Server Version : 50553
File Encoding : 65001
Date: 2017-12-05 14:32:16
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(30) NOT NULL COMMENT '用戶名',
`password` varchar(32) NOT NULL COMMENT '密碼',
`login_time` int(10) DEFAULT NULL COMMENT '登錄時間',
`login_ip` varchar(32) DEFAULT NULL COMMENT '登錄IP',
`login_counts` int(10) NOT NULL DEFAULT '0' COMMENT '登錄次數',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', 'demo', 'fe01ce2a7fbac8fafaed7c982a04e229', '0', '', '0');
INSERT INTO `user` VALUES ('2', 'admin', 'admin', '0', '', '0');