效果如图：
代码和（一）差不多，先上first.html代码
<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();
//设置请求响应的URL
var uri = "second.jsp?id="+id;
//打开与服务器资源的连接
xmlrequest.open("GET", uri, true);
//设置处理响应的回调函数
xmlrequest.onreadystatechange = processResponse;
//发送请求
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(op);
}
}
else
{
//页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
</script>
</body>
GET格式：
var uri = "second.jsp?id="+id; //打开与服务器资源的连接 xmlrequest.open("GET", uri, true); //设置处理响应的回调函数 xmlrequest.onreadystatechange = processResponse; //发送请求 xmlrequest.send(null);
注意到GET方式如果要发送请求参数，应将请求参数转化成查询字符串，并追加到请求的URL之后
假如在xmlrequest.send()中换成send（“id=”+id）则有异常，只能将参数加到url后面
而POST方式：
var uri = "second.jsp";
//设置以POST方法发送请求，并打开连接
xmlrequest.open("POST", uri, true);
//设置POST请求的请求头
xmlrequest.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
//确定XMLHttpRequest对象的状态改变时的回调函数
xmlrequest.onreadystatechange = processResponse;
//发送请求，在发送请求时发送请求参数
xmlrequest.send("id="+id);
可以看到post方式与GET方式的不同，必须有请求头，而请求参数既可以跟get一样在url后，也可以像上面一样在send（）函数里