急！！！！PHP+mysql 2级联动下拉

MYSQL数据库是这样的：
area_id  parent_id  area_name
110000      0        北京
110101      110000  东城区
110102      110000  西城区
110103      110000  崇文区
230000      0        黑龙江省
230100      230000  哈尔滨市
230102      230000  道里区
230103      230000  南岗区
310000        0      上海市
310101      310000  黄浦区
310103      310000  卢湾区
......      ......  ..... 求一个2级联动下拉菜单！我用JS写了一个，但是效果不好要等10多秒，才能用！求高手帮我写一个！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

大哥主要我AJAX不会用！在晚上看了一点资料都看不懂！
<script   language   =   "JavaScript">
  var   onecount;
  onecount=0;
  subcat = new Array();
  <?
  mysql_connect("localhost","root","");
  mysql_select_db("tt");
  $sql="select * from area_district where parent_id !='0'";
  $result = mysql_query($sql);
  $count = 0;
  while($res = mysql_fetch_row($result))
  {
  ?>
  subcat[<?echo$count;?>] = new Array("<?echo$res[2];?>","<?echo$res[1];?>");
  <?
  $count++;
  }
  echo   "onecount=$count";
  ?>



  function   changelocation(locationid)
          {
          document.myform.ctype.length   =   0;
          var locationid=locationid;
          var i;
          for(i=0;i<onecount;i++)
          {
           if(subcat[i][1] == locationid)
           {
           document.myform.ctype.options[document.myform.ctype.length]  =  new Option(subcat[i][0],subcat[i][0]);
            }
          }
          }
  </script>
<form   method="post"   name="myform"   action="">
<select   name="type" onChange="changelocation(document.myform.type.options[document.myform.type.selectedIndex].value)">
<option   selected   value="">��</option>
<?
    $conn=mysql_connect("localhost","root","");
    $sql1="select * from area_district where parent_id='0';";
    $rueslt= mysql_db_query('tt',$sql1);
    while($res1=mysql_fetch_row($rueslt))
    {
?>
<option value="<?echo$res1[0];?>"><?echo$res1[2];?></option>
<?
    }
?>
</select>
<select   name="ctype">
<option   selected   value="">��</option>
</select>
  </form>  这是用JS 写的效果不好！
