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 列表中显示操作系统列表，但它仅在单击按钮两次后才会发生。我无法弄清楚问题是什么！:(

下面是 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 回答