AjaxRain es un sitio que ofrece ejemplos y demos para descargar con tecnología Ajax (ide, librerías, demos, ejemplos, código fuente) sobre Ajax, Javascript y Dhtml; de momento existen mas 485 utilidades. Así que si estamos por desarrollar un proyecto en el que usemos javascript y demas cosas, seria bueno darle un vistazo y ver que utilidades nos puede ofecer.
Vía Ajaxian, una pequeña presentacion acerca del uso de jQuery. Explica selectores CSS, manejo de eventos, Ajax entre otros.
El atributo responseXML devuelve una referéncia al cuerpo del documento descargado del servidor en una petición con XMLHttpRequest en formato XML.
Utilización
oDocumento = oXMLHttpRequest.responseXML;
oDocumento - Referéncia al cuerpo del objeto recibido.
oXMLHttpRequest - Objeto XMLHttpRequest
La propiedad responseXML se utiliza para tratar los datos recibidos en formato XML desde el servidor, podremos acceder a los datos siempre y cuando el estado de la conexión devuelto con readyStatechange sea igual a 4 (a punto).
Esta propiedad nos devolverá null siempre que la respuesta XMLdel servidor no tenga el encabezado text/xml, application/xml o acabe en +xml.
Utilizaremos las propiedades del Modelo de Objetos de Documento (DOM) para tratar los datos XML recibidos.
Ejemplo
Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest previamente y realizado una petición de un xml con marcas
// Creamos la función
function fFuncion ()
{
// Si el estado es "A punto"
if ( oXMLHttpRequest.readyState == 4)
{
// Accedemos al documento XML
oDocumento = oXMLHttpRequest.responseXML.documentElement;
// Alertamos el numeto de item's
alert ( oDocumento.getElementsByTagName('item').length );
} }
// Definimos la función handler del evento
oXMLHttpRequest.onreadystatechange = fFuncion;
Normalmente accederemos a la propiedad responseText cuando el objeto XMLHttpRequest nos informa que toda la información fue remitida por el servidor, esto ocurre cuando la propiedad readyState del objeto XMLHttpRequest almacena el valor 4.
El atributo responseText devuelve el texto del documento descargado del servidor en una petición con XMLHttpRequest.
Utilización
sDocumento = oXMLHttpRequest.responseText;
sDocumento - Cadena de caracteres con el texto del documento.
oXMLHttpRequest - Objeto XMLHttpRequest
La propiedad responseText se utiliza para tratar los datos recibidos desde el servidor que no tienen formato XML, podremos acceder a los datos siempre y cuando el estado de la conexión devuelto con readyStatechange sea igual a 3 (recibiendo) o 4 (a punto).
Siempre que podamos intentaremos usar responseXML en lugar de responseText y XML para la los datos en lugar de texto plano.
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.
