Javascript AJAX函数调用延迟

Question

我似乎无法弄清楚如何使这个功能正常工作。重要的是要看到 tStat = xmlhttp2.responseText 似乎被延迟了。我用 .innerHTML + =“withintest”+ Stat 测试了它。它打印出“内部测试内部测试0”。所以它做了几次迭代，直到它有值？ 0是我想要的Stat值，checktStatus.php从数据库中获取它。

但是因为这个函数返回一个值，并且我将它从另一个函数调用到该值的变量中，所以在它返回之前不能延迟DB读取。但我无法弄清楚如何实现这一目标！救命？

编辑：拿出一些注释代码，但问题依然存在。它返回一个“未定义”值，然后才能得到一个真值。

function gettStatus()
{
    var tStat;

    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)
        {
            tStat=xmlhttp2.responseText;        

            document.getElementById("txtHint").innerHTML+=" withintest "+tStat;
            return tStat;
        }
    }
    xmlhttp2.open("GET","checktStatus.php?tID=1",true);

    xmlhttp2.send();    
}

Answer 1

onreadystatechange如何运作

onreadystatechange事件处理程序 - 作为事件建议的名称 - 在readyState更改时调用。因此，您必须检查状态和状态（就像您在评论的部分中所做的那样）。

在此处查看更多详情：Mozilla Developer Network: AJAX - Getting Started

readyState值列表

从上面引用的页面（link to the section）：

  

readyState值的完整列表如下：

     

  
• 0（未初始化）
  
• 1（加载）
  
• 2（已加载）
  
• 3（互动）
  
• 4（完成）
  

AJAX的异步性

您还应该意识到，通常AJAX是异步工作的，因此您只需传递一旦收到响应就会执行的回调，就像这样：

function gettStatus(callback){
    // do something here...
    callback(result); // ...and execute callback passing the result
}

解决方案

因此，您应该将代码编辑为与此类似（在readyState / status条件未注释的情况下）：

function gettStatus(callback)
{
    var tStat;

    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)
        {
            tStat=xmlhttp2.responseText;        

            document.getElementById("txtHint").innerHTML+=" withintest "+tStat;
            callback(tStat);
        }
    }
    xmlhttp2.open("GET","checktStatus.php?tID=1",true);

    xmlhttp2.send();    
}

然后就这样使用它：

gettStatus(function(tStat){
    // tStat here is accessible, use it for further actions
});

而不是以下列方式使用它：

var tStat = gettStatus();
// tStat would be available here, if gettStatus() would not involve
// asynchronous requests

Answer 2

您注释掉的行用于过滤readystates。

/*if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
{*/
    tStat=xmlhttp2.responseText;        
    document.getElementById("txtHint").innerHTML+=" withintest "+tStat;
    return tStat;
//}

应该是

if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
{
    tStat=xmlhttp2.responseText;        
    document.getElementById("txtHint").innerHTML+=" withintest "+tStat;
    return tStat;
}