Javascript 嵌套的 AJAX 请求

问题是您正在尝试访问第二个 ajax 调用的返回值，就好像它是同步的，而事实并非如此。

因此，当您在第一个 ajax 调用中调用getSummaryVariableOptions时，您需要执行以下操作：

getSummaryVariableOptions(...., function (myoptions) {
  alert(myoptions.length); // now you have what you need here
  ..... /// put the reset of the code that depende on myoptions here
});

然后向getSummaryVariableOptions函数添加一个参数，该函数接收一个在数据到达时要调用的函数 - 回调。

function getSummaryVariableOptions(variableId, callback) {
    ... inside the readystate === 4 ...
    callback(options);
}

当您调用getSummaryVariableOptions时，它会启动 ajax 调用并立即返回，因此您需要等到调用完成，然后使用调用中的数据回调。你不能做var myoptions = getSummaryVariableOptions(..)

编辑：

基于 jquery 的方法如下所示：

$.getJSON(url1, function (res1) {
  $.getJSON(url2, function (res2) {
     // now you have both res 1 and res 2 to process here...
  });
});

几乎按照Jaime的回答到达那里。仍然有一个问题，getSummaryVariableOptions 实际上是一个异步 ajax 调用，这意味着 updateSummaryVariablesInput 在 getSummaryVariableOptions 的结果被拉入之前很久就完成了。这导致标签在结束标签之后附加到 txt 中。Shea进行了编辑以将选项标签存储在数组中，然后使用innerHtml将它们插入到后面的数组中。谢谢谢伊！

var getQueue = [];
function updateSummaryVariablesInput(typeId) {
    if (typeId=='') {
        document.getElementById('summaryVariables').innerHTML='';
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp2=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp2=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp2.onreadystatechange=function() {
        if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
            xmlDoc=xmlhttp2.responseXML;
            txt='<table>';
            x=xmlDoc.getElementsByTagName('row');
            for (i=0;i<x.length;i++) {
                if (x[i].getElementsByTagName('common')[0].childNodes[0].nodeValue < 1) {
                    txt=txt + '<tr><th style='"width: 150px;'">' + x[i].getElementsByTagName('label')[0].childNodes[0].nodeValue +  '</th><td>';
                    // Select
                    if (x[i].getElementsByTagName('input')[0].childNodes[0].nodeValue == 'select') {
                        txt=txt + '<select id='"' + x[i].getElementsByTagName('id')[0].childNodes[0].nodeValue + ''" name='"' + x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue + ''"><option></option></select>';
                        // Add it to a queue, to do it later
                        getQueue.push(x[i].getElementsByTagName('id')[0].childNodes[0].nodeValue);
                    }
                    // Text
                    if (x[i].getElementsByTagName('input')[0].childNodes[0].nodeValue == 'text') {
                        txt=txt + '<input type='"text'" name='"' + x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue + ''" />';
                    }
                    txt=txt + '</td></tr>';
                }
            }
            txt=txt + '</table>';
            document.getElementById('summaryVariables').innerHTML=txt;
            for (var gsi = 0; gsi < getQueue.length; ++gsi) {
                getSummaryVariableOptions(getQueue[gsi], function (myoptions, parentId) {
                    var parentSelect = document.getElementById(parentId),
                        optionsTxt = '';
                    for (j=0;j<myoptions.length;j++) {
                        optionsTxt=optionsTxt + '<option value='"' + myoptions[j] + ''">' + myoptions[j] + '</option>';
                    }
                    parentSelect.innerHTML = optionsTxt;
                });
            }
        }
    }
    xmlhttp2.open('GET','/cgi/new/Ajax/getOutageVariablesByTypeId.php?typeId='+typeId,true);
    xmlhttp2.send();
}
function getSummaryVariableOptions(variableId, callback) {
    var options = new Array();
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp3=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp3=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp3.onreadystatechange=function() {
        if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
            xmlDoc=xmlhttp3.responseXML;
            x=xmlDoc.getElementsByTagName('row');
            for (i=0;i<x.length;i++) {
                options[i] = x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue;
            }
            // Revised to send variableId to callback
            callback(options, variableId);
            //alert(options.length);
        }
    }
    xmlhttp3.open('GET','/cgi/new/Ajax/getOutageVariableOptionsByVariableId.php?variableId='+variableId,true);
    xmlhttp3.send();
    //alert(options.length);
    //return options;
}

嵌套的 ajax 请求需要一个数组来存储每个请求并在完成时记录错误。

https://stackoverflow.com/a/18728553/2450730

一个简单的解决方案是做顺序的Ajax脚本。（这是使用 xhr2 和 JSON）还需要一些错误检查。但它给了你如何完成它的想法。

var mainListArray,
Length,
Current;
function ajax(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()};
function loadmain(){
 ajax('mainList.php',seq)
}
function seq(){
 mainListArray=JSON.parse(this.response);
 Length=mainListArray.length;
 Current=0;
 next();
}
function next(){
 ajax('Detail.php?id='+mainListArray[Current].id,add);
 Current++;
}
function add(){
 // do something with detailed data
 if(Current<Length){
  next();
 }else{
  //everything loaded.
 }
}
window.onload=loadmain;

在这种情况下，您可以避免一些 Ajax 错误，因为每个请求都是在前一个请求完成后执行的。

阿贾克斯函数解释

https://stackoverflow.com/a/18309057/2450730

下面是顺序函数如何工作的图形示例。

http://jsfiddle.net/4eujG/