0

私はAJAXを学び始めたばかりで、簡単なスクリプトを作成しました。以下はスクリプトです。

<!doctype html>
<html>
<head>
    <title>Welcome to the forum</title>
    <script>
        var XMLHttpRequestObject = false;

        if(window.XMLHttpRequest)
        {
            XMLHttpRequestObject = new XMLHttpRequest();
            XMLHttpRequestObject.overrideMimeType("text/xml");
        }
        else
        {
            document.getElementById("text").innerHTML = "Sorry, your browser does not support AJAX!";
        }

        function getData(dataSource)
        {
            XMLHttpRequestObject.open("GET", dataSource);
            XMLHttpRequestObject.onreadystatechange = function()
            {
                if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
                {
                    responseData = XMLHttpRequestObject.responseXML;
                    responseDataList = responseData.getElementsByTagName("os");
                }
            }

            XMLHttpRequestObject.send(null);
        }

        function displayMenuItems(dataSource,selectID)
        {   
            getData(dataSource);

            var i;
            for(i=0; i<responseDataList.length; i++)
            {
                document.getElementById(selectID).options[i] = new Option(responseDataList[i].firstChild.data);
            }
        }

    </script>
</head>

<body>
    <form>
        <select size="1" id="os">
            <option>Select and OS</option>
        </select>
        <input type="button" value="Display OS list" onclick="displayMenuItems('os.xml','os')" />
    </form>

    <div id="text">The Operating System you use will appear here!</div>
</body>

ボタンをクリックすると、HTMLリストにOSのリストが表示されると思いますが、ボタンを2回クリックした後にのみ表示されます。何が問題なのかわからない！:(

以下はXMLスクリプトです。

<?xml version="1.0"?>
<osList>
    <os>Ubuntu</os>
    <os>Fedora</os>
    <os>Windows</os>
</osList>
4

1 に答える 1

1

問題はタイミングの問題です。関数 displayMenuItems は getData を呼び出し、すぐに responseDataList を反復しようとしますが、このリストはまだ取得されていません。AJAX はブロックしないため、getData はサーバーの応答を待たず、responseDataList が初期化される前に戻ります。データがフェッチされた後、displayMenuItems でループを呼び出す必要があります。これを行うには、別の関数に移動し、onreadystatechange コールバック関数から呼び出します。

于 2013-02-03T07:31:55.353 に答える