省市聯動ajax代碼

<script type="text/javascript">
function createXmlHttpRequest() {


try {
return new XMLHttpRequest();
} catch (e) {
try {


return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}


}


window.onload = function() {


/*
 發送異步請求
*/


var xmlHttp = createXmlHttpRequest();


xmlHttp.open("GET", "<c:url value='/ProvinceServlet'/>", true);


xmlHttp.send(null);


xmlHttp.onreadystatechange = function() {


if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200)


var proArray = eval("(" + xmlHttp.responseText + ")");


for (var i = 0; i < proArray.length; i++) {


var pro = proArray[i];


var option = document.createElement("option");


option.value = pro.pid;//這裏賦id爲了好處理


var textNode = document.createTextNode(pro.pname);


option.appendChild(textNode);


document.getElementById("province").appendChild(option);


}


}


};


var province = document.getElementById("province");


province.onchange = function() {


var xmlHttp = createXmlHttpRequest();
xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);


xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded ");
//關鍵是怎麼知道這個this就是option呢，這個this到底指的是什麼
xmlHttp.send("pid=" + this.value);


xmlHttp.onreadystatechange = function() {


if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {


var c = document.getElementById("city");


var cOption = c.getElementsByTagName("option");


while (cOption.length > 1) {


c.removeChild(cOption[1]);


}


var cityPro = eval("(" + xmlHttp.responseText + ")");


for (var i = 0; i < cityPro.length; i++) {


var city = cityPro[i];


var option = document.createElement("option");


option.value = city.cid;


var textNode = document.createTextNode(city.cname);


option.appendChild(textNode);


c.appendChild(option);


}


}


};


};


};
</script>