<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>