first.html
second.jsp
-----------------
first.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 获取XMLHttpRuquest所有请求头 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.leegang.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<select name="first" id="first" size="3"
onchange="change(this.value);">
<option value="1" selected="selected">中国</option>
<option value="2">美国</option>
<option value="3">日本</option>
</select>
<select id="second" size="3"></select>
<script type="text/javascript">
//定义了XMLHttpRequest对象
var xmlrequest;
//完成XMLHttpRequest对象的初始化
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
//DOM 2浏览器
xmlrequest = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// IE浏览器
try
{
xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
}
//事件处理函数，当下拉列表选择改变时，触发该函数
function change(id)
{
//初始化XMLHttpRequest对象
createXMLHttpRequest();
//设置处理响应的回调函数
xmlrequest.onreadystatechange = processResponse;
//打开与服务器资源的连接
xmlrequest.open("GET", "second.jsp?id=" + id);
//发送请求
xmlrequest.send(null);
}
//定义处理响应的回调函数
function processResponse()
{
//响应完成且响应正常
if (xmlrequest.readyState == 4)
{
if (xmlrequest.status == 200)
{
//将服务器相应以$符号分隔成字符串数组
var cityList = xmlrequest.responseText.split("$");
//获取用于显示菜单的下拉列表
var displaySelect = document.getElementById("second");
//将目标下拉列表清空
displaySelect.innerHTML = null;
//以字符串数组的每个元素创建option，并将这些选项添加到下拉列表中
for (var i = 0 ; i < cityList.length ; i++)
{
//创建一个<option.../>元素
var op = document.createElement("option");
op.innerHTML = cityList[i];
//将新的选项添加到列表框的最后
displaySelect.appendChild(option);
}
}
else
{
//页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
</script>
</body>
</html>
------------------------------------------------------------
second.jsp
<%@ page contentType="text/html; charset=GBK" language="java" %>
<%
//从服务器获取id参数
int id = Integer.parseInt(request.getParameter("id"));
//根据id的值，确定需要返回给客户端的信息，返回客户端的城市信息以$符号隔开
switch(id)
{
case 1:
%>
上海$广州$北京
<%
break;
case 2:
%>
华盛顿$纽约$加洲
<%
break;
case 3:
%>
东京$大板$福冈
<%
break;
}
%>
---------------------------------------
first模拟为客户端代码，second为服务器代码，first向second请求参数，点击每个国家名字，右边的select会显示请求数据，我的代码都是照书打的，对到后来，发现没什么错误，但是点击国家，右边就是显示不出服务器数据，不知道那里错了！
请高手回答。
second.jsp
-----------------
first.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 获取XMLHttpRuquest所有请求头 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.leegang.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<select name="first" id="first" size="3"
onchange="change(this.value);">
<option value="1" selected="selected">中国</option>
<option value="2">美国</option>
<option value="3">日本</option>
</select>
<select id="second" size="3"></select>
<script type="text/javascript">
//定义了XMLHttpRequest对象
var xmlrequest;
//完成XMLHttpRequest对象的初始化
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
//DOM 2浏览器
xmlrequest = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// IE浏览器
try
{
xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
}
//事件处理函数，当下拉列表选择改变时，触发该函数
function change(id)
{
//初始化XMLHttpRequest对象
createXMLHttpRequest();
//设置处理响应的回调函数
xmlrequest.onreadystatechange = processResponse;
//打开与服务器资源的连接
xmlrequest.open("GET", "second.jsp?id=" + id);
//发送请求
xmlrequest.send(null);
}
//定义处理响应的回调函数
function processResponse()
{
//响应完成且响应正常
if (xmlrequest.readyState == 4)
{
if (xmlrequest.status == 200)
{
//将服务器相应以$符号分隔成字符串数组
var cityList = xmlrequest.responseText.split("$");
//获取用于显示菜单的下拉列表
var displaySelect = document.getElementById("second");
//将目标下拉列表清空
displaySelect.innerHTML = null;
//以字符串数组的每个元素创建option，并将这些选项添加到下拉列表中
for (var i = 0 ; i < cityList.length ; i++)
{
//创建一个<option.../>元素
var op = document.createElement("option");
op.innerHTML = cityList[i];
//将新的选项添加到列表框的最后
displaySelect.appendChild(option);
}
}
else
{
//页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
</script>
</body>
</html>
------------------------------------------------------------
second.jsp
<%@ page contentType="text/html; charset=GBK" language="java" %>
<%
//从服务器获取id参数
int id = Integer.parseInt(request.getParameter("id"));
//根据id的值，确定需要返回给客户端的信息，返回客户端的城市信息以$符号隔开
switch(id)
{
case 1:
%>
上海$广州$北京
<%
break;
case 2:
%>
华盛顿$纽约$加洲
<%
break;
case 3:
%>
东京$大板$福冈
<%
break;
}
%>
---------------------------------------
first模拟为客户端代码，second为服务器代码，first向second请求参数，点击每个国家名字，右边的select会显示请求数据，我的代码都是照书打的，对到后来，发现没什么错误，但是点击国家，右边就是显示不出服务器数据，不知道那里错了！
请高手回答。
JSP里面加System.out.println，自己看问题出在哪里另外，是加州
var op = document.createElement("option");
op.innerHTML = cityList[i];
//将新的选项添加到列表框的最后
displaySelect.appendChild(op);