ajax - 请求对象 readyState 不变

Question

我在接收服务器响应的 ajax 中有这个功能，但它没有进入第一个 if ：

function handleServerResponseForDesignations(ele){

        var attrName = ele.getAttribute("name");
        console.log("Attribute name : "+attrName);
        console.log("in handleServerResponseforDesignations");
        if(xmlHttp.readyState == 4){
            console.log("ready state is 4");
            if(xmlHttp.status == 200){
                var response2 = JSON.parse(xmlHttp.responseText);
                console.log("response2 : "+JSON.stringify(response2));
                if(response2.status == "200" || response2.status == 200){
                    var designations = response2.designations;
                    for(var i = 0; i< designations.length; i++){
                        var temp = designations[i];
                        var newoption = document.createElement("option");
                        newoption.value = temp.emp_id;
                        newoption.innerHTML = temp.designation;
                        if(attrName == "sender_department"){
                            console.log("inside sender_department if");
                            document.getElementById("sender_designation").options.add(newoption);
                        }
                        else if(attrName == "recipient_department"){
                            console.log("inside recipient_department if");
                            document.getElementById("recipient_designation").options.add(newoption);    
                        }                       
                    }
                    return true;    
                }
            }
            else{
                alert("Connection Problem ! ! !");
            }
        }       
    }

它正在控制台中打印直到：“in handleServerResponseforDesignations”，但不会继续。我收到一个 json 作为响应，我在服务器端进行了检查，发送的 json 是：' responseValue : {"status":200,"designations":[{"designation":"smm1","emp_id":"251235"},{"designation":"lpo","emp_id":"234567"}]} 。

只要组合框发生变化，调用就会发生：

<select name="sender_department" id="sender_department" onchange="getDesignations(this)" disabled>
<option value="" disabled selected></option>
</select>

进行 ajax 调用的函数是：

        function getDesignations(ele){

        console.log("in getDesignations()");
        var val = ele.value;
        console.log("val is : "+val);
        if(xmlHttp.readyState == 0 || xmlHttp.readyState == 4){
            department = encodeURIComponent(val);
            if(department === null || department === ""){
                return false;
            }
            xmlHttp.open("GET","GetDesignations?department="+department,true);
            xmlHttp.onreadystatechange = handleServerResponseForDesignations(ele);
            xmlHttp.send(null);
        }
        else{
            setTimeout('getDesignations(ele)',1000);
        }

    }

在同一页面上还有另一个功能可以正常工作。它也使用相同的 ajax 对象，但在不同的事件上。我正在使用 chrome 浏览器。请帮忙 ！！

Answer 1

ajax 请求是异步的，即响应稍后出现，您似乎立即调用了handleServerResponseForDesignations 函数。在 http 请求完成后，即成功（在您的情况下为 200/OK）或失败（一些 HTTP 错误代码），XMLHttpRequest 实现将调用回调方法：onreadystatechange。当就绪状态发生变化时，您将获得可用的 http 响应和响应代码。
如下更改您的功能，它应该可以工作：

    function handleServerResponseForDesignations(ele, xmlHttp) {

    var attrName = ele.getAttribute("name");
    console.log("Attribute name : " + attrName);
    console.log("in handleServerResponseforDesignations");

    if (xmlHttp.readyState == 4) {
        console.log("ready state is 4");
        if (xmlHttp.status == 200) {
            var response2 = JSON.parse(xmlHttp.responseText);
            console.log("response2 : " + JSON.stringify(response2));
            if (response2.status == "200" || response2.status == 200) {
                var designations = response2.designations;
                for (var i = 0; i < designations.length; i++) {
                    var temp = designations[i];
                    var newoption = document.createElement("option");
                    newoption.value = temp.emp_id;
                    newoption.innerHTML = temp.designation;
                    if (attrName == "sender_department") {
                        console.log("inside sender_department if");
                        document.getElementById("sender_designation").options.add(newoption);
                    } else if (attrName == "recipient_department") {
                        console.log("inside recipient_department if");
                        document.getElementById("recipient_designation").options.add(newoption);
                    }
                }
                return true;
            }

        } else {
            alert("Connection Problem ! ! !");
        }
    }
}

    function getDesignations(ele) {

    console.log("in getDesignations()");
    var val = ele.value;
    console.log("val is : " + val);
    xmlHttp = new XMLHttpRequest();
    department = encodeURIComponent(val);
    if (department === null || department === "") {
        return false;

        xmlHttp.onreadystatechange = function(){
           handleServerResponseForDesignations(ele, xmlHttp);
        }
        xmlHttp.open("GET", "GetDesignations?department=" + department, true);

        xmlHttp.send(null);
    } else {
        setTimeout('getDesignations(ele)', 1000);
    }

}