En busca del poder de AJAX, navegando por la WEB hace un par de años, recuerdo que busqué por aproximadamente 80 sitios web (no es mentira) acerca de AJAX, pues había escuchado que con este podía hacer cosas grandiosas sin recargar la página. ¿A quién no le llama la atención este superpoder? No tenía idea de lo que era o como se trabajaba éste, pero algo sí sabía: Yo quería aprenderlo.
En mis búsquedas recuerdo claramente encontrar información muy completa, ¡pero! en inglés, y en otras ocasiones recuerdo muy bien encontrar el término «con Jquery» en las guías para aprender Ajax. Diablos yo no quiero aprender Jquery, yo quería aprender AJAX, y estaba dispuesto a darlo todo por aprenderlo; así que no tuve más remedio que introducirme en las comunidades y webs de habla inglesa.
Así luce AJAX:
const XHR = new XMLHttpRequest();
XHR.open('GET','nuevo.html', true);
XHR.send();
XHR.onreadystatechange = function(){
if(this.readyState == "4" && this.status =="200")
{
data = this.responseText;
}
}Y créeme, no es para nada difícil de entender.
La Guía de Ajax En Español
Llegaste al lugar correcto, en esta guía de AJAX en español vamos a desglosar el código anterior y conocer lo que es AJAX y sus propiedades más importantes para trabajar con él y no morir en el intento (o perder la cabeza) pues en realidad es muy sencillo si te lo ponen en tu idioma y te lo explica Óscar Leuro, obvio.
Antes de empezar aclaro que debes tener conocimiento de programación orientada a objetos y que primero iniciaré esta guía con una parte teórica para dejar los conceptos claros y luego vendrá la parte técnica, así que no desesperes y presta mucha atención que para dominar un tema es necesario primero conocer conceptos.
¿Qué es Asyncrhonous JavaScript And XML (AJAX)?
Voy a ser bastante breve para no aburrirte mucho: AJAX no es un lenguaje de programación, simplemente es un modelo para hacer peticiones (Request) al servidor de manera asíncrona, es decir que puedes hacer múltiples peticiones de datos al servidor sin tener que esperar la respuesta de la anterior.
Como mencioné antes, AJAX no es un lenguaje de programación sino que es sencillamente JavaScript el cual para hacer sus peticiones asíncronas trabaja con la clase XMLHttpRequest y crea una petición como un objeto.
const XHR = new XMLHttpRequest()
Pero antes de seguir tirando código como locos, primero debemos conocer las propiedades y métodos correspondientes de un objeto XMLHttpRequest.
Métodos de la clase XMLHTTPRequest
Ya había dicho que trabajar con AJAX es trabajar con la clase XHTTPRequest (Aunque existen otras maneras también) por lo que también cuenta con métodos, los cuales son vitales para realizar nuestra petición correctamente y obtener la respuesta que queremos.
A continuación te presento los métodos más importantes de la clase:
Método Open
XHR.open('GET','file.html', true)Con el método open indicamos el tipo de petición que es: GET o POST, la primera para obtener y la segunda para enviar, también indicamos el archivo de donde vamos a obtener la data o enviarla, y por último el tercer parámetro, es un bolean, que indica en true que la petición es asíncrona o false si no lo es (No tiene sentido que no lo sea).
Método Send
Con este método indicamos si es que queremos enviar información, obviamente antes debemos modificar el primer parámetro del método OPEN por «POST» y también agregar como parámetro la variable o constante con el signo = entre comillas concatenada con los datos que vamos a enviar a través de esa variable o constante.
XHR.send("data=" + variable)También se puede enviar los datos mediante un objeto de la clase FormData()
let form = document.getEelementById('formulario');
XHR.send(new FormData(form))Si no se quiere enviar datos los parámetros del método send quedan vacíos.
XHR.send()
Método setRequestHeader
Este método se usa siempre y cuando estemos enviando datos. El método setRequestHeader tiene dos parámetros, el primer indica al servidor qué tipo de cuerpo estamos enviando mediante headers (cabeceras) y el segundo parámetro el valor de esta cabecera.
Existen muchos tipos de cabeceras pero la que usamos en la mayoría de casos es Content-type con el valor application/x-www-form-urlencoded o multipart/form-data.
XHR.setRequestHeader('Content-type','application/x-www-form-urlencoded');Si quieres conocer más de las cabeceras HTTP aquí te dejo algo más de información que puedes revisar luego de haber concluido esta guía.
Propiedades de un Objeto de la Clase XMLHttpRequest
Sigamos explicando nuestro código inicial: ahora que conocemos los métodos, es momento de seguir con las propiedades del objeto XMLHttpRequest.
Estás propiedades nos permitirán obtener nuestra respuesta del servidor.
XHR.onreadystatechange = function()
{ if(this.readyState == "4" && this.status =="200")
{ data = this.responseText; }
}- onreadystatechange :Ejecuta la función que se realizará dependiendo del cambio del estado de la petición y respuesta del servidor.
- readyState: define y controla el estado de la petición
- status: indica el estado de la respuesta del servidor
- responseText: Almacena la respuesta obtenida de nuestra petición.
Propiedad onreadystatechange
Debemos iniciar con esta propiedad, esta es un handler, o manejador de evento que nos permite indicar la función que realizaremos luego de haber obtenido los valores de la propiedad status y readyState
XHR.onreadystatechange = function(){ }Propiedad ReadyState y los Estados de una petición AJAX
Otro punto muy interesante de trabajar con AJAX es que mientras se realiza una petición podemos ejecutar funciones en cada uno de sus estados(o etapas si así quieres llamarlo) conociendo los valores específicos de estos.
Es la propiedad readyState la que indica el valor del estado en el que se encuentra la petición:
- Valor 0 : La petición no ha sido inicializada
- Valor 1 : Nos hemos conectado al servidor
- Valor 2 : El servidor recibe la petición
- Valor 3 : La petición es procesada
- Valor 4 : La petición finaliza y la respuesta está lista
Ejemplo:
XHR.readyState = "4"
Nota: Recuerda que la palabra this hace referencia al objeto con el que estamos trabajando, por ello en el código inicial decía this.readyState en vez de XHR.readyState que es exactamente lo mismo.
Propiedad Status y los Mensajes de respuesta del Servidor
Así como podemos conocer los estados de la petición, también podemos conocer la respuesta del servidor y sus mensajes correspondientes a cada una de estas mediante la propiedad status.
Estas respuestas ocupan una larga lista, pero aquí te menciono las más importantes:
- «200» : OK
- «403» : «Forbidden»
- «400» : «Page not Found»
Si quieres conocer más de los mensajes de respuesta del servidor, aquí te dejo una lista
Propiedad responseText
Por último, la propiedad responseText es la que almacena la data recibida en respuesta de nuestra petición.
Podemos almacenar nuestra data obtenida en la respuesta en una variable o constante para pintarla o trabajar como queramos con ella.
data = this.responseText
Y con esto ya tenemos en claro los conceptos de cada uno de los métodos y propiedades para trabajar con AJAX y realizar cualquier tipo de petición.
¿Difícil? … ¿No verdad?
Ya que terminamos la parte teórica empecemos de una vez con la parte práctica en donde, si es que pusiste mucha atención a esta guía, podrás trabajar esto sin mucha dificultad.
Cómo Obtener Datos sin Recargar la Página con AJAX
Estamos trabajando en una aplicación WEB y necesitamos cargar la vista y data de otra página sin recargar la página en la que el usuario se encuentra, pues no queremos que pierda la información actual que se está trabajando. Por ello al presionar un botón el usuario quiere obtener la página de consulta y que esta sea mostrada en un contenedor determinado dentro de la página en la que se encuentra.
Solución:
Previamente creamos nuestros archivos y lugar de trabajo, donde pagina.html simulará la página de donde queremos obtener la información
- Creamos nuestros archivo index HTML que simulará la página en la que se encuentra el usuario, con nuestros elementos necesarios: un botón, una sección donde se mostrará los datos de la web obtenida e insertamos nuestro script ajax con el que trabajaremos nuestra petición.
<html> <body> <button id="btn_1">Botón1</button><br> <section id="seccion" style="width: 50%; height: 300px; border:solid 2px black"> </section> <script src="ajax.js"></script> </body> </html> - En nuestro archivo ajax.js empezamos por seleccionar los elementos HTML con los que vamos a trabajar y los guardamos en variables para mayor comodidad.
var btn1 = document.getElementById('btn_1'), seccion = document.getElementById('seccion'); - Agregamos un handler para el evento click a nuestro botón y enseguida creamos la función que se va ejecutar (La petición).
btn1.onclick = () => { //Aquí empezamos nuestra petición } - Creamos nuestro objeto de la clase XMLHttpRequest
const XHR = new XMLHttpRequest();
- Instanciamos el objeto con el método open y agregamos los parámetros: El primero es método GET porque queremos obtener información, el segundo es el nombre del archivo que contiene lada data que queremos, en este caso es «pagina.html» y como último parámetro el valor true para indicar que es una petición asíncrona
XHR.open('GET','pagina.html',true); - Instanciamos el objeto con el método send vacío pues no enviaremos datos.
XHR.send();
- Instanciamos el objeto y agregamos el handler onreadytStateChange y preparamos nuestra función la cual nos traerá la respuesta del servidor.
XHR.onreadystatechange = function(){ //Instrucciones de nuestra funcion } - En nuestra función creamos un condicional donde indique que si el estado de nuestra petición es «Finalizado» y el mensaje de respuesta del servidor es»OK» entonces nos guarde la data de la respuesta en la variable «data».
XHR.onreadystatechange = function() { if(this.readyState == "4" && this.status =="200" ){ var data = this.responseText; } } - Por último, dentro de la misma función, indicamos que vamos a insertar dentro de la etiqueta «sección» la data obtenida como respuesta de nuestra petición AJAX.
seccion.innerHTML = data;
- Este sería el resultado de nuestro código para dar solución al enunciado planteado:
var btn1 = document.getElementById('btn_1'), seccion = document.getElementById('seccion'); btn1.onclick = () => { const XHR = new XMLHttpRequest(); XHR.open('GET','pagina.html',true); XHR.send(); XHR.onreadystatechange = function() { if(this.readyState == "4" && this.status =="200" ){ var data = this.responseText; seccion.innerHTML = data; } } }
¡Listo! Aacabas de Realizar una Petición AJAX Correctamente
Conclusión
Ajax es una manera de hacer peticiones al servidor sin depender de la respuesta de una para iniciar otra (No recarga la página). Al trabajar con AJAX necesitamos hacer uso de sus métodos y propiedades para poder resolver los problemas que se nos plateen en la creación de nuestras aplicaciones.
Teniendo un buen dominio de los conceptos anteriormente mencionados yo estoy seguro que podrás hacer y deshacer con AJAX y un mundo nuevo de posibilidades se te habrá plasmado ante ti al obtener está habilidad nueva.