0

外部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がロードされますが（Firebugで確認できます）、2番目の変数は関数にtarget組み込まれないstate_Changeため、実際のアクションは実行されません。targetin document.getElementById(target).innerHTML が（のような）静的IDに置き換えられた場合list_sl、それは機能しますが、スロベニアとホルバティアだけでなく、HTMLにこれらのリンクの多くがあるため、変数が強く必要になります。

助けてくれてありがとう。

4

2 に答える 2

1

ロジックを。state_Change内の無名関数に配置します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);
    }
}

loadXMLDocこれの欠点は、呼び出されるたびに関数の新しいインスタンスがインスタンス化されることです。

于 2009-08-10T20:16:06.660 に答える
1

グローバル変数（XMLHttpRequestsとsの両方）を使用する場合、並列要求をサポートすることはできません（つまり、ユーザーが戻るtarget前に別のリンクをクリックする）。XMLHttpRequestこれを実装する1つの方法は、xmlhttp変数を関数のスコープに保持し、をプロパティとしてオブジェクトloadXMLDocに追加することです。targetXMLHttpRequest

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

関数では、イベントのプロパティを使用しstate_Changeてインスタンスにアクセスできます。XMLHttpRequesttarget

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

    var targetList = document.getElementById(xmlhttp.targetListId);
    targetList.innerHTML = ''; // fill with data, etc.
};
于 2009-08-10T20:39:33.150 に答える