AJAX asíncrono y síncrono

Existe multitud de documentación que explica que es AJAX y como se suele utilizar de modo asíncrona, que es donde reside su potencia, pero en níngun lugar se explica como utilizar AJAX de forma síncrona.

Objeto XMLHttpRequest:

Lo primero que debemos hacer para que podamos realizar peticiones al servidor con AJAX es definirnos el objeto del siguiente modo:

<script>
 function AJAXCrearObjeto(){
  var obj;
  if (window.XMLHttpRequest) { // no es IE
   obj = new XMLHttpRequest();
  }
  else { // Es IE o no tiene el objeto
   try {
    obj = new ActiveXObject(“Microsoft.XMLHTTP”);
   }
   catch (e) {
    alert(‘El navegador utilizado no está soportado’);
   }
  }
  return obj;
 }
</script>

Existen diversas codificaciones del objeto. Aquí hemos puesto una de ellas como ejemplo.

AJAX asíncrono:

La codificación resumida de una llamada asíncrona suele ser del siguiente modo:

<script>
 // Creamos la variable parametro
 parametro = ‘Datos pasados por POST’;
 oXML = AJAXCrearObjeto();
 // Preparamos la petición con parametros
 oXML.open(‘POST’,'pagina.php’, true);
 // Preparamos la recepción
 oXML.onreadystatechange = leerDatos;
 // Realizamos la petición
 oXML.send(‘parametro=’ + escape(parametro));
 
 function leerDatos() {
  if (oXML.readyState == 4) {
   alert (oXML.responseText);
  }
 }
</script>

AJAX síncrono:

La literatura que encontramos sobre AJAX nos dice que para hacer llamadas síncronas deberemos poner a “false” el parámetro correspondiente de oXML.open, pero esto en la práctica no es suficiente para que funcione en todos los navegadores. De modo que la solución que aquí se plantea es la siguiente:

<script>
 // Creamos la variable parametro
 parametro = ‘Datos pasados por POST’;
 oXML = AJAXCrearObjeto();
 // Preparamos la petición con parametros
 oXML.open(‘POST’,'pagina.php’, false);
 // Realizamos la petición
 oXML.send(‘parametro=’ + escape(parametro));
 // Devolvemos el resultado
 return oXML.responseText;
</script>

Como vemos, toda la parte dedicada a comprobar el estado en el que se encuentra la comunicación, ya no es necesaria, puesto que ahora se trata de una llamada síncrona, de modo que hasta que no se reciban los datos del servidor no se va a continuar con la ejecución. Con la eliminación de ese fragmento de codigo se consigue que las llamadas síncronas funcionen correctamente.

NOTAS:
Esto se ha probado únicamente para Internet Explorer 7 y Firefox 2.0.0.2.
Se han omitido partes de código para simplificar los textos.