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