如何使用XML文档更新HTML文本？

Question

我有一些盒子需要显示电影的图像和每个盒子下面需要​​显示电影名称的小盒子。 （见下面的图片链接）

我需要创建一个功能，允许用户使用XML文件和图像路径更新带有新电影图像和电影名称的图像和文本框。

有人可以向我解释这一切是如何运作的吗？我对网络开发很陌生，这对我没有任何意义。

非常感谢，

法里德

Answer 1

这只是一个粗略且未经测试的草图，说明如何做到这一点。

1. 使用AJAX从文件中读取XML数据（让我们说是file.xml）。

   window.onload = function () {
       var xhttp = new XMLHttpRequest();
       xhttp.onreadystatechange = function() {
           if (xhttp.readyState == 4 && xhttp.status == 200) {
               buildHTML(xhttp);
           }
       };
       xhttp.open('GET', 'file.xml', true);
       xhttp.send();
   };
   

2. 循环遍历XML数据并构建HTML。此代码应显示一组图像和文本。

   function buildHTML(xml) {
       var i;
       var xmlDoc = xml.responseXML;
       var programmes = xmlDoc.getElementsByTagName('Programme');
       var html = '';
       // loop through Programme elements
       for (i = 0; i < p.length; i++) { 
           // build the HTML for the image and name text
           html += '<img src="' + programmes[i].getElementsByTagName('imagepath')[0].childNodes[0].nodeValue + '">';
           html += "<span>" + programmes[i].getElementsByTagName('name')[0].childNodes[0].nodeValue + '</span>';       
       }
       // 
       document.body.appendChild(html);
   }
   

3. 使用CSS设置HTML样式。

4. Et voila。

仅供参考我根据此AJAX XML example on w3school建立了我的示例。