问题，用于创建从xml文件检索并以xHTML显示的嵌套列表

Question

目的是在HTML页面中显示url列表。列表从另一个文件(当前为xml格式)检索。

1. Validator:对于JavaScript生成的列表，正确的xHTML标记是什么，并且仍然可以正确验证?我认为原因是[ul]中的javascript代码不被接受。这是正确的吗?还有别的解决办法吗?下面的代码确实产生了预期的列表，但它创建了一个警告(请参见下面的2.)。

   <ul>list A
   <li>item A1</li>
   <li>item A2</li>        
   <ul>List B
       <li>item B1</li>
       <script type="text/javascript">/* <![CDATA[ */
           if (window.XMLHttpRequest)
               {  xmlhttp=new XMLHttpRequest();  } // code for IE7+, Firefox, Chrome, Opera, Safari                        
           else
               {  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }       // code for IE6, IE5    
           xmlhttp.open("GET","/test-code/panorama-list2.xml",false);
           //  xmlhttp.open("GET","/test-code/panorama-list2.xml",true);   //this does not work. xmlDoc is null.
           xmlhttp.send();
           xmlDoc=xmlhttp.responseXML;
           var x=xmlDoc.getElementsByTagName("item");
           for (i=0;i<x.length;i++)
           {   document.write('<li class="menu2">'+'<a href="');
               document.write(x[i].getElementsByTagName('link')[0].childNodes[0].nodeValue);
               document.write('">');
               document.write(x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue);
               document.write('</li>');    }       
           //]]></script>      //This is line: 136
   </ul>
   

2. 上面代码中使用的JavaScript是使用同步方法调用的，因此创建了警告:"使用document.write()写入不平衡树，导致来自网络的数据被解析。了解更多信息https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing

解决方案是使用异步方法，类似于下面放置在节中的代码。解决方案不是简单地在函数xmlhttp中设置"true"。打开(…,……,真正的);。

<script type="text/javascript">//<![CDATA[
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {  xmlhttp=new XMLHttpRequest();  }   // code for IE7+, Firefox, Chrome, Opera, Safari
else
  {  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }     // code for IE6, IE5
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    xmlDoc = xmlhttp.responseXML;
      var txt = "";
      var txt1 = "";
      var x = xmlDoc.getElementsByTagName("item");
      for (i=0;i<x.length;i++)
      {
        txt = x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue + "<br />";
        txt1 = x[i].getElementsByTagName('link')[0].childNodes[0].nodeValue + "<br />";
      }
    {
    document.getElementById("myDiv").innerHTML=txt;
    document.getElementById("myDiv1").innerHTML=txt1;
    }
  }
xmlhttp.open("GET","panorama-list2.xml",true);
xmlhttp.send();
}
//]]></script>

这确实处理了警告。我认为一个解决方案是将这两个代码示例结合起来。

这就是我正在尝试的:变量'txt'和'txt1'检索xml文件的最后一个条目。

如何得到所有的整数?条目的数量变化。

这是一个大问题:

如何使用异步方法创建适当的列表并获得像初始代码示例中那样的结果，其中列表是通过逐步遍历xml文件生成的?毕竟，有没有其他更好或更简单的解决方案?包含列表数据的文件不应该是xHTML标记的一部分。

最后一个使用初始代码示例的实际页面。将鼠标悬停在右上方的按钮上，列表就会显示出来:http://www.halo-photographs.com/2011-Cascata-da-Bernina/index.htm(是的，这是我自己的页面)

Answer 1

你的代码是一个汤。

你需要重构

现在使用jquery

加载你的页面

你应该写点什么

$(document).ready(function(){    
 BeforePrepareList();
}); 
function BeforePrepareList()
{
  var xmlRequest = XmlHttpRequestResolver();
  xmlhttp.onreadystatechange=function()
              {
                   if (xmlhttp.readyState==4 && xmlhttp.status==200)
                   var xmlDoc = xmlhttp.responseXML;
                   // you need parse string response a array or use xslt, the next
                   // is simple for each
                   ListSetting(xmlDoc);
               }
   xmlhttp.open("GET","panorama-list2.xml",true);
   xmlhttp.send();
}
function XmlHttpRequestResolver()
{
  if (window.XMLHttpRequest)
   return xmlhttp=new XMLHttpRequest();  // code for IE7+, Firefox, Chrome, Opera, Safari
  else
   return xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");     // code for IE6, IE5
}
function ListSetting(rawdata)
{     
  ListPopulate($("_PUT_YOUR_LIST_ID_HERE").get(0), rawdata);        
}

function ListPopulate(el, items) {
  el.options.length = 0;
  if (items.length > 0)
     el.options[0] = new Option('All', '');
  // THAT IS AN SIMPLE EXAMPLE, CHANGE FOR CREATE tag <a />
  $.each(items, function (index,item) {
    el.options[el.options.length] = new Option(item.[PROPERTY_A], item.[PROPERTY_B]);
 });    
}
and .....

更多信息在这里

调用XML并转换http://www.ibm.com/developerworks/xml/library/x-ffox3/index.htmlHTTP请求示例http://www.jibbering.com/2002/4/httprequest.html