JavaScript的導通元件從一個功能到另一個

Question

這是部分代碼：

function readXmlUsingXPath(i,guid, xpath) { 
    var xmlDoc = loadXML("gameFeed.aspx?guid=" + guid); 
    if (xmlDoc == null) { document.getElementById(guid).innerHTML = "UPDATING"; return } 
    else { }; 
    i.innerHTML = xmlDoc.selectNodes(xpath)[0].text; 
} 

window.onload = function() { 
    for (var i = 0; i < document.getElementsByTagName('jackpot').length; i++) { 
     var guid = document.getElementsByTagName('jackpot')[i].getAttribute('data-g').split('|')[0]; 
     var xpath = document.getElementsByTagName('jackpot')[i].getAttribute('data-g').split('|')[1]; 
     readXmlUsingXPath(document.getElementsByTagName('jackpot')[i],guid, xpath); 
    } 
} 

基本上，我想要做的是從的onload函數傳遞元素，給readXmlUsingXpath功能，所以我可以改變它。 ，但我得到一個未知的運行時錯誤...

的要求，一些樣品的html：

<li> 
<a href="/gamepath/"><span>gameTitle</span> 
<span><jackpot data-g="<%=game.Guid %>|<%=game.GamingProperties.JackpotFeedXpath %>">UPDATING . . .</jackpot></span> 
</a> 
</li> 

Answer 1

好的，所以我修改了一下代碼， 並且使它更簡單。

現在它的工作原理如下。

function loadXMLDoc(guid,xpath,i) { 

    var xmlhttp; 
    if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} 
    else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} 
    xmlhttp.async = true; 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      i.innerHTML = xmlhttp.responseXML.selectNodes(xpath)[0].text; 
     } 
    } 
    xmlhttp.open("GET", "gameFeed.aspx?guid=" + guid, true); 
    xmlhttp.send(); 
} 

var tags = document.getElementsByTagName("pre"); 
for (var i = 0; i < tags.length; i++) { 
    var data = tags[i].getAttribute('data-g').split('|'), guid = data[0], xpath = data[1]; 
    loadXMLDoc(guid,xpath,tags[i]); 
} 

Answer 2

嗯，首先，是的 - 緩存getElementsByTagName()和.getAttribute('data-g').split('|')結果到一個變量：

var myDataG = MyJackpotElement.getAttribute('data-g').split('|'); 

然後，不要處理來自HTML源代碼的XPath，因爲無論如何您都要將​​傳遞給服務器端腳本，請讓服務器腳本處理服務器端的項目（使用XPath） - 所以它會得到你使用GUID :)

加載使服務器端腳本的項目XPath表達式返回你你正在尋找（gameFeed.aspx?guid=）的值，而不是XML，你將進一步在客戶端進行查找價值。

Answer 3

根據Denis的建議重構代碼後代碼是否工作？

即使除了巨大的性能打擊之外，您繼續執行getElementsByTagName的方式的一個主要問題是如果集合因任何原因而更改，則長度可能不再正確，並且您可能正在請求元素9只有8個存在。

此外，更改元素的innerHTML可能會導致瀏覽器關閉。

Side nit：我已將readXmlUsingXPath函數的i參數重命名爲jackpot，這似乎比i稍合適一些。

function readXmlUsingXPath(jackpot, guid, xpath) { 
    var xmlDoc = loadXML("gameFeed.aspx?guid=" + guid); 
    if (xmlDoc == null) { 
     document.getElementById(guid).innerHTML = "UPDATING"; 
     return; 
    } 
    var firstNode = xmlDoc.selectNodes(xpath).item(0); 
    jackpot.innerHTML = firstNode.text; 
} 

window.onload = function() { 
    var jackpots = document.getElementsByTagName('jackpot'); 
    for (var i = 0; i < jackpots.length; i++) { 
     var data = jackpots[i].getAttribute('data-g').split('|'), 
     guid = data[0], 
     xpath = data[1]; 
     readXmlUsingXPath(jackpots[i], guid, xpath); 
    } 
}