📄 17-5.jsp
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax级联测试程序.jsp</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is an Ajax Test page">
</head>
<script type="text/javascript">
//创建函数
function createXMLHTTP()
{
var request;
var browser = navigator.appName;
//使用IE，则使用XMLHttp对象
if(browser == "Microsoft Internet Explorer")
{
var arrVersions = ["Microsoft.XMLHttp", "MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"];
for (var i=0; i < arrVersions.length; i++)
{
try
{
//从中找到一个支持的版本并建立XMLHttp对象
request = new ActiveXObject(arrVersions[i]);
return request;
}
catch(exception)
{
//忽略，继续
}
}
}
else
{
//否则返回一个XMLHttpRequest对象
request = new XMLHttpRequest();
if(request.overrideMimeType)
{
request.overrideMimeType('text/xml');
}
return request;
}
}
var req=createXMLHTTP();
//发送请求
function Send_Request(stateVal)
{
var url = "SelectCity?state="+stateVal;
if(req)
{
req.open("GET",url, true);
req.onreadystatechange=processRequest;
req.send(null);
}
}
//处理响应
function processRequest()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
//XML DOM操作，取出city标记节点
var city = req.responseXML.getElementsByTagName("city");
var str=new Array();
for(var i=0;i<city.length;i++)
{
//把XML DOM节点的值读出
str[i]=city[i].firstChild.data;
}
buildSelect(str,document.getElementById("city"));
}
else
{
alert("请求页面发生异常!");
}
}
}
//动态添加级联选项
function buildSelect(str,sel)
{
sel.options.length=0;
for(var i=0;i<str.length;i++)
{
sel.options[sel.options.length]=new Option(str[i],str[i])
}
}
</script>
<body>
<center>
<h3>Ajax级联测试程序</h3>
<hr>
<br>
<form>
<select name="state" onChange="Send_Request(this.value)">
<option value="">省份</option>>
<option value="hn">HUNAN</option>>
<option value="gd">GUANGDONG</option>>
</select>
<select id="city">
<option value="">城市</option>
</select>
</form>
</center>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -