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>