DiegusWeb: junio 2007

Continuando con nuestro repaso sobre ajax , ahora veremos el primer paso para establecer la comunicación con el servidor haciendo la petición, posteriormente, el servidor nos preparará y devolverá una información que ya veremos más adelante como recibimos, tratamos e incorporamos en nuestra página.

Existen dos tipos de petición al servidor que explicaremos en la referéncia del método open, la petición síncrona y la asíncrona, pero por definición AJAX utiliza comunicación asíncrona que es la que explicaremos.

Realizando la petición al servidor

Utilizaremos los métodos open, onreadystatechange y send, que sirven respectivamente para preparar la petición, seleccionar la función de recepción e iniciar la petición.

Al método open, hay que pasarle el método de petición (GET) y la URL que se enviará al servidor y mediante la cual, el servidor, creará la respuesta que posteriormente leeremos.

// Creamos el objeto
ohttp = AJAXCrearObjeto();
// Preparamos la petición
ohttp.open('GET', 'archivo.txt');
// Preparamos la recepción
ohttp.onreadystatechange = leerDatos;
// Realizamos la petición
ohttp.send('' ");

Para que esto funcione, tendremos que haber declarado la función leerDatos para tratar los datos recibidos del servidor y mostrarlos al usuario, pero esto lo veremos más adelante.

Paso de parámetros

En la petición AJAX podemos pasar parámetros tanto por POST como por GET a nuestro servidor.Para pasar parametros por get ( por URL ) , usaremos una URL con parametros en la función open independientemente de usar el método GET o POST, por ejemplo:

// Creamos la variable parametro
parametro = 'Datos pasados por GET';
// Creamos el objeto
ohttp = AJAXCrearObjeto();
// Preparamos la petición con parametros
ohttp.open('GET', 'pagina.php?parametro=' + escape(parametro));
// Preparamos la recepción
ohttp.onreadystatechange = leerDatos;
// Realizamos la petición
ohttp.send(''");

Para pasarlos por POST, deberemos usar el método POST en la función open y pasar los parámetros desde la función send, veamos un ejemplo:

// Creamos la variable parametro
parametro = 'Datos pasados por POST';
// Creamos el objeto
ohttp = AJAXCrearObjeto();
// Preparamos la petición con parametros
ohttp.open('POST','pagina.php');
// Preparamos la recepción
ohttp.onreadystatechange = leerDatos;
// Realizamos la petición
ohttp.send( 'parametro=' + escape(parametro));

Este articulo es una entrada para algo mas grande que vendra.

Este ejemplo no viene mucho al caso de ajax pero buscando encontre este que la verdad no sabia como se hacia pero siempre se aprende algo nuevo no importa si es un ejemplo antiguo.

No hay nada más fastidioso que una conexión a Internet lenta. Sobre todo cuando nuestros usuarios navegan con ella y a veces ni siquiera saben que falta cargar una imagen que quizás nos llevo tiempo editar para ese post. Pero si deseamos que nuestros usuarios logren ver todas las imágenes de nuestros post aun cuando naveguen con conexiones lentas, existe una forma muy fácil de decirles a nuestros usuarios de forma visual de que algo esta faltando cargar en nuestro post. Por ejemplo agregando una imagen visual que les hará saber que la imagen se esta cargando en el post y de esta forma acaben viendo de que trata esa imagen.

Para agregar de fondo la imagen de “precarga” a nuestras imágenes solo necesitaremos esta línea muy simple de CSS que deberemos agregar nuestra hoja de estilo.