Cómo forzar a un programa a esperar hasta que se complete una solicitud HTTP en JavaScript?

Question

¿Hay alguna forma en JavaScript para enviar una solicitud HTTP a un servidor HTTP y esperar hasta que el servidor responda con una respuesta? Quiero que mi programa espere hasta que el servidor responda y no ejecute ningún otro comando posterior a esta solicitud. Si el servidor HTTP está inactivo, quiero que la solicitud HTTP se repita después de un tiempo de espera hasta que el servidor responda, y luego la ejecución del programa puede continuar normalmente.

¿Alguna idea?

gracias de antemano, Thanasis

Answer 1

Puede realizar una petición síncrona. jQuery ejemplo:

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

Usted debe echar un vistazo a jQuery de AJAX API. Recomiendo usar un framework como jQuery para esto. ¡Hacer manualmente ajax de navegador cruzado es un verdadero dolor!

Answer 2

Para esto puede iniciar el cargador en javascript tan pronto como la página comience a cargarse y luego puede cerrarlo cuando la solicitud finalice o su dom esté listo. Lo que intento decir, a medida que se inicia la carga de la página, iniciar un cargador. A continuación, la página puede hacer varias solicitudes sincrónicas utilizando ajax, hasta que, a menos que no haya recibido respuesta, no cierre el cargador cercano. Después de recibir el deseado en respuesta en la llamada final, puede cerrar el cargador.

Answer 3

Puede usar el objeto XMLHttpRequest para enviar su solicitud. una vez que envíe su solicitud, puede declarar la propiedad State para identificar el estado. readyState tendrá los siguientes estados diferentes.

• sin inicializar - no se empieza a cargar todavía
• carga - se está cargando
• interactiva - se ha cargado lo suficiente y el usuario puede interactuar con él
• completa - A plena carga

por ejemplo:

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

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

hope this ayudará

Answer 4

Tengo una situación similar en un juego creado con Three.js y Google Closure. Tengo que cargar 2 recursos, Three y Closure no me permiten hacer estos sincrónicos.

Inicialmente ingenuamente escribió lo siguiente:

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 
    ... 
}; 

El bucle que espera a que las devoluciones de llamada para completar nunca termina, desde el punto de vista del bucle loaded nunca se incrementa. El problema es que las devoluciones de llamada no se activan hasta que main regresa (al menos en Chrome de todos modos).

Una solución podría consistir en revisar ambas devoluciones de llamada para ver si es la última en completarse, y luego iniciar el ciclo de animación.

Otra solución - tal vez una respuesta más directa a lo que están pidiendo (cómo esperar para cada carga antes de iniciar otra) - sería anidar las devoluciones de llamada de la siguiente manera:

// 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

hay un tercer parámetro a XmlHttpRequest :: open(), que apunta a indicar que desea que la solicitud sea asincrónica (y así manejar la respuesta a través de un controlador onreadystate).

Así que si quiere que sea sincrónico (es decir, espere la respuesta), simplemente especifique falso para este tercer argumento. Es posible que también desee establecer una propiedad de tiempo de espera limitado para su solicitud en este caso, ya que bloquearía la página hasta la recepción.

Aquí es una función de ejemplo todo-en-uno para tanto síncronas y asíncronas:

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; 
} 

que se podría llamar de esta manera:

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