如何强制程序等待HTTP请求在JavaScript中完成？

Question

JavaScript中有一种方法可以将HTTP请求发送到HTTP服务器，并等到服务器回复回复？我希望我的程序等待，直到服务器回复并且不执行任何其他在此请求之后的命令。如果HTTP服务器关闭，我希望HTTP请求在超时后重复，直到服务器回复，然后程序的执行可以正常继续。

任何想法？

谢谢你在前进， Thanasis

Answer 1

可以执行同步请求。 jQuery示例：

$(function() { 
    $.ajax({ 
     async: false, 
     // other parameters 
    }); 
}); 

您应该看看jQuery的AJAX API。我强烈建议使用像jQuery这样的框架。手动进行跨浏览器ajax是一个真正的痛苦！

Answer 2

为此，您可以在页面开始加载后立即在JavaScript中启动加载程序，然后可以在请求结束或您的dom准备好时关闭它。 我想说的是，当页面加载开始时，启动一个加载器。然后页面可以使用ajax执行多个同步请求，直到除非您没有得到响应，否则不要关闭关闭加载器。 在最终调用中收到所需的响应后，可以关闭加载程序。

Answer 3

您可以使用XMLHttpRequest对象发送您的请求。一旦你发送你的请求，你可以通过readyState属性来识别状态。 readyState将具有以下不同的状态。

• 初始化 - 还没有开始加载但
• 装载 - 是否加载
• 互动 - 装入足够，并且用户可以用它
• 完整的互动 - 满载

例如：

xmlhttp.open("GET","somepage.xml",true); 
xmlhttp.onreadystatechange = checkData; 
xmlhttp.send(null); 

function checkData() 
{ 
    alert(xmlhttp.readyState); 
} 

希望这个将有助于

Answer 4

我在使用Three.js和Google Closure构建的游戏中也有类似的情况。我必须加载2个资源，Three和Closure不允许我使这些同步。

起初，我天真地写道：

main() { 

    ... 
    var loaded=0; 
    ... 

    // Load Three geometry 
    var loader = new THREE.JSONLoader(); 
    loader.load("x/data.three.json", function(geometry) { 
    ... 
    loaded++; 
    }); 

    // Load my engine data 
    goog.net.XhrIo.send("x/data.engine.json", function(e) { 
    var obj = e.target.getResponseJson(); 
    ... 
    loaded++; 
    }); 

    // Wait for callbacks to complete 
    while(loaded<2) {} 

    // Initiate an animation loop 
    ... 
}; 

是等待回调从来没有完成结束，从环loaded永远无法加点的循环。问题是直到main返回（至少在Chrome上），才会触发回调。

一个解决方案可能是检查两个回调是否是最后一个完成，然后继续启动动画循环。

另一个解决方案 - 或许更直接回答你问（如何等待每个负载启动另一前） - 将巢回调如下：

// Load Three geometry 
var loader = new THREE.JSONLoader(); 
loader.load("x/data.three.json", function(geometry) { 
    ... 

    // Load my engine data 
    goog.net.XhrIo.send("x/data.engine.json", function(e) { 
    var obj = e.target.getResponseJson(); 
    ... 

    // Initiate an animation loop 
    ... 

    }); 
    }); 
}; 

Answer 5

还有第三个参数到XmlHttpRequest :: open（），它旨在表明你希望通过异步方式发送请求（并通过onreadystate处理程序处理响应）。因此，如果你希望它是同步的（即等待答案），只需为该第三个参数指定false即可。 在这种情况下，您可能还想为您的请求设置有限的超时属性，因为它会阻止页面直到接收。

下面是两个同步和异步的所有功能于一身的样本函数：

function httpRequest(address, reqType, asyncProc) { 
    var r = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 
    if (asyncProc) 
     r.onreadystatechange = function() { 
      if (this.readyState == 4) asyncProc(this); 
     }; 
    else 
     r.timeout = 4000; // Reduce default 2mn-like timeout to 4 s if synchronous 
    r.open(reqType, address, !(!asyncProc)); 
    r.send(); 
    return r; 
} 

，你可以调用这个方法：

var req = httpRequest("http://example.com/aPageToTestForExistence.html", "HEAD"); // In this example you don't want to GET the full page contents 
alert(req.status == 200 ? "found!" : "failed"); // We didn't provided an async proc so this will be executed after request completion only