我刚才把数据库优化一下！效果还好！但是我还是想知道AJAX怎么实现了！最好说一下原理!小弟在这边谢过！
<html>
function createRequest(){
    var request;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
    } else if(window.ActiveXObject){
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return request;
}
function getCity(){
    var ajax=createRequest();
    var url = "getCity.php";
    ajax.open("GET",url,true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updatePageCity(ajax.responseText);
        }
    }
    ajax.send(null);
}
function updatePageCity(str){
   var str1 = new Array();
if(str!=""){
    str1 =str.split("|");
document.getElementById("team").options[0]=new Option("-请选择城市-", " ");
for(var i=0;i<str1.length-1;i++){
document.getElementById("city").options[i+1]=new Option(str1[i],str1[i]);
}
}
}//获取地区
function getDiqu(){
    var ajax=createRequest();
    var city=ocument.getElementById("city").value;
    var url = "getDiqu.php?city="+city;
    ajax.open("GET",url,true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updatePageDiqu(ajax.responseText);
        }
    }
    ajax.send(null);
}
function updateDiqu(str){
   var str1 = new Array();
     if(str!=""){
    str1 =str.split("|");
for(var i=0;i<str1.length-1;i++){
document.getElementById("diqu").options[i]=new Option(str1[i],str1[i]);
}
}
}<body onload="getCity()">
<select name="city" id="city" onchange="getDiqu()"></select>
<select name="diqu" id="diqu"></select>
</body>
</html>getCity.php$sql="select area_name from t";
$rs=mysql_query($sql);
$i=0;
$str='';
while($rw=mysql_fetch_row($rs)){
  $str. =$rw[$i]."|";
}
echo $str;
getDiqu.php$city=$_GET['city'];
$sql="select area_name from t where parent_id in(select area_id from t where area_name='$city') ";
$rs=mysql_query($sql);
$i=0;
$str='';
while($rw=mysql_fetch_row($rs)){
  $str. =$rw[$i]."|";
}
echo $str;
晕，上面AJAX改下：
<html>
<script>
function createRequest(){
    var request;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
    } else if(window.ActiveXObject){
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return request;
}
function getCity(){
    var ajax=createRequest();
    var url = "getCity.php";
    ajax.open("GET",url,true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updatePageCity(ajax.responseText);
        }
    }
    ajax.send(null);
}
function updatePageCity(str){
   var str1 = new Array();
    if(str!=""){
        str1 =str.split("|");
        document.getElementById("team").options[0]=new Option("-请选择城市-", " ");
        for(var i=0;i<str1.length-1;i++){
document.getElementById("city").options[i+1]=new Option(str1[i],str1[i]);
    }
}
}//获取地区
function getDiqu(){
    var ajax=createRequest();
    var city=ocument.getElementById("city").value;
    var url = "getDiqu.php?city="+city;
    ajax.open("GET",url,true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updatePageDiqu(ajax.responseText);
        }
    }
    ajax.send(null);
}
function updateDiqu(str){
   var str1 = new Array();
     if(str!=""){
        str1 =str.split("|");
        for(var i=0;i<str1.length-1;i++){
document.getElementById("diqu").options[i]=new Option(str1[i],str1[i]);
    }
}
}</script><body onload="getCity()">
<select name="city" id="city" onchange="getDiqu()"></select>
<select name="diqu" id="diqu"></select>
</body>
</html>
老大问一下！ HTML页面上的2 var url = "getCity.php";和 var url = "getDiqu.php?city="+city;这2个URL怎么写呀？我写了实际地址怎么没反应？
你有没有建立getCity.php和getDiqu.php这两个文件呢？
<html>
<script>
function createRequest(){
    var request;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
    } else if(window.ActiveXObject){
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return request;
}
function getCity(){
    var ajax=createRequest();
    var url = "getCity.php";
    ajax.open("GET",url,true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updatePageCity(ajax.responseText);
        }
    }
    ajax.send(null);
}
function updatePageCity(str){
  alert(str);//看弹出来的信息
   var str1 = new Array();
    if(str!=""){
        str1 =str.split("|");
        document.getElementById("team").options[0]=new Option("-请选择城市-", " ");
        for(var i=0;i<str1.length-1;i++){
document.getElementById("city").options[i+1]=new Option(str1[i],str1[i]);
    }
}
}//获取地区
function getDiqu(){
    var ajax=createRequest();
    var city=ocument.getElementById("city").value;
    var url = "getDiqu.php?city="+city;
    ajax.open("GET",url,true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status==200) {
                updatePageDiqu(ajax.responseText);
        }
    }
    ajax.send(null);
}
function updateDiqu(str){
  alert(str);//看弹出来的信息是什么？
   var str1 = new Array();
     if(str!=""){
        str1 =str.split("|");
        for(var i=0;i<str1.length-1;i++){
document.getElementById("diqu").options[i]=new Option(str1[i],str1[i]);
    }
}
}</script><body onload="getCity()">
<select name="city" id="city" onchange="getDiqu()"></select>
<select name="diqu" id="diqu"></select>
</body>
</html>
getCity.php
$sql="select area_name from t";
$rs=mysql_query($sql);
$i=0;
$str='';
while($rw=mysql_fetch_row($rs)){
  $str. =$rw[$i]."|";
}
echo $str;
getDiqu.php$city=$_GET['city'];
$sql="select area_name from t where parent_id in(select area_id from t where area_name='$city') ";
$rs=mysql_query($sql);
$i=0;
$str='';
while($rw=mysql_fetch_row($rs)){
$str. =$rw[$i]."|";
}
echo $str;
我想<body onload="getCity()"> 这段根本没有执行getCity()这个方法！
getCity.php 这个变时打印出每个省但是AJAX怎么样吧这个打印的东西传到下拉菜单中呢？
是通过这个边？var ajax=createRequest();var url = "getCity.php";ajax.open("GET",url,true); 能不能解释下呀！AJAX 不懂！大哥不好意思了。老是纠缠你！