Question

用ajax实现省市联动的问题，求教！

看了一个用ajax实现省市联动的例子，表示对ajax中的回调函数部分（function deal(){}）完全看不懂啊，求大神讲解，跪谢！
代码如下：
<script>
function getCities(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
var url='provincePro.php?mytime='+new Date()+"&province="+$('province').value;
xmlhttp.onreadystatechange=deal;
xmlhttp.open('get',url,true);
xmlhttp.send();
}
----------------------------------------------------------------------------------------------
function deal(){ //就是这个函数，从var cities开始每一句都不是很明白……TAT
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var cities=xmlhttp.responseXML.getElementsByTagName('city');
$('city').length=0;
var myOption=document.createElement('option');
myOption.innerText='--市--';
$('city').appendChild(myOption);
for(var i=0;i<cities.length;i++){
var city_name=cities[i].childNodes[0].nodeValue;
var myOption=document.createElement('option');
myOption.value=city_name;
myOption.innerText=city_name;
$('city').appendChild(myOption);
}
}
}
}
----------------------------------------------------------------------------------------------
function $(id){
return document.getElementById(id);
}
</script>
请求页面：

$province=$_GET['province'];

file_put_contents('msg.txt', $province."\r\n",FILE_APPEND);

$info='';
switch ($province) {
case 'henan':
$info="<province><city>郑州</city><city>洛阳</city><city>开封</city><city>焦作</city></province>";
break;
case 'hebei':
$info="<province><city>唐山</city><city>保定</city><city>承德</city><city>沧州</city></province>";
break;

}

echo $info;

Answer 1

<script type="text/javascript">
var areaSelector = new AreaSelector($("#selector"), 1, true);
$(function () {

$("#main-nav li ul li a").each(function () {
if ($(this).html() == " 用户管理 ") {
$("#main-nav li a.nav-top-item").each(function () {
if ($(this).html() == "客户信息") {
$(this).parent().siblings().find("a:eq(0)").removeClass("current");
$(this).addClass("current");
}
});
$(this).parent().siblings().find("a").removeClass('current');
$(this).addClass('current');
}
});

getArea();
});
function getArea() {
$.ajax({
url: "/config/area.xml",
success: function (r) {
areaSelector.setXml($(r).children("area").eq(0));
areaSelector.setLabel("省：", "市：", "区：");
},
complete: function () {
// $("[name ='province']").prepend("<option value=''>请选择</option>");
// $("[name ='province']").html("<option value=''>请选择</option>" + $("[name ='province']").html());
// $("[name ='province'] option:first").attr("selected", true);
}
});

}
</script>

Answer 2

解析xml和创建节点的过程。

追问

⊙﹏⊙ 我也看出来他是一个解析xml和创建节点的过程，但，能详细点么？每一步都做了些什么？

追答

//找到xml的city节点。

var cities=xmlhttp.responseXML.getElementsByTagName('city');
//定义长度
$('city').length=0;
//创建option标签
var myOption=document.createElement('option');
//--市--
myOption.innerText='--市--';
//添加添加子节点
$('city').appendChild(myOption);
for(var i=0;i<cities.length;i++){
//循环取出xml中子节点对应的值
var city_name=cities[i].childNodes[0].nodeValue;
//创建option标签
var myOption=document.createElement('option');
//给每个option的value赋值
myOption.value=city_name;
//给text赋值
myOption.innerText=city_name;
$('city').appendChild(myOption);

追问

主要有两处不明，还望指教（字数限制，就截成图片了）

f

非常感谢！