Javascript/XML DOM不工作？

我遇到了一些XML DOM問題。（之前從未真正使用過，但我認爲我會拍攝一張照片。） - 我將它用於我的網站上的投資組合（以及其他包含內容的網頁），將縮略圖與鏈接，標題，說明等鏈接起來。Javascript/XML DOM不工作？

無論如何，我不完全確定問題是什麼，但它不起作用。 /：

的.js

function loadXMLDoc(dname) 
{ 
if (window.XMLHttpRequest) 
    { 
    xhttp=new XMLHttpRequest(); 
    } 
else 
    { 
    xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xhttp.open("GET",dname,false); 
xhttp.send(); 
return xhttp.responseXML; 
} 

function imageList(value) 
{ 
    xmlDoc=loadXMLDoc("uploads.xml"); 
    x=xmlDoc.getElementsByTagName(value)[0].childNodes; 
    for (i=0;i<x.length;i++) 
    { 
     document.write("<h1>"+x[i].getAttribute('id')+"</h1>"); 
     document.write("<ul style='list-style-type: none;'>"); 
     y=x[i].childNodes; 
     for(j=0;j<y.length;j++) 
     { 
      document.write("<li style='background: url("+y[j].getAttribute('thumbnail')+") no-repeat center center;'><a href='#'></a></li>"); 
     } 
     document.write("</ul>"); 
    } 
}

的.html

<html> 
    <head> 
     <script type="text/javascript" src="js/xmldata.js"></script> 
    </head> 
    <body> 
     <script> 
      imageList("portfolio"); 
     </script> 
    </body> 
</html>

的.xml

<?xml version="1.0" encoding="UTF-8"?> 
<portfolio> 
    <year id="2014"> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
    </year> 
    <year id="2013"> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
    </year> 
    <year id="2012"> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
    </year> 
    <year id="2011"> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
     <image thumbnail="" href="" desc=""></image> 
    </year> 
</portfolio>

來源

2014-01-21 Kyron

可能重複的[如何從AJAX調用返回響應？]（http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call） – SomeKittens

究竟是什麼不起作用？ – VladL

看起來你只是沒有處理Text nodes。從你的代碼在JSFiddle中做一個完美的演示有點棘手（JSFiddle不允許document.write，它的AJAX回聲是一個POST服務，但有一點jQuery，你可以隱藏這些細節（是的，我明白我對jQuery ）和着眼於使給呈現代碼（demo）這些簡單的改變：

第一相加這兩個輔助函數（來自here）：

function is_ignorable(nod) 
{ 
    return (nod.nodeType == 8) || // A comment node 
     ((nod.nodeType == 3) && is_all_ws(nod)); // a text node, all ws 
} 

function is_all_ws(nod) 
{ 
    // Use ECMA-262 Edition 3 String and RegExp features 
    return !(/[^\t\n\r ]/.test(nod.data)); 
}

成功回調可以被改寫爲：

function imageList(value) 
{ 
    xmlDoc=loadXMLDoc("uploads.xml"); 
    x=xmlDoc.getElementsByTagName(value)[0].childNodes; 
    for (i=0;i<x.length;i++) 
    { 
     if(!is_ignorable(x[i])) { 
     document.write("<h1>"+x[i].getAttribute('id')+"</h1>"); 
     document.write("<ul style='list-style-type: none;'>"); 
     y=x[i].childNodes; 
     for(j=0;j<y.length;j++) 
     { 
      if(!is_ignorable(y[j])) { 
      document.write("<li style='background: url("+y[j].getAttribute('thumbnail')+") no-repeat center center;'><a href='#'></a></li>"); 
      } 
     } 
     document.write("</ul>"); 
     } 
    } 
}

來源

2014-01-22 00:17:39

非常感謝！（：完美工作。 – Kyron

Javascript/XML DOM不工作？

回答

相關問題