从 javascript 加载 xml答案

【问题标题】：Load xml from javascript从 javascript 加载 xml
【发布时间】：2012-01-05 03:44:58
【问题描述】：

对 XML 完全陌生，我在这个非常简单的目标上苦苦挣扎了太久（尽管我可以在 Internet 上找到足够的信息）。只需要这个 xml 文件中的值：

<?xml version="1.0" encoding="UTF-8"?>
<materials>
    <basic>
        <uurloon>10</uurloon>
        <setloon>100</setloon>
    </basic>
    <extra>
        <geluid>150</geluid>
        <ledset>35</ledset>
        <strobo>20</strobo>
        <laser>50</laser>
    </extra>
</materials>

在 javascript 中，我使用此代码来获取 xml 数据：

// load xml file
if (window.XMLHttpRequest) {
   xhttp = new XMLHttpRequest();
} else {    // IE 5/6
   xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xhttp.open("GET", "pricing.xml", false);
xhttp.send();
xmlDoc = xhttp.responseXML; 

var uurloon = xmlDoc.getElementsByTagName("uurloon")[0].childNodes[0].text;
var setloon = xmlDoc.getElementsByTagName("setloon")[0].childNodes[0].text
alert('end');

但没有结果，因为我没有看到警报..

【问题讨论】：

你仅限于 javascript 吗？还是你也有php？

标签： javascript xml xmlhttprequest

【解决方案1】：

您的服务器未返回适当的 Content-Type 标头。 responseXML 属性仅在服务器返回 Content-Type: text/xml 或类似的 +xml 标头时才有效。

See Ajax Patterns:

服务只需要输出一个 XML Content-type header...

From the w3c:

如果最终的 MIME 类型不为 null，则 text/xml、application/xml 和不以 +xml 结尾 [...] 返回 null。

如果您无权访问服务器并且无法更改Content-Type 标头，请使用overrideMimeType 函数强制XMLHttpRequest 将响应视为text/xml：

if (window.XMLHttpRequest) {
   xhttp = new XMLHttpRequest();
} else {    // IE 5/6
   xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xhttp.overrideMimeType('text/xml');

xhttp.open("GET", "pricing.xml", false);
xhttp.send(null);
xmlDoc = xhttp.responseXML;

var uurloon = xmlDoc.getElementsByTagName("uurloon")[0].childNodes[0].text;
var setloon = xmlDoc.getElementsByTagName("setloon")[0].childNodes[0].text
alert('end');

引用：http://blog-rat.blogspot.com/2010/11/xmlhttprequestresponsexml-returns-null.html

【讨论】：

【解决方案2】：

我用一个名为 price.xml 的文件做了一个简单的测试：

<?xml version="1.0" encoding="UTF-8"?>
<materials>
    <basic>
        <uurloon>10</uurloon>
        <setloon>100</setloon>
    </basic>
    <extra>
        <geluid>150</geluid>
        <ledset>35</ledset>
        <strobo>20</strobo>
        <laser>50</laser>
    </extra>
</materials>

以及带有这段代码的html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head> 
<body onload="init()">
<p>Hola</p>
<script>
function init(){
    // load xml file
    if (window.XMLHttpRequest) {
       xhttp = new XMLHttpRequest();
    } else {    // IE 5/6
       xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhttp.open("GET", "price.xml", false);
    xhttp.send();
    xmlDoc = xhttp.responseXML; 

    var uurloon = xmlDoc.getElementsByTagName("uurloon")[0].childNodes[0].textContent;
    var setloon = xmlDoc.getElementsByTagName("setloon")[0].childNodes[0].textContent;
    console.log(uurloon,setloon); //give me "10 100"
}
</script>
</body>
</html>

在为我工作。我认为您失败了，因为您调用的是.text 属性而不是.textContent。

【讨论】：

【解决方案3】：

// load xml file
if (window.XMLHttpRequest) {
   xhttp = new XMLHttpRequest();
} else {    // IE 5/6
   xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xhttp.open("GET", "pricing.xml", false);
xhttp.send(null);
xhttp.onreadystatechange = function(){
 if (xhttp.status == "200")
xmlDoc = xhttp.responseXML; 
}
var uurloon = xmlDoc.getElementsByTagName("uurloon")[0].childNodes[0].textContent;
var setloon = xmlDoc.getElementsByTagName("setloon")[0].childNodes[0].textContent;
alert('end');

【讨论】：