7.- Ejemplo AJAX - Curso AJAX y jQuery

Después de tener listo nuestro entorno de trabajo, a partir de este y demás capítulos pondremos en práctica el uso de AJAX, mostrándote en este capítulo un par de sencillos ejemplo.

Recordar que para estos ejemplos, necesitaremos de un entorno http o https, pues al hacer llamados a un servidor o algo que simule este, se deberá hacer bajo este entorno, para ayudarte un poco en la configuración de uno, hemos visto el anterior módulo de cómo hacer esto.

Como hemos hablado, la programación de AJAX es un proceso de cuatro sencillos pasos. Primero deberemos crear un objeto XMLHTTPRequest, en este paso le decimos al navegador web que se prepare para una petición AJAX, luego definir la función a ejecutar con la respuesta del proceso ajax, a continuación debemos generar una solicitud y por último enviar la solicitud.

Bien agregaremos las etiquetas script, para poder trabajar sobre este entorno JavaScript y crear un objeto XMLHTTPRequest que le hemos indicado a ser xhr, el nombre de este objeto puede variar. A continuación, agregaremos una función una vez concretada la solicitud, donde con la respuesta obtenida agregaremos un contenido a una sección HTML. Luego con una simple línea de JavaScript, llamaré a través de la función open, una url, y por último terminaremos el envió.

Lo que estoy haciendo aquí es crear una variable llamada XHR, posterior a ello tenemos la función onreadystatechange, que es un manejador de eventos cuando se dispara o ejecuta el llamado AJAX, dentro de está función, tenemos una condicional que incluye a objeto xhr con el atributo readyState, este atributo puede tomar cinco valor del 0 al 4, donde el valor 4 se dará cuando la operación GET a sido completada, luego hemos establecido un método GET, que indica traer consigo una apertura de una url, y para terminar tenemos el método send, que nos sirve para enviar la solicitud AJAX.

Tener presente que la función de devolución de llamada es el corazón de un programa en Ajax pues a partir de ahí tenemos el control para ejecutar ciertas instrucciones o mejor dicho hacer lo que mejor nos parezca con esa respuesta del servidor.

Pensemos en una devolución de llamada como una nota que deja el navegador web diciendo, me da una llamada cuando esté listo. Cuando el navegador web envía su solicitud ajax continúa haciendo otras cosas, esta es la parte asincrónica de ajax. Caso contrario cuando un navegador envía una solicitud síncrona, no sólo espera hasta que obtenga una respuesta, sino que también el navegador se congelaría y el usuario no podría hacer nada hasta que la respuesta regresara del servidor.

Tomar en cuenta.

Si el servidor llega a nunca responder una solicitud de llamada, puede asociarse a la posibilidad que el servidor este inactivo o hay un problema con la conexión a Internet.

Si en algún momento necesitamos enviar cuatro solicitudes AJAX y por cualquier razón el servidor web puede manejar esa cuarta solicitud rápidamente. La devolución de llamada para esa cuarta solicitud se ejecutará primero y no en el orden enviado, a lo que quiero llegar es que, nunca se puede saber en qué orden se ejecutarán sus devoluciones de llamada AJAX, a no ser que a través de instrucciones continuas se establezca un orden de prioridad.

Cuando obtengamos una respuesta AJAX, necesitaremos activar un evento para esta solicitud. Si has programado JavaScript antes, deberías saber de qué se trata un eventos. Un evento es algo que sucede en el navegador web, una acción que un usuario toma, como hacer clic en el botón con el ratón o enviar un formulario. Por ejemplo, cuando un usuario envía un formulario, puedes comprobar si lo llenó correctamente. El evento aquí es enviar el formulario, donde comprobar los datos del formulario, será el programa que se ejecuta en reacción al evento, y luego se dará una devolución de llamada al evento. Hay eventos para los clics del ratón, pulsaciones de teclas, desplazamiento, e incluso el cierre de una ventana.