码迷,mamicode.com
首页 > Web开发 > 详细

ajax接受json响应

时间:2017-11-22 21:52:59      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:2.x   form   auth   tip   封装   encode   status   请求   ajax   

一、显示页面(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响应

标签:2.x   form   auth   tip   封装   encode   status   请求   ajax   

原文地址:http://www.cnblogs.com/excellencesy/p/7881077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!