-1

我正在尝试使用 loadXMLDoc() JavaScript 函数从 XML 文档加载数据，并在单击按钮时将其显示在页面的 DIV 上。到目前为止，我无法在我的 DIV 中获取任何内容，我想加载特定标记名中的所有元素。

这是 XML：

<?xml version="1.0" encoding="UTF-8"?>
<Fruits>
  <Cell>Apples</Cell>
  <Cell>Bananas</Cell>
  <Cell>Strawberries</Cell>
</Fruits>
<Vegetables>
  <Cell>Lettuce</Cell>
   <Cell>Tomatoes</Cell>
  <Cell>Carrots</Cell> 
</Vegetables>

这是JavaScript：

function fruits()  
{
    var  
    xmlhttp;  
    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)  
        {  
            xmlDoc = xmlhttp.responseXML;
            document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits"); 
        }  
        xmlhttp.open("GET","document.xml", true);  
        xmlhttp.send();  
    }

    function vegetables()  
    {
        var  
        xmlhttp;  
        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)  
        {  
            xmlDoc = xmlhttp.responseXML;
            document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables"); 
        }  
        xmlhttp.open("GET","document.xml", true);  
        xmlhttp.send();  
    }

这是HTML：

<button type="button" onclick="fruits()">Fruits</button>
<button type="button" onclick="vegetables()">Vegetables</button>
<div id="food">Please select your favorite</div>
4

1 回答 1

1

您的功能fruits()未正确关闭，您的功能vegetables()已在功能内结束fruits()，

定义函数也是如此xmlhttp.onreadystatechange=function()

fruits()所以这些函数在被调用之前甚至都不可用。

您的代码应如下所示：

function fruits()  
    {
        var  
        xmlhttp;  
        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)  
            {  
                xmlDoc = xmlhttp.responseXML;
                document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits"); 
            }
        }

        //something went wrong here : this code ended up in the function that was to be called when xmlhttp was done with its GET operation.
        //consequently it was never called
        xmlhttp.open("GET","document.xml", true);  
        xmlhttp.send();  
    } // <-- this here bracket was missing

    function vegetables()  
    {
        var  
        xmlhttp;  
        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)  
            {  
                xmlDoc = xmlhttp.responseXML;
                document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables"); 
            }  
        }

        //the same thing happened here

        xmlhttp.open("GET","document.xml", true);  
        xmlhttp.send();  
    }
于 2012-09-28T08:40:35.873 回答