정적 ID를 변수로 대체 할 때의 문제

Question

외부 XML 파일에서 정보를로드하고이를 클릭하면 HTML 페이지에 삽입하는 스크립트가 있습니다. 여기

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"); 
    } 
} 
} 

되는 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> 

그러나, 그것은 작동하지 않습니다 - 링크를 클릭 한 후, XML로드 (이 방화범에서 볼 수있다)됩니다, 두 번째 변수 인 target은 state_Change 함수로 들어갈 수 없으므로 실제 조치는 수행되지 않습니다. 이 과 같이 일부 정적 ID (예 : list_sl)로 바뀌면 작동하지만, 슬로베니아와 Horvatia뿐만 아니라 HTML에서도 이러한 링크가 많이 있으므로 변수가 많이 필요합니다.

도움 주셔서 감사합니다.

Answer 1

loadXMLDoc 내의 익명 함수에 state_Change 로직을 넣습니다.

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); 
    } 
} 

이의 단점은 함수의 새로운 인스턴스가 호출 될 때마다 loadXMLDoc을 인스턴스화되고있는 것입니다.

Answer 2

XMLHttpRequest과 target 모두에 전역 변수를 사용하는 경우 병렬 요구 (예 : XMLHttpRequest이 반환되기 전에 사용자가 다른 링크를 클릭)를 지원할 수 없습니다. 당신이 이벤트의 target 속성을 사용하여 XMLHttpRequest 인스턴스에 액세스 할 수 있습니다 state_Change 함수에서

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

을 : 그것을 구현하는 한 가지 방법은 loadXMLDoc 기능의 범위에 xmlhttp 변수를 유지하고 XMLHttpRequest 객체에 속성으로 당신의 target을 추가하는 것입니다 :

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

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