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);