ajax接受json響應

一、顯示頁面（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);