Question

我刚开始学习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>

Answer 1

问题是时间问题。函数displayMenuItems调用getData，然后立即尝试迭代responseDataList，但此列表尚未获取。 AJAX不会阻塞，因此getData不会等待服务器响应，并在responseDataList初始化之前返回。在获取数据后，您需要在displayMenuItems中调用循环。您可以通过将其移动到另一个函数并从onreadystatechange回调函数调用它来完成此操作。

需要双击按钮 - 简单的Ajax应用程序

1 个答案: