XMLHttpRequest responseText不包括所有XML

时间:2014-06-05 20:07:04

标签: javascript ajax xml

我是XML的新手,并且已经在w3schools网站上做了一些教程。

我一直在玩这个教程found here. 这与XML found here.

交互

XML的片段:

<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>

现在,当我更改源代码时,输​​出而不是表格只是从xmlhttp对象接收的responseText,这是一个奇怪的事情。每个CD元素都缺少所有TITLE元素 - 显示所有其他元素。但是,在调用responseXML时,您可以访问TITLE元素。

我将源代码更改为:

<!DOCTYPE html>
<html>
<head>
    <script>
        function loadXMLDoc(url) {
            var xmlhttp;
            var txt, x, xx, i;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById('txtCDInfo').innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <div id="txtCDInfo">
        <button onclick="loadXMLDoc('cd_catalog.xml')">
            Get CD info</button>
    </div>
</body>
</html>

我得到了这个输出(为了空间,我只包含了与上面包含的XML片段相对应的输出):

Bob Dylan USA Columbia 10.90 1985 Bonnie Tyler UK CBS Records 9.90 1988

可以看出,每张CD的TITLE都丢失了!

如果我没有清楚地解释自己,那么如果你转到教程链接并将上面的代码复制到他们的编辑器中并单击“提交代码”,然后单击“获取CD信息”按钮,您可以更清楚地看到输出。

是什么导致了这个问题?我的大脑疲惫不堪。

预先感谢您提供任何帮助!

1 个答案:

答案 0 :(得分:0)

问题不在于标题没有被返回,而是你的XML包含一个名为“title”的标签,它在HTML中具有特殊含义 - 即它设置了页面的标题。如果再次运行该代码,您会注意到标签(或浏览器窗口的标题,取决于您的设置)将更改为“Empire Burlesque”,这是标题标签在HTML中应该执行的操作。如果您将代码更改为<title1></title1>,您会看到结果中显示的标题。通常,您不希望将XML直接插入HTML页面,而是解析所需的字段。例如,以下代码将从XML中的第一条记录中获取标题和艺术家,并设置相应的字段:

<!DOCTYPE html>
<html>
    <head>
    <script>
function loadXMLDoc(url)
{
    var xmlhttp;
    var txt,x,xx,i;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById('title').innerHTML = xmlhttp.responseXML.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
            document.getElementById('artist').innerHTML = xmlhttp.responseXML.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
        }
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}
    </script>
    </head>
    <body>

    <div id="txtCDInfo">
        <button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
        <label for="title">Title: </label>
        <div id="title"></div>
        <label for="artist">Artist: </label>
        <div id="artist"></div>
    </div>

    </body>
</html>

一旦你对普通的JavaScript变得更加熟悉,你应该考虑研究类似jQuery的东西 - 它提供了很多功能来进行AJAX调用,解析JSON,XML并操纵你的页面 - 它需要进行大量繁琐的工作。