AJAX 数据库操作
为了清楚地说明使用 AJAX 从数据库访问信息是多么容易，我们将动态构建 MySQL 查询并将结果显示在“ajax.html”上。但在我们继续之前，让我们做基础工作。使用以下命令创建表。
注意 ： 我们假设你有足够的权限来执行以下 MySQL 操作。
CREATE TABLE 'ajax_example' (
'name' varchar(50) NOT NULL,
'age' int(11) NOT NULL,
'sex' varchar(1) NOT NULL,
'wpm' int(11) NOT NULL,
PRIMARY KEY ('name')
)
现在使用以下 SQL 语句将以下数据转储到该表中：
INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);
客户端 HTML 文件
现在让我们拥有我们的客户端 HTML 文件，即 ajax.html，它将包含以下代码：
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
// 浏览器支持代码
function ajaxFunction() {
var ajaxRequest; // 使 Ajax 成为可能的变量！
try {
// Opera 8.0+、火狐、Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer 浏览器
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// 出问题了
alert("Your browser broke!");
return false;
}
}
}
// 创建一个接收数据的函数
// 从服务器发送并将更新
// 同一页面中的 div 部分。
ajaxRequest.onreadystatechange = function() {
if(ajaxRequest.readyState == 4) {
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// 现在从用户那里获取值并将其传递给
// 服务器脚本。
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age = " + age ;
queryString += "&wpm = " + wpm + "&sex = " + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
}
// -->
</script>
<form name = 'myForm'>
Max Age: <input type = 'text' id = 'age' /> <br />
Max WPM: <input type = 'text' id = 'wpm' /> <br />
Sex:
<select id = 'sex'>
<option value = "m">m</option>
<option value = "f">f</option>
</select>
<input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
</form>
<div id = 'ajaxDiv'>Your result will display here</div>
</body>
</html>
注意 ：Query中传递变量的方式是按照HTTP标准，有formA。
URL?variable1 = value1;&variable2 = value2;
上面的代码会给你一个如下所示的屏幕：
输入后，你的结果将显示在此部分中。
注意 ： 这是一个虚拟屏幕。
服务器端 PHP 文件
你的客户端脚本已准备就绪。现在，我们必须编写服务器端脚本，该脚本将从数据库中获取年龄、wpm 和性别，并将其发送回客户端。将以下代码放入文件“ajax-example.php”中。
<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
// 连接到 MySQL 服务器
mysql_connect($dbhost, $dbuser, $dbpass);
// 选择数据库
mysql_select_db($dbname) or die(mysql_error());
// 从查询字符串中检索数据
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// 转义用户输入以帮助防止 SQL 注入
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
// 构建查询
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
if(is_numeric($age))
$query .= " AND age <= $age";
if(is_numeric($wpm))
$query .= " AND wpm <= $wpm";
// 执行查询
$qry_result = mysql_query($query) or die(mysql_error());
// 构建结果字符串
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
// 为每个返回的人在表中插入一个新行
while($row = mysql_fetch_array($qry_result)) {
$display_string .= "<tr>";
$display_string .= "<td>$row[name]</td>";
$display_string .= "<td>$row[age]</td>";
$display_string .= "<td>$row[sex]</td>";
$display_string .= "<td>$row[wpm]</td>";
$display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?>
现在尝试在其中输入一个有效值(例如 120) Max Age 或任何其他框，然后单击查询 MySQL 按钮。
输入后，你的结果将显示在此部分中。
如果你已成功完成本课程，那么你就知道如何结合使用 MySQL、PHP、HTML 和 Javascript 来编写 AJAX 应用程序。