Xitrus está alojado en:
AJAX es una tecnología que nos permite cargar de forma asíncrona contenido en nuestra web desde JavaScript, es decir, que sin recargar la página conseguimos recibir datos nuevos con lo que actualizar el contenido.
Esto se usa para tener páginas dinámicas y no tiene una gran complejidad ponerlo en práctica, todo empieza con XMLHttpRequest().
Esta API se gestiona desde el objeto XMLHttpRequest y nos permitirá crear peticiones http con el servidor (por seguridad no se puede realizar a otros ajenos).
Lo primero de todo es declararlo y asegurarnos de que disponemos de esta API, aunque está muy establecida y desde hace muchos años tiene total compatibilidad.
- // Comprobamos que está disponible
- if(window.XMLHttpRequest) {
- ajax = new XMLHttpRequest()
- }
Una vez que ya tenemos el objeto con el que usaremos AJAX (que lo hemos almacenado en la variable "ajax") lo primero que tenemos que hacer es establecer que hacer cuando recibamos una respuesta tras lanzar una petición, y esto se realiza con la propiedad onreadystatechange del objeto, que contendrá una función.
- // Estructura
- ajax.onreadystatechange=[función]
-
- // Añadimos la función en línea
- ajax.onreadystatechange=function(){ /* ... */ }
-
- // Añadimos una función existente
- function respuesta(){ /* ... */ }
- ajax.onreadystatechange=respuesta
Una vez establecida la propiedad cuando haya un cambio en una petición AJAX se ejecutará esta función.
Ahora que ya hemos establecido que pasará con la petición la realizaremos, con la propiedad open del objeto que contiene la API de AJAX, que tiene distintos parámetros muy simples.
- // Estructura
- ajax.open("[Método de petición]","[URL]",[Asíncrono])
El método de petición puede ser "GET" o "POST" (que se diferencian en que POST envía datos por separado y GET por la URL, si es que los manda), el siguiente parámetro es la URL del archivo que descargaremos, que tiene que estar en el mismo servidor desde donde se ha cargado la página y por último indicar si la petición es asíncrona, y siempre tenemos que establecerlo como true (de no hacerlo cuando se este realizando la petición se bloqueará la página).
Por otro lado, para realizar la petición (para ejecutarla) tenemos que usar la función send() que tiene el objeto AJAX, y como por el momento no vamos a mandar nada le añadiremos como atributo un null.
- // Pedimos el archivo "prueba.txt"
- ajax.open("GET","prueba.txt",true)
- ajax.send(null)
Hasta aquí hemos visto lo básico, ahora tras haber ejecutado la petición cuando haya cambios (se esté descargando o haya llegado, por ejemplo) la función que está esperando cambios (contenida en ajax.onreadystatechange) se ejecutará, pero nosotros queremos que solo cambie responda esta función cuando hemos descargado el archivo completo y es correcto, para ello usaremos readyState y status que le darán a la función información de si está finalizada la petición o no (así solo se ejecutará al finalizarse).
La propiedad status (en este caso ajax.status) nos devolverá tras la recepción del archivo el código del estado de la página (200 es correcto, 404 es no encontrado...).
Y la propiedad readyState nos devolverá el estado de la petición, con números del 0 al 4 que tienen los siguientes significados:
Por lo que una petición resuelta correctamente nos tiene que devolver el estado de lectura número "4" y el número de estado de la página "200", y es lo que vamos ha hacer en la función de respuesta, solo ejecutar el contenido ante estas condiciones (sino se ejecutaría con cada cambio).
- // Comprobamos que está disponible
- if(window.XMLHttpRequest) {
- ajax = new XMLHttpRequest()
- }
- // El contenido del archivo saldrá en una alerta
- ajax.onreadystatechange=function(){
- if(ajax.readyState == 4) {
- if(ajax.status == 200) {
- alert(ajax.responseText)
- }
- }
- }
- // Pedimos el archivo "prueba.txt"
- ajax.open("GET","prueba.txt",true)
- ajax.send(null)
La propiedad responseText es la que contiene la respuesta del mensaje, que solo es accesible cuando ha sido totalmente procesada y el estado de la petición es "4".
Si queréis probar este mismo ejemplo podéis pulsar el botón que abre el contenido de un archivo llamado prueba.txt.
Esta es la introducción a AJAX, aún queda ver las peticiones del tipo POST y mandar formularios a través de esta tecnología, que nos puede ser de ayuda para evitar recargar muchas veces la misma página, entre otras muchísimas cosas que podemos hacer.
Xitrus está alojado en:
