Ajax 获取 responseXML 形式的响应数据（三）

最新推荐文章于 2024-07-14 03:33:08 发布

李广亮

最新推荐文章于 2024-07-14 03:33:08 发布

阅读量1.6k

点赞数

分类专栏： WEB 开发

本文链接：https://blog.csdn.net/liguangliang_bzu/article/details/49562059

版权

WEB 开发专栏收录该内容

11 篇文章 1 订阅

订阅专栏

在上一章中，简单介绍了Ajax如何获得responseText字符串形式的响应数据，但在web开发中，很多情况下还需要获得responseXML形式的响应数据。

通过一个小例子来看具体代码，如下图：

这里写图片描述

1.0 date.xml：

<?xml version="1.0" encoding="UTF-8"?>
<date>
    <day>
        <hh>今天是十月三十一号</hh>
        <mm>周六</mm>
    </day>
    <day>
        <hh>明天是十一月一号</hh>
        <mm>周天</mm>
    </day>
    <day>
        <hh>后天又要上课了！</hh>
        <mm>星期一</mm>
    </day>
</date>

2.0 date.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Ajax练习</title>

        <script type="text/javascript">

            var xmlHttp;
            var x, xx;
            var txt = "";

            //根据不同浏览器选择相对应的创建XMLHttpRequest对象的方式
            function getXMLHttpRequest() {
                if(window.XMLHttpRequest) { //如果浏览器是 ：Firefox、 Chrome、 Opera、 IE7及以上
                    xmlHttp = new XMLHttpRequest();
                } else {    //如果浏览器是 ：IE5、 IE6等老版本浏览器
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }

            //事件处理
            function hoho() {
                if(xmlHttp.readyState == 4) {
                    if(xmlHttp.status == 200) {
                        //得到所有day标签，存储在x里
                        x = xmlHttp.responseXML.documentElement.getElementsByTagName("day");
                        for(var i=0; i<x.length; i++) {
                            //获取mm标签，存储在xx里
                            xx = x[i].getElementsByTagName("mm");
                            //得到标签里的值
                            txt += xx[0].firstChild.nodeValue;
                        }
                        document.getElementById("div1").innerHTML = txt;
                    }
                }
            }

            //主方法
            function loadXml() {
                getXMLHttpRequest();    //取得XMLHttpRequest对象
                xmlHttp.onreadystatechange = hoho;  //监听onreadystatechange属性值的变化
                xmlHttp.open("post", "date.xml", true); //规定请求类型、请求文件、是否异步
                xmlHttp.send();     //发送请求
            }

        </script>
    </head>

    <body>
        <div id="div1">日期显示：</div>
        <hr>
        <input type="button" value="点击" onclick="loadXml()">
    </body>
</html>