使用 XML 在 HTML 中实现图像

Question

好的，我正在设计一个使用 HTML、CSS 和（希望如此）XML 的网站。我正在尝试将 XML 用于网站的特定部分，但我在以我想要的方式合并 XML 时遇到了一些困难。

我的问题是我正在尝试找到一种方法来使用 XML 读取图像（或图像目录）并使用调用命令通过 for 循环将其打印到我的 HTML 网站上，因此我可以简单地将数据输入到带有属性的 XML 文件，并为网站上的任何页面轻松调用它们。我还希望最终添加一个搜索栏，并且有人告诉我，由于可以添加属性和元素，XML 将是一个很棒的附加组件。 编辑：我认为我使用了错误的命令将图像拉入 XML。任何有关这方面的信息都会有所帮助。

注意：为简单起见，我已将 HTML 和 XML 的编码简化为我遇到的问题。

这是我的 XML 文件

<inventory>
<shirt>
    <picture><image href="tank_top.jpg"/></picture>
    <name>Tank Top</name>
    <description>This is a tank top. </description>
    <price>$12.00</price>
</shirt>
<shirt>
    <picture><image href="sweater.jpg"/></picture>
    <name>Sweater</name>
    <description>This is a sweater. </description>
    <price>$15.00 </price>
</shirt>
<shirt>
    <picture><image href="hoodie.jpg"/></picture>
    <name>Hoodie</name>
    <description>This is a hoodie. </description>
    <price>$17.00 </price>
</shirt>
<shirt>
    <picture><image href="long_sleeve_shirt.jpg"/></picture>
    <name>Long-Sleeve</name>
    <description>This is a long-sleeve. </description>
    <price>$20.00 </price>
</shirt>
<shirt>
    <picture><image href="t-shirt.jpg"/></picture>
    <name>T-Shirt</name>
    <description>This is a t-shirt. </description>
    <price>$50.00 </price>
</shirt>
</inventory>

这是我的 Javascript

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","Example.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var x=xmlDoc.getElementsByTagName("shirt");
 for (i=1;i<x.length+1;i++)
  {
   document.write(x[i].getElementsByTagName("picture")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
  }

我什至尝试使用下面的代码代替图片的第一个“document.write”命令，

var img=new Image(); img.src='插入图片标题_这里'; document.body.appendChild(img);

但这只会在其他所有内容加载后将我的图像发送到页面底部。每次打印出其余信息时，我都需要加载不同的标题图像（即我需要打印图片，然后是名称，然后是描述，然后是价格。然后是一张不同的图片以及存储在XML 文件）。

TL;DR: 我需要通过 JS 以 HTML 格式输出一个图像，该图像读取一个 XML 文件。而且我需要 XML 文件来提取图像，因为我有嵌套的打印命令的 for 循环。上面是简化的 XML 和 HTML 代码。 寻找了几个小时的解决方案。没有发现任何有用的东西。

注意：我才上高中，虽然我已经编码了几年（主要使用 Java 并涉足 HTML），但我对编码世界的其他部分还是很陌生.. . 实际上我今天才刚刚开始学习使用 XML。任何和所有的描述都会非常有帮助。请包括您认为可能有帮助的任何网络资源甚至书籍。非常感谢！

Answer 1

尝试将您的内容放在表格中。还将您的for 循环放入onload 或onreadystatechange 对象的xmlhttp 属性中，例如：

xmlhttp.onload = function() {
    //for loop here...
};
//and then send the request
xmlhttp.send();

并使用xmldoc.documentElement.getElementsByTagName 而不是xmldoc.getElementsByTagName...

更新：避免使用全局变量并使用var 来声明变量。