HTML页面上的JavaScript可以从XML获取信息吗？

Question

可以说我有一个HTML页面这段JavaScript代码

<script type="text/javascript"> 
$(document).ready(function(){ $('.info2').CreateBubblePopup({ position : 'left', align : 'center', 
innerHtml: 'some text ', 
innerHtmlStyle: { color:'#FFFFFF', 'text align':'center' }, 
themeName: 'all-black', 
themePath: 'images/jquerybubblepopup-themes' }); }); 
</script>   

我想使这个脚本从XML文件，我有我添加了标签为“INFO2”和“一些测试” “info2”叫做< -INFOID->和一个叫做“< -INFODATA->”的标签（没有 - ，只是把它们添加到标签中消失） 所以我用下面的代码连接xml和写脚本

<script type="text/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","scores.xml",false); 
xmlhttp.send(); 
xmlDoc=xmlhttp.responseXML; 

document.write("<script type='text/javascript'>"); 
var x=xmlDoc.getElementsByTagName("GAME"); 
for (i=0;i<x.length;i++) 
    { 
    document.write("$(document).ready(function(){ $('."); 
    document.write(x[i].getElementsByTagName("INFOID")[0].childNodes[0].nodeValue); 
    document.write("').CreateBubblePopup({ position : 'left', align : 'center',"); 
    document.write("innerHtml: '"); 
    document.write(x[i].getElementsByTagName("INFODATA")[0].childNodes[0].nodeValue); 
    document.write("',"); 
    document.write("innerHtmlStyle: { color:'#FFFFFF', 'text-align':'center' },"); 
    document.write("themeName: 'all-black',"); 
    document.write("themePath: 'images/jquerybubblepopup-themes' }); });"); 

    } 
document.write("</script>"); 
</script>  

我不知道如果XML在Javascript中工作我只是给它一个尝试，但它没有工作 所以xml的JavaScript的工作？如果是的话我的代码有什么问题？

我scores.xml文件如下：

<SCORES> 
<GAME> 
<DATE>14.5.2012 12:05</DATE> 
<TIME>FT</TIME> 
<HOMETEAM>Team1</HOMETEAM> 
<SCORE>4 - 0</SCORE> 
<AWAYTEAM>Team2</AWAYTEAM> 
<OTHER> </OTHER> 
<INFO><![CDATA[<img class='info1' src='images/info.png' width='14px' height='14px' border='0' />]]></INFO> 
<INFOID>info1</INFOID> 
<INFODATA>FIRST BUBBLE</INFODATA> 
</GAME> 

<GAME> 
<DATE>14.5.2012 12:05</DATE> 
<TIME>FT</TIME> 
<HOMETEAM>Team3</HOMETEAM> 
<SCORE>2 - 0</SCORE> 
<AWAYTEAM>Team4</AWAYTEAM> 
<OTHER> </OTHER> 
<INFO><![CDATA[<img class='info2' src='images/info.png' width='14px' height='14px' border='0' />]]></INFO> 
<INFOID>info2</INFOID> 
<INFODATA>SECOND BUBBLE</INFODATA> 
</GAME> 
</SCORES> 

其它标签我用他们的网页... 最后2个标签来配置这个脚本是一个弹出了一个可爱的小泡泡IMG

Answer 1

查看jQuery的XML解析器：http://api.jquery.com/jQuery.parseXML/。

它还会做AJAX检索你并能在马上实际上处理XML：http://api.jquery.com/jQuery.get/

实例下（未经验证的）：

<script type="text/javascript"> 
$(document).ready(function () { 
    // Get the XML data from your file 
    $.get('demo.xml', function(data) { 

     // Because we've given jQuery the XML datatype, we can jump straight to finding the element.  
     $(data).find('GAME').each(function () { 

      // The current object now holds a single "GAME" - find the elements we need 
      var game_id = $(this).find('INFOID').text(); 
      var game_info = $(this).find('INFODATA').text(); 

      // Create the popup. 
      $('.'+game_id).CreateBubblePopup({ 
        position : 'left', align : 'center', 
        innerHtml: game_info, 
        innerHtmlStyle: { color:'#FFFFFF', 'text align':'center' }, 
        themeName: 'all-black', 
        themePath: 'images/jquerybubblepopup-themes' 
      }); 
     }); // end of each 
    }, 'xml'); // The 'xml' tells jQuery to expect XML back from the request 
}); 
</script>