jump to navigation

AJAX asíncrono y síncrono Miércoles, 21 marzo 2007

Posted by israelof in Implementación.
trackback

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.

Anuncios

Comentarios»

1. Toto - Martes, 22 abril 2008

hola, pues yo estaba trabajando con un metodo de validacion que me devuelve falso o verdadero (valido o no valido)

algo asi

function validarExiste(campo)
{

xmlHttp=getXmlHttpObject();

xmlHttp.open(“GET”,”validar.php?campo=”+campo,false);
xmlHttp.send(null);
var valido=xmlHttp.responseText;
if (var==algo)
return true
else
return false

}

la idea es q la funcion me devuelva falso o verdadero al onsubmit
de un form y envie o no el formulario en funcion de eso, funciona en iexplorer, pero no en firefox 😡 . Alguna opinion?

2. yeya - Viernes, 20 junio 2008

Hola!!!, gracias me funciono, pues no sabia como hacer el metodo post de ajax sincrono y realmente lo necesitaba.

3. Diego - Jueves, 28 agosto 2008

tiene mal la ultima parte
var valido=xmlHttp.responseText;
//revise esta aprte de la sintaxis
if (valido==’algo’)
return true
else
return false

4. Dani Pila - Miércoles, 22 octubre 2008

Gracias !!
Por fin he encontrado una maenra de hacerlo síncrono, lo que no entendo es cómo dice la gente que le funciona de manera síncrona sin usar ese “truquito”.

5. Patricio Gonzalez - Jueves, 11 diciembre 2008

Exelente aporte compañero

Intente de muchas maneras ejecutar mas de una peticion al servidor seguidas pero aveces no se ejecutaban en orden, al hacer la peticion sincrona, las peticiones respetan el orden

6. OM1978 - Jueves, 15 enero 2009

Muy bueno el tutorial, me tome la libertad de hacer una función para obtener solo un valor que nos puede servir si deseamos consultar algo en especifico, aquí les dejo el código:

/**
* Función para hacer una solicitud vía AJAX síncrono por el método get.
*
* El xml generado debe tenen la siguiente estructura: result
*
* Donde:
* labelName: Es el nombre de la etiqueta proporcionado en los parámetros de la función.
* result: El resultado a obtener de la solicitud.
*
*
* @author OM1978 (incesticide1967@gmail.com)
* @version 2009-01-14
*
* @param (String) Url a utilizar para realizar la solicitud.
* @param (String) Nombre de la etiqueta dentro de la cual va estar el resultado de la solicitud.
*
* @return (void) Resultado, si ocurre un error devuelve un valor falso.
*/
function getData(url, labelName){
var obj;

if(window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
try{
obj = new ActiveXObject(‘Microsoft.XMLHTTP’);
}
catch(e){
obj = false;
}

if(obj != false){
obj.open(‘GET’, url, false);
obj.send(null);

var temp = obj.responseXML.getElementsByTagName(labelName);

return temp[0].childNodes[0].nodeValue;
}
else
return false;
}

7. cjrios - Martes, 21 abril 2009

Muchas gracias por la info del ajax síncrono. Me has sacado de un buen quebradero de cabeza 😉

Salu2…3…4…

8. FERMIN - Miércoles, 21 octubre 2009

ALGUIEN PUEDE DECIRME QUE SIGNIFICA LA PALABRA ASINCRONO Y COMO SE UTILIZA EN COMPUTACION

9. Anónimo - Jueves, 29 julio 2010

muchas gracias, me has salvado la tarde!
saludos!

10. AJAX « Sabelita's Blog - Jueves, 5 agosto 2010

[…] Comunicación síncrona vs. Asíncrona […]

11. Pablo Cesar - Jueves, 30 septiembre 2010

De todos los sitios donde busqué información, es el único donde dí con la tecla. Ahora que estudio el código me digo “que tonto, como no me di cuenta”, pero mientras le buscaba la vuelta nunca di con esta solución. Mil Gracias!

Saludos

12. foxvor - Martes, 8 marzo 2011

Excelente, muchas gracias, eso explica de maravilla porque no funcionaban las llamadas sincronas en firefox.

Felicidades

13. Ramses - Miércoles, 28 agosto 2013

Si se trata de una llamada a un evento AJAX desde un boton tipo “submit” (type=”submit”), el unico modo que funciona en todos los navegadores, es SINCRONO, esto por que el navegador esta interpretando que esta enviando la informacion contenida en la pagina que se esta mostrando, a otro “lugar”, de esta forma, no podria ejecutarse AJAX en modo asincrono, por que por fuerza, tiene que esperar una respuesta del servidor; desde un evento “onclick” de cualquier control (en lugar de hacer action=”archivo.php” o onSubmit=”javascript()” en el control form, hacemos lo que se desea en el evento onclick del input type=”submit”)que se este usando es seguro que el modo ASINCRONO funcionara sin problemas, ya que el navegador interpreta que los scripts se siguen ejecutando en la misma pagina que nos encontramos y solo esta invocando a un evento, es decir, no estamos saliendo de una pagina para ir a otra, como es el caso del evento action=”” o onSubmit().


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: