Question

我正在尝试使用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>

Answer 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();  
    }

使用JavaScript显示标记名内的所有节点

1 个答案: