php - 第二个 AJAX 调用卸载第一个的结果

Question

下面的代码在页面的onLoad事件中运行。我首先想使用 getCompany() 填充下拉菜单，然后将服务器中的数据填充到文本框中并选择所选选项。

这两个函数都有效，事实上，当我在运行调试器的情况下重新加载页面并单步执行所有操作时，它们都会执行它们应该执行的操作。

当我打开页面或在没有调试器的情况下重新加载时，文本框已填充，但选项从下拉列表中消失，这是为什么？

<script>
        var result;
        function init(){
            var name = window.name;
            name = name.split(",");
            getCompany();
            setTimeout(200);
            if (name[0] = "update"){
                id = name[1];
                getTenant(id);
                //get the info for the line that called the edit function
                //fill fields with information from server
            }
        }

        function getCompany() { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function x() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("company").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","getCompany.php",true);
            xmlhttp.send();
        }

        function getTenant(id){
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function y() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    result = xmlhttp.responseText;
                    result = result.split(",");
                    //fill the form with old information
                    document.getElementById("fname").value = result[0];
                    document.getElementById("lname").value = result[1];
                    document.getElementById("company").selectedIndex = result[2];
                    document.getElementById("phone").value = result[3];
                    document.getElementById("email").value = result[4];
                    document.getElementById("crm").value = result[5];
                }
            }
            xmlhttp.open("GET","getTenant.php?p=" + id,true);
            xmlhttp.send();
        }
    </script>

Answer 1

我假设您在第二个请求中填写数据的输入字段属于从第一个请求中获取的数据。我还假设您正在使用 setTimeout() 来延迟第二个请求...

Javascript 是单线程的。为了提供异步行为，js 使用回调机制。向服务器发送请求后，js 不会等待响应到来。 JS 继续执行剩余的代码，直到服务器返回结果。当来自服务器的响应时，回调函数 xmlhttp.onreadystatechange 中的代码将被执行。因此，两个请求可能几乎同时发生，因此第二个请求的响应可能会先于第一个响应，这会导致您将其视为错误的行为。

调试时，您会逐行执行。因此，在获取第二个请求的响应之前，有足够的时间获取第一个请求的响应。

作为解决方案，您可以将第二个请求的代码移至第一个请求代码中的 xmlhttp.onreadystatechange 回调内。然后，由于回调总是在获取结果后执行，因此第二个请求是在第一个请求的响应到来后发送的。

您可以通过 google 搜索异步 javascript 并详细了解...

<script>
    var result;
    function init(){
        var name = window.name;
        name = name.split(",");
        getCompany(name);
    }

    function getCompany(name) { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function x() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("company").innerHTML = xmlhttp.responseText;
                if (name[0] == "update"){
                   id = name[1];
                   getTenant(id);
                   //get the info for the line that called the edit function
                   //fill fields with information from server
                }
            }
        }
        xmlhttp.open("GET","getCompany.php",true);
        xmlhttp.send();
    }

    function getTenant(id){
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function y() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                result = xmlhttp.responseText;
                result = result.split(",");
                //fill the form with old information
                document.getElementById("fname").value = result[0];
                document.getElementById("lname").value = result[1];
                document.getElementById("company").selectedIndex = result[2];
                document.getElementById("phone").value = result[3];
                document.getElementById("email").value = result[4];
                document.getElementById("crm").value = result[5];
            }
        }
        xmlhttp.open("GET","getTenant.php?p=" + id,true);
        xmlhttp.send();
    }
</script>