一、顯示頁面（ajax_xml.html）

body部分

<!-- 支持多選的列表框 -->
<select name="first" id="first" size="5" multiple="multiple">
    <option value="1" selected="selected">中國</option>
    <option value="2">美國</option>
    <option value="3">日本</option>
</select>
<!-- 用於發送Ajax請求的按鈕 -->
<input type="button" value="發送" onClick="send();" />
<!-- 被級聯改變的列表框 -->
<select name="second" id="second" size="5" ></select>
 

需要註意的是：multiple="multiple"

size：表示選擇框的寬度
multiple="multiple"：表示允許多選
<script>部分：
1.XHR對象定義
2.數據封裝
3.數據發送到服務器
4.處理服務器的響應
（1）XHR対象定義

// 定義了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) {
                    }
                }
            }
        }

（2）數據發送

1.初始化xhr對象

2.打開與服務器連接（定義發送到的地址）

// 事件處理函數，當下拉列表選擇改變時，觸發該事件
        function change(id) {
            // 初始化XMLHttpRequest對象
            createXMLHttpRequest();
            // 設置請求響應的URL
            var uri = "../jsp/second.jsp"
            // 設置處理響應的回調函數
            xmlrequest.onreadystatechange = processResponse;
            // 設置以POST方式發送請求，並打開連接
            xmlrequest.open("POST", uri, true);
            // 設置POST請求的請求頭
            xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 發送請求
            xmlrequest.send("id=" + id);
        }

（3）處理服務器的響應

// 定義處理響應的回調函數
        function processResponse() {
            // 響應完成且響應正常
            if (xmlrequest.readyState == 4) {
                if (xmlrequest.status == 200) {
                    // 獲取頁面表格體內容
                    var bookTb = document.getElementById("book");
                    // 刪除bookTb原有的所有行
                    while (bookTb.rows.length > 0) {
                        bookTb.deleteRow(bookTb.rows.length - 1);
                    }
                     // 獲取服務器的JSON響應
                    // 並調用eval()函數將服務器響應解析成JavaScript數組
                    var books = eval(xmlrequest.responseText);
                    // 遍歷數組，每個數組元素生成一個表格行
                    for (var i = 0 , len = books.length ; i < len ; i++){  
                    var tr = bookTb.insertRow(i);
                        // 依次創建4個單元格，並為單元格設置內容
                        var cell0 = tr.insertCell(0);
                        cell0.innerHTML = books[i].id;
                        var cell1 = tr.insertCell(1);
                        cell1.innerHTML = books[i].name;
                        var cell2 = tr.insertCell(2);
                        cell2.innerHTML = books[i].author;
                        var cell3 = tr.insertCell(3);
                        cell3.innerHTML = books[i].price;  
                    }
                } else {
                    //頁面不正常
                    window.alert("您所請求的頁面有異常。");
                }
            }
        }

（4）調用數據發送函數（開始數據）

document.body.onload = change(document.getElementById("category").value);

ajax接受json響應