AJAX 实例解释
上面的实例包含了一个简单的 HTML 表单以及执行 JavaScript 的链接：
<html>
<head>
<title>shuro' blog</title>
<script src="selectcustomer.js"></script>
</head>
<body>
<form>
请选择一位客户：
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd
</select>
</form>
<p>
<div id="txtHint"><b>客户信息将在此处列出。</b></div>
</p>
</body>
</html>
正如您看到的，这是一个简单的带有一个名为 "customers" 下拉列表的 HTML 表单。
表单以下的段落包含了一个名为 "txtHint" 的 div，这个 div 充当了由 web 服务器所取回的信息的位置占位符。
当用户选择数据时，名为 "showCustomer()" 的函数会被执行。函数的执行会被 "onchange" 事件触发。另外需要说明的是：每当用户改变下拉列表中的值，函数 showCustomer 就会被调用。
下面列出了 JavaScript 代码。
AJAX JavaScript
这是存储在文件 "selectcustomer.js" 中的 JavaScript 代码：
var xmlHttp
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("您的浏览器不支持AJAX！");
return;
}
var url="getcustomer.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
AJAX 服务器页面
这个被 JavaScript 调用的服务器页面，是一个名为 "getcustomer.php" 的简单的 php 文件。
此代码可运行针对某个数据库的 SQL，并以 HTML 表格返回结果
<?php
$link = mysql_connect("localhost","root","123456") or die("用户名密码错误");
mysql_select_db("join_link",$link) or die("未连接上数据库");
$sql = "select * from register where reg_id=".$_GET['q'];
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "regid=".$row['reg_id']."<br />";
echo "regpwd=".$row['reg_pwd']."<br />";
}
echo "sid=".$_GET['sid'];
//echo "<input type='text' />";
mysql_close($link);
?>
本文章出自Shuro's Blog（http://www.shuro.cn），转载请注明出处，谢谢！