Probleme mit dem Ersetzen einer statischen ID mit Variable

Question

Ich habe ein Skript, das Informationen aus externen XML-Datei lädt und fügt sie in die HTML-Seite beim Klicken ein. Hier ist der Code dieses Skripts:

var xmlhttp; 
function loadXMLDoc(url,target) { 
xmlhttp = null; 
if (window.XMLHttpRequest) { // code for all new browsers 
    xmlhttp = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) { // code for IE5 and IE6 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
if (xmlhttp != null) { 
    xmlhttp.onreadystatechange = state_Change; 
    xmlhttp.open("GET", url, true); 
    xmlhttp.send(null); 
} 
else { 
    alert("Your browser does not support XMLHTTP."); 
} 
} 
function state_Change() { 
if (xmlhttp.readyState == 4) { // 4 = "loaded" 
    if (xmlhttp.status == 200) { // 200 = OK  
     var markers = xmlhttp.responseXML.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
      var name = markers[i].getElementsByTagName("name")[0].firstChild.nodeValue; 
      //etc... 
document.getElementById(target).innerHTML += '<li>' + name + '</li>\n'; 
     } 
    } 
    else { 
     alert("Problem retrieving XML data"); 
    } 
} 
} 

Hier ist der HTML:

<ul id="list_puncts"> 
<li><a href="javascript:;" onclick="loadXMLDoc('./content/geo_points/slovenia.xml','list_sl')">Republika Slovenija (RS)</a> 
<ul id="list_sl"> 
    <!--here should be some info from XML file--> 
    </ul></li> 
    <li><a href="javascript:;" onclick="loadXMLDoc('./content/geo_points/horvatia.xml','list_hr')">Republika Hrvatska (RH)</a> 
    <ul id="list_hr"> 
    <!--here should be some info from XML file--> 
    </ul></li> 
    </ul> 

Aber es funktioniert nicht - nachdem der Link angeklickt wird, XML geladen wird (es in Firebug gesehen werden kann), aber die zweite Variable - target - kann nicht in die state_Change-Funktion gelangen, so dass keine echte Aktion ausgeführt wird. Wenn target in document.getElementById(target).innerHTML durch eine statische ID (wie list_sl) ersetzt wird, funktioniert es, aber ich habe viele dieser Links im HTML, nicht nur Slowenien und Horvatia, so dass die Variable dringend benötigt wird.

Danke für jede Hilfe.

Answer 1

Setzen Sie die state_Change Logik in eine anonyme Funktion innerhalb loadXMLDoc.

function loadXMLDoc(url,target) { 
    // ... code to instantiate XMLHttprequest goes here ... 

    if (xmlhttp != null) { 
     xmlhttp.onreadystatechange = function() { 
      // Your state_Change() logic goes here. 
      // This has access to the variable "target" because 
      // it's within the same enclosing function's scope. 
     }; 
     xmlhttp.open("GET", url, true); 
     xmlhttp.send(null); 
    } 
} 

Der Nachteil dabei ist, dass eine neue Instanz der Funktion jedes Mal instanziiert wird loadXMLDoc genannt wird.

Answer 2

Wenn Sie globale Variablen (sowohl für XMLHttpRequest s und Ihre target s) verwenden, können Sie nicht parallel Anforderungen unterstützen (das heißt ein Benutzer klickt auf einen anderen Link, bevor ein XMLHttpRequest Returns). Eine Möglichkeit, es zu implementieren ist, halten Sie die xmlhttp Variable in Ihrer loadXMLDoc Funktion des Oszilloskops und fügen Sie Ihre target als Eigenschaft zum XMLHttpRequest Objekt:

function loadXMLDoc(url, target) { 
    var xmlhttp; 
    // create XMLHttpRequest instance 
    if(xmlhttp != null) { 
     xmlhttp.onreadystatechange = state_Change; 
     xmlhttp.targetListId = target; 
     xmlhttp.open(); // etc. 
    } 
}; 

In Ihrer state_Change Funktion können Sie Zugriff auf die XMLHttpRequest Instanz mit der target Eigenschaft Veranstaltung :

function state_Change(e) { 
    var xmlhttp = e.target; 
    // check readystate & status 

    var targetList = document.getElementById(xmlhttp.targetListId); 
    targetList.innerHTML = ''; // fill with data, etc. 
};