2011-06-23 10 views
23

De la referencia leí en MDN, que diceparámetro "true" en XMLHTTPRequest .open() método

If TRUE (the default), the execution of the JavaScript 
function will continue while the response of the server has not yet arrived. 
This is the A in AJAX. 

He estado usando AJAX, pero entonces yo estaba un poco confundido cuando leí eso. Creo que el problema puede ser que no entiendo claramente el concepto de AJAX ... Sé por supuesto que AJAX no actualiza la página, lo que significa que la conexión al servidor y la respuesta están completamente hechas en segundo plano.

Pero lo que puedo imaginar sucediendo de acuerdo con que la referencia es que si tengo un código como este en mi JavaScript:

//true, therefore process the function while server retrieves url 
var xmlResponse; 
var url = "http://domain.com/file.xml"; 
xml_req.open("GET", url, true); 

xml_req.onreadystatechange = function() { 
    if(xml_req.readyState == 4 && xml_req.status == 200) { 
     if(xml_req.responseText != null) 
      xmlResponse = xml_req.responseXML; //server response may not yet arrive 
     else { 
      alert("failed"); 
      return false; 
     } 
    }; 
xml_req.send(null); 

¿no significa eso xmlResponse podría ser indefinido en el sentido de que el servidor está sigue recuperando los datos? ¿Podría alguien explicar cuál es realmente el flujo de la ejecución en la tecnología AJAX? Gracias por adelantado.

+0

¿Necesita más información? ¿Más preguntas? – epascarello

+0

@epascarello: gracias, creo que tengo claro eso, gracias por la ayuda. No puedo aceptar dos respuestas pero iré con la que me contestó primero –

Respuesta

20

Escribí un artículo más detallado here, pero esta es la idea básica.

Configurarlo en verdadero significa que está realizando una solicitud asincrónica. Eso significa que el código no se detiene hasta que se completa la solicitud http. Una llamada síncrona bloquea el navegador para que no se ejecute nada más. Eso puede causar problemas, por lo que la gente prefiere asincrónico.

El objeto XHR nos actualiza sobre lo que está haciendo. Nos da las actualizaciones con el evento onreadystatechange. Registramos una función con ella para que podamos seguir su estado. El onreadystatechange se llama 4 veces. Cada uno con un diferente estado

0 = uninitialized 
1 = loading 
2 = loaded 
3 = interactive 
4 = complete 

Los datos están disponibles para nosotros cuando el readystate es 4.

Ahora en el código que envió, se está comprobando el estado completo y se asegura de que el estado es 200 [OK]

if(xml_req.readyState == 4 && xml_req.status == 200){ 

el valor para xmlResponse será indefinido si se intenta utilizar en otro lugar en el código antes de ser devuelta. Un ejemplo

ml_req.send(null); 
alert(xmlResponse); 

Uno de los primeros artículos sobre el artículo XMLHttpRequest podría ser una buena lectura para usted. Apple Article on xmlhttpreq

+0

El controlador 'onreadystatechange' se puede llamar más o menos de 4 veces. Con respuestas fragmentadas, el manejador se puede llamar varias veces con 'readyState === 3': [jsfiddle.net/f067xas8](http://jsfiddle.net/f067xas8/) – gilly3

4

Lo importante es comprender que su controlador onreadystatechange no se ejecuta inmediatamente. Y se ejecuta más de una vez. Puede ser más fácil de conceptualizar, si se rompe las piezas a cabo en distintas funciones:

function makeRequest(url) 
{ 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", url, true); 
    xhr.onreadystatechange = receiveResponse; 
    xhr.send(); 
} 
function receiveResponse(e) 
{ 
    if (this.readyState == 4) 
    { 
     // xhr.readyState == 4, so we've received the complete server response 
     if (this.status == 200) 
     { 
      // xhr.status == 200, so the response is good 
      var response = this.responseXML; 
      ... 
     } 
    } 
} 

En primer lugar, makeRequest se llama y luego se cierra. Luego, tan pronto como escuchemos algo del servidor, se llama al receiveResponse. Cada vez, verificamos si la respuesta se recibió completamente, y solo entonces continuamos procesando esa respuesta.

Cuestiones relacionadas