效果如圖：
代碼和（一）差不多，先上first.html代碼
<body>
<select name="first" id="first" size="3"
οnchange="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);假如在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（）函數裏