一.使用ajax有以下固定步骤：
1, 从页面触发Ajax的操作.
2, 定义创建XMLHttpRequest对象的方法(建立一个XMLHttpRequest对象),也是就var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//根据浏览器的不同有差异
3, 然后建立一个函数，用来指定载入的数据来源！
3.1,使用open方法打开数据来源(也就是我们要传入参数到DB查询的信息)，但不意味着一定要发送数据显示！
3.2,用onreadystatechange来指定数据装载的方式.(onreadystatechange是一个异步响应事件，就是因为它，ajax才那么完美.onreadystatechange事件中可以接收到服务器传回来的数据，通过分析和利用这些数据从而完成客户端的相应操作，onreadystatechange中的第三个参数你设为true，表示启用xmlHttp的异步通讯模式，这时你发出send命令后，浏览器还可以进行其它操作，如果设为false，浏览器就会进入无响应状态，直到xmlHttp接收完毕服务器传回的数据)
3.3,使用send发送数据！
4, 处理Ajax回传的数据(xml或text类型),使数据能按你的意愿现实在客户端.
5, 回显到页面给用户.
二,在网上看了一些资料,自己修改后,小小的整理主要出核心代码+精彩注释,全部贡献:
index.php 客户端显示,包括执行AJAX的过程
data.php 数据处理,查询数据,并回显
/*************************index.php**********************/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--------------------------------------------------------------
--省的字段是：province
--市的字段是：city
--县的字段是：area
--------------------------------------------------------------------------->
<script type="text/javascript">
/********
*定义创建XMLHttpRequest对象的方法
*
**************************************/
var xmlHttp;//声明变量
var requestType="";//声明初始类型为空
function createXMLHttpRequest()//定义创建一个跨浏览器函数的开头
{
if(window.ActiveXObject)//ActiveXObject对象到找到的时候返回的是真，否则是假
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//这个是使用IE的方法创建XmlHttp
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();//这个是使用非IE的方法创建XmlHttp
}
}
/***************
*判断服务器响应的事件，如果返回是4则说明交互完成，判断标示头，
*
*************************************************/
function handleStateChange(){//判断返回的一个函数，来确定执行那个的函数
if(xmlHttp.readystate==4)
{//4说明是执行交互完毕0 (未初始化)1 (正在装载)2 (装载完毕) 3 (交互中)4 (完成)
if(xmlHttp.status==200)
{//http的一个报头说明成功找到
if(type=="city")
{//判断查询的类型
showcity();//返回响应的显示
}
else if(type="area")
{//判断响应的查询的类型
showarea();//返回响应的显示
}
}
}
}
/*************************
*城市的一个查询函数
*
*********************************************************/
function queryCity(citycode){//执行程序查询，查询城市的
eval("document.form1.city.length=0;");//eval检查 JScript 代码并执行.
eval("document.form1.city.options.add(new Option('请选择城市','-1'));");
createXMLHttpRequest();//调用创建XmlHttp的函数
type="city";//表示类型，查询城市处理显示的时候需要用到
var url='data.php?provincecode='+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存
xmlHttp.open("GET",url,true);//建立服务器连接，异步传输true
xmlHttp.onreadystatechange=handleStateChange;//处理这个响应所需要的函数
xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因
}
/*********************
*县区的一个查询函数
***********************************************************/
function queryArea(citycode){//查询程序
eval("document.form1.area.length=0;");//eval检查 JScript 代码并执行.
eval("document.form1.area.options.add(new Option('请选择县市','-1'));");
createXMLHttpRequest();//调用创建XmlHttp的函数
type="area";//查询县的
var url="data.php?citycode="+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=handleStateChange;//处理响应的函数名
xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因
}
/********************
*一个显示函数
*********************/
function showcity(){//显示函数
var a = xmlHttp.responseText.split('-');
n = a.length;
var aa = new Array();
for(var i=0;i<n;i++)
{
aa = a[i].split('**');
eval("document.form1.city.options.add(new Option(aa[1],aa[0]));");//eval检查 JScript 代码并执行.
}
}
function showarea(){
var a = xmlHttp.responseText.split('-');
n = a.length;
var aa = new Array();
for(var i=0;i<n;i++)
{
aa = a[i].split('**');
eval("document.form1.area.options.add(new Option(aa[1],aa[0]))");
}
//document.getElementById("area").innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据
}
</script>
</head>
<body>
<?php
$conn = mysql_connect("localhost","root","3661000");//链接数据库
mysql_select_db("novel");//选择数据库
mysql_query("set names 'utf8'");//设定字符集
$sql = "select * from province";//查询数据库province表也就是省
$result = mysql_query($sql);//执行语句赋值给变量
?>
<form name="form1"><!--输出表单头-->
<!--输出下拉列表框，并设定onchange响应事件，把省值传递过去-->
<select id='province' onchange='queryCity(this.options[this.selectedIndex].value)'>
<!--输出下拉列表项值-->
<option value='-1' selected>请选择省份</option>
<?php
while($row=mysql_fetch_row($result)){
//循环循环查询显示省输出数据显示
echo "<option value='$row[1]'>$row[2]</option>\n";
}
?>
</select><!--下拉列表项尾数-->
<select name="city" onchange="queryArea(this.options[this.selectedIndex].value)"></select> <!--显示数据的城市的位置-->
<select name="area"></select><!--显示数据的城市的位置-->
</form><!--表单项结尾-->
</body>
</html>
/***************data.php*****************/
<?php
$provincecode = $_GET['provincecode'];//接收省键值
$citycode = $_GET['citycode'];//接收城市键值
$conn = mysql_connect("localhost","root","3661000");//连接主机
mysql_select_db("novel");//选择数据库
mysql_query("set names 'utf8'");
if($provincecode!=""){//如果传递过来的不为空则执行
$sql = "select * from city where provincecode=$provincecode";//查询城市符合属于上边传递过来的省的字段
$result = mysql_query($sql);//执行SQL查询语句
while($row=mysql_fetch_row($result)){//循环记录集
$xml .= $row[1]."**".$row[2]."-";
}
}
if($citycode!=""){
$sql = "select * from area where citycode=$citycode";
$result = mysql_query($sql);
while($row = mysql_fetch_row($result)){
$xml .=$row[1]."**".$row[2]."-";
}
}
$xml = substr($xml,0,strlen($xml)-1);//消掉最后的"-"
echo $xml; //返回数据做回显
?>
