¿Cómo puedo hacer que XHR.onreadystatechange devuelva su resultado?

Question

Soy nuevo en la programación de JavaScript. Ahora estoy trabajando en mi extensión de Google Chrome. Este es el código que no funciona ...: P

Quiero la función getURLInfo para devolver su objeto JSON, y quiero ponerlo en resp. ¿Podría alguien corregir mi código para que funcione?

Gracias de antemano.

Answer 1

Que se trata de una llamada de función asíncrona aquí. Los resultados se manejan cuando llegan, no cuando la función termina de ejecutarse.

Para eso están las funciones de devolución de llamada. Se invocan cuando hay un resultado disponible.

function get(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", url, true); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4) { 
      // defensive check 
      if (typeof callback === "function") { 
       // apply() sets the meaning of "this" in the callback 
       callback.apply(xhr); 
      } 
     } 
    }; 
    xhr.send(); 
} 
// ---------------------------------------------------------------------------- 


var param = "http://example.com/";     /* do NOT use escape() */ 
var finalUrl = "http://RESTfulAPI/info.json?url=" + encodeURIComponent(param); 

// get() completes immediately... 
get(finalUrl, 
    // ...however, this callback is invoked AFTER the response arrives 
    function() { 
     // "this" is the XHR object here! 
     var resp = JSON.parse(this.responseText); 

     // now do something with resp 
     alert(resp); 
    } 
); 

Notas:

• escape() ya no se utiliza desde siempre. No lo uses, no funciona correctamente. Use encodeURIComponent().
• Usted podría hacer el sincrónica send() llamada, estableciendo el parámetro de asyncopen() a false. Esto daría lugar a la congelación de tu UI mientras se ejecuta la solicitud, y no quieres eso.
• Hay muchas bibliotecas que se han diseñado para que las solicitudes de Ajax sean fáciles y versátiles. Sugiero usar uno de ellos.

Answer 2

No puede hacer nada para llamadas XHR asincrónicas. No puede hacer que JavaScript "espere" la respuesta HTTP del servidor; todo lo que puede hacer es darle al sistema de tiempo de ejecución una función para llamar (su manejador), y lo llamará. Sin embargo, esa llamada vendrá a largo tiempo después de que el código que configura el XHR haya finalizado.

No todo está perdido, sin embargo, como esa función de controlador puede hacer cualquier cosa. Sea lo que sea lo que quería hacer con un valor de retorno, puede hacer dentro del controlador (o desde otras funciones llamadas desde el controlador).

Así, en el ejemplo, que cambiaría las cosas como esto:

xhr.onreadystatechange = function() 
    { 
     if (xhr.readyState == 4) 
     { 
      var resp = JSON.parse(xhr.responseText); 
      // 
      // ... whatever you need to do with "resp" ... 
      // 
     } 
    } 
} 

Answer 3

Para los pequeños editar hablando mensaje: https://stackoverflow.com/a/5362513/4766489

... 
if (typeof callback == "function") { 
    //var resp = xhr.responseText; 
    var resp = JSON.parse(xhr.responseText); 
    callback(resp); 
} 
... 

Y cuando se llama

... 
function(data) { 
    alert(data); 
    /* now do something with resp */ 
} 
...