¿Qué es Ajax? Ajax (Asynchronous JavaScript And XML)

AJAX (Asynchronous JavaScript And XML), no es una nueva tecnología como algunos dicen, es un conjunto de tecnologías, una técnica de desarrollo web que une JS y XML o HTML de manera asicrónica.

A lo que estamos acostumbrados es, por ejemplo, al llenar un form, lo envías y te manda a la página de procesamiento que  te da resultado, con AJAX usas procesos en background, que gasta menos ancho de banda, es mas rápido y mas eficiente, los procesos HTTP requeridos se sustituyen con un motor AJAX escrito en JS, no carga lo mismo dos veces lo cual resulta práctico, miren:


Si observas a Gmail, usa AJAX o Google Maps,  yo pensé que era mas difícil pero no, si sabes un poco de JS,  lo manejas mas o menos en poco tiempo.


Ajax sirve para petición y recepción de datos en procesos  background usando SOAP, para hacer posible las peticiones web usaremos el objeto XMLHTTPRequest que es implementado en todos los navegadores, pero como siempre ahí diferencias en los browsers, esta vez es en la creación del objeto, IE usa ActiveX para crearlo y los demás no,  así que tendremos que usar algo como lo que yo uso:


Tratamos inicializarlo con ActiveXObject kon try y catch y si aun es nulo, lo creamos con XMLHttpRequest() , todo esto está en nuestra función get_xmlhttp , que podemos usar cuando necesitemos un request ( var = get_htmlhttp(); ).

Los metodos de un objeto XMLHttpRequest son:

• abort(): Aborta la petición actual.
• getAllResponseHeaders(): Devuelve todas las cabeceras (etiquetas y valores) como un string.
• getResponseHeader("headerLabel"): Devuelve el valor de la cabecera etiquetada como headerLabel.
• open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]): Abre una conexión a una URL, con un método HTTP (get o post), y otros parámetros opcionales.
• send(content): Envía la petición. Suele ser un String o un objeto DOM
• setRequestHeader("label", "value"): Crea un par etiqueta/valor para ser enviado en la cabecera de la petición.

Las Propiedades son:

• onreadystatechange: Guarda el nombre de la función Javascript que manejará los cambios de estado en la petición.
• readyState: Entero que codifica el estado actual de la petición:
  0 = No Inicializado
  1 = Cargando
  2 = Cargado
  3 = Interactuando
  4 = Completado
• responseText: Versión en forma de String de los datos devueltos por el servidor.
• responseXML: Objeto DOM compatible de la respuesta del servidor.
• status: Código de estado devuelto por el servidor, como 404 para No encontrado o 200 para Ok.
• statusText: Mensaje que acompaña al código de estado.

Al cliquear en botón de envío ejecuta un script  con el evento onClick() de js, este:

Lo explicaré por partes:

Primero creamos nuestro objeto xmlhttprequest con la función que creamos antes ( get_xmlhttp() ), en la segunda línea declaramos una variable que usaremos (valor) kon la palabra reservada de javascript var el valor lo obtendremos de un input con el id "valor" con getElementById de jscript (no solo se puede obtener por id) si ven el source de la web, el input donde escribes es algo así:


Después usaremos el método open para crear una conexión a una URL especifica por método GET y en este caso, pasaremos nuestra variable por la url dándole valor a la variable "valor", que esa variable será la que imprima el script al enviar, pero codificado con encodeUriComponent este método lo que hace es:

Al final de la cadena escribí un true, eso especifica si es asincrónico (true),  sincronico (false) , que si ponemos false (sincrónico), pierde lo bueno que tiene el ajax , por eso  por default está en true.

Segunda parte:

Primero con una sentencia de control y el objeto ReadyState verificamos si el estado actual es 4 (Completado), si es así proseguimos, verificamos ahora el estatus si es 404 (pagina no encontrada) lanzamos un alert de error,  si no es así, ya damos los retornos en campos especificados, voy a explicar solo uno bien:

usamos innerHTML para escribir dentro de una capa, en este caso dentro de la capa "cabecera", escribimos el resultado del objeto getAllResponseHeaders(), que retorna las cabeceras de nuestro envío, aquí devolvería algo como:

responseText devolveria el texto recibido por que en nuestro script,  como dije arriba, imprime la variable "valor" recibida por GET que fue el metodo que utilizamos y status devolveria el status actual que seria 200 (OK), por último , con el objeto send enviamos valor nulo por que no tenemos nada que enviar esta ves asi que lo dejamos vacio, el método de envío si lo hubiese , sería como pasar variables por una url concatenándolas:

Consejos para Ajax:

• Cuida de no repetir campos con el mismo id o si lo haces que nunca estén en pantalla al mismo tiempo por que dara error.
• Usa codificacion charset=utf-8 o empezaras a odiar el => �? ±
• Nunca dejes capas sin cerrar o en js variables sin declarar, sigue estandares xml y para javascript puedes usar la consola js de Mozilla Firefox que a mi me resulto bastante útil
• Ya que el source Js puede ser visto, pon enfasis en la seguridad de tus scripts de procesamiento.

Fuente: CodigosWeb.Net