PHP 和 AJAX MySQL 数据库实例

HTML 表单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>AJAX 数据库实例</title>
 6     <script src="selectuser.js"></script>
 7 </head>
 8 <body>
 9     <form>
10 Select a User:
11 <select name="users" onchange="showUser(this.value)">
12 <option value="1">John</option>
13 <option value="2">Linda</option>
14 </select>
15 </form>
16 <p>
17 <div id="txtHint"><b>User info will be listed here.</b></div>
18 </p>
19 </body>
20 </html>

例子解释 - HTML 表单
正如您看到的，它仅仅是一个简单的 HTML 表单，其中带有名为 "users" 的下拉列表，这个列表包含了
姓名，以及与数据库的 "id" 对应的选项值。
表单下面的段落包含了名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的信息的占位符。
当用户选择数据时，执行名为 "showUser()" 的函数。该函数的执行由 "onchange" 事件触发。
换句话说：每当用户改变下拉列表中的值，就会调用 showUser() 函数。

JavaScript(selectuser.js)

 1 var xmlHttp;
 2 function showUser(str)
 3 {
 4 xmlHttp=GetXmlHttpObject();
 5 if (xmlHttp==null)
 6 {
 7 alert ("Browser does not support HTTP Request");
 8 return
 9 }
10 var url="getuser.php";
11 url=url+"?q="+str;
12 url=url+"&sid="+Math.random();
13 xmlHttp.onreadystatechange=stateChanged;
14 xmlHttp.open("GET",url,true);
15 xmlHttp.send(null);
16 }
17 function stateChanged()
18 {
19 if (xmlHttp.status==200 && xmlHttp.readyState==4)
20 {
21 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
22 }
23 }
24 function GetXmlHttpObject()
25 {
26 var xmlHttp=null;
27 try
28 {
29 // Firefox, Opera 8.0+, Safari
30 xmlHttp=new XMLHttpRequest();
31 }
32 catch (e)
33 {
34 //Internet Explorer
35 try
36 {
37 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
38 }
39 catch (e)
40 {
41 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
42 }
43 }
44 return xmlHttp;
45 }

例子解释：

showUser() 函数
假如下拉列表中的项目被选择，函数执行：

调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
定义发送到服务器的 URL（文件名）
向 URL 添加带有下拉列表内容的参数 (q)
添加一个随机数，以防服务器使用缓存的文件
当触发事件时调用 stateChanged
通过给定的 URL 打开 XMLHTTP 对象
向服务器发送 HTTP 请求

stateChanged() 函数
每当 XMLHTTP 对象的状态发生改变，则执行该函数。
在xmlhttp.readyState==4 && xmlhttp.status==200时，用响应文本填充 txtHint 占位符 txtHint 的内容。

xmlhttp.readyState有5种状态：

请求未初始化（还没有调用 open()）。
请求已经建立，但是还没有发送（还没有调用 send()）。
请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
响应已完成；您可以获取并使用服务器的响应了。

参考：http://www.cnblogs.com/fsjohnhuang/articles/2345653.html

xmlhttp.status的状态码：

100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
500-599 用于支持服务器错误。

参考：http://www.cnblogs.com/lxinxuan/archive/2009/10/22/1588053.html

GetXmlHttpObject() 函数
AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。
上面的代码调用了名为 GetXmlHttpObject() 的函数。
该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。

PHP 页面（getuser.php）

该页面用 PHP 编写，并使用 MySQL 数据库。
其中的代码执行针对数据库的 SQL 查询，并以 HTML 表格返回结果：

 1 <?php
 2 $q=$_GET["q"];
 3 $con = mysql_connect('www.mytest.com', 'root', 'root');
 4 if (!$con)
 5 {
 6 die('Could not connect: ' . mysql_error());
 7 }
 8 mysql_select_db("test", $con);
 9 $sql="SELECT * FROM MyGuests WHERE id = '".$q."'";
10 $result = mysql_query($sql);
11 echo "<table border='1'>
12 <tr>
13 <th>id</th>
14 <th>FirstName</th>
15 <th>LastName</th>
16 <th>email</th>
17 <th>reg_date</th>
18 </tr>";
19 while($row = mysql_fetch_array($result))
20 {
21 echo "<tr>";
22 echo "<td>" . $row['id'] . "</td>";
23 echo "<td>" . $row['firstname'] . "</td>";
24 echo "<td>" . $row['lastname'] . "</td>";
25 echo "<td>" . $row['email'] . "</td>";
26 echo "<td>" . $row['reg_date'] . "</td>";
27 echo "</tr>";
28 }
29 echo "</table>";
30 mysql_close($con);
31 ?>

例子解释：
当查询从 JavaScript 被发送到这个 PHP 页面，会发生：

PHP 打开到达 MySQL 服务器的连接
找到拥有指定姓名的 "user"
创建表格，插入数据，然后将其发送到 "txtHint" 占位符

PHP 和 AJAX MySQL 数据库实例

推荐阅读