Las peticiones a un servidor son ciertamente necesarias para una buena comunicación en un sistema de desarrollo web, pues no todo es posible desde el lado del cliente. Es entonces necesario solicitar algunas acciones al servidor para tener una completa interacción.
JavaScript es el lenguaje programación interpretado que tiene soporte en todos los navegadores web actuales, y es un pilar esencial en la creación de todo proyecto orientado a la web. Se encargará de hacer una página dinámica y responsiva a las acciones de un usuario.
AJAX (Asynchronus JavaScript And XML) no es un lenguaje de marcado ni de programación, y tampoco hablo de la marca de productos de limpieza. Es un mecanismo que permite la comunicación asíncrona entre el cliente y el servidor de manera continua sin interrumpir los aspectos visuales de la página, haciendo actualizaciones parciales de la misma.
Existen varios métodos de HTTP para permitir la comunicación entre cliente y servidor, pero los más utilizados son GET y POST, ambos tienen sus diferencias, siendo las más destacables que POST no tiene límite para el tamaño de información y es un poco más seguro que GET.
Peticiones AJAX con JavaScript Usando GET
Es todo lo que pido
Comencemos con el siguiente documento en HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Peticiones AJAX con JS</title> </head> <body> <p id="parrafo">¿Cuál es tu correo?</p> <button id="cambiar">¿Disculpa?</button> <script src="ejemplo.js" type="text/javascript"></script> </body> </html> |
Dejando de lado la explicación de lo más básico en HTML, nos vamos directo a su contenido. Hasta ahora tenemos un párrafo y un botón en el body, así como un script hasta el final.
Lo que haremos primero será solicitar la lectura de un archivo de texto que se encuentra en el servidor, al momento de presionar el botón.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
document.getElementById("cambiar").addEventListener("click",cambiar); function cambiar(){ var xhr = new XMLHttpRequest(); xhr.open("GET","educado.txt",true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById("parrafo").innerHTML = xhr.responseText; } } } |
Este es el código en JavaScript, y asumiendo nuevamente que ya se tienen los conocimientos básicos del lenguaje explicaré cada parte del código que aquí se muestra. Comenzando por:
|
1 |
document.getElementById("cambiar").addEventListener("click", cambiar); |
Esto es el método addEventListener de un elemento en HTML, en este caso es el botón con id=”cambiar“. Cuando se de un click en él, se ejecutará la función cambiar. Para los navegadores IE 8 y anteriores, se necesitaría tener la siguiente forma:
|
1 |
document.getElementById("cambiar").attachEvent("onclick", cambiar); |
Dentro de la función cambiar se encuentra lo siguiente:
|
1 |
var xhr = new XMLHttpRequest(); |
Se crea una instancia del objeto XMLHttpRequest, y a través de los siguientes métodos se puede fácilmente transferir información entre cliente y servidor:
|
1 2 |
xhr.open("GET","educado.txt"); xhr.send(); |
Open inicia la petición, los parámetros obligatorios son los dos primeros. En este caso elegimos el método GET y enseguida la URL a quien se envía la petición. Los otros parámetros son opcionales, así que los omitiremos para tener un código más sencillo.
Send envía la petición para acceder al archivo educado.txt.
Ahora se debe especificar que ocurre después de recibir la respuesta del servidor. Hay que decirle a nuestra instancia de XMLHttpRequest quién se encargará de continuar el proceso. Para hacerlo debemos asignar la referencia de una función a la propiedad onreadystatechange de nuestro objeto. La cuál será llamada cada vez que la propiedad readyState cambie.
Aquí usaremos una función anónima con una condición en su interior.
|
1 2 3 4 5 |
xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById("parrafo").innerHTML = xhr.responseText; } } |
Así que la función será ejecutada varias veces, pero sólo nos interesa que algo ocurra cuando se cumpla la condición de su interior.
Los posibles valores de readyState son:
- 0: petición no inicializada
- 1: conexión con el servidor establecida
- 2: petición recibida
- 3: procesando petición
- 4: petición terminada y respuesta lista
Entre los tantos códigos de status de HTTP, nos importa que sea 200, que es la respuesta estándar de una petición exitosa. Entonces, si todo sale bien, el contenido del párrafo con id=”parrafo” cambiará por el contenido del archivo que queremos leer.
Veamos que tal se ve:
Y después de dar click al botón:
Peticiones AJAX con JavaScript Usando POST
Algo un poco más complicado
Ahora que todos actuamos de forma civilizada y sabemos como establecer una comunicación básica, hagamos algo un poco más complicado. Esta vez utilizando el método POST y PHP para verificar un correo electrónico que se escriba en un input.
El body del HTML quedaría ya modificado:
|
1 2 3 4 5 6 7 8 |
<body> <p id="parrafo">¿Cuál es tu correo?</p> <button id="cambiar">¿Disculpa?</button> <input type="email" id="correo"> <button id="enviar">Enviar</button> <p id=”respuesta”></p> <script src="ejemplo.js" type="text/javascript"></script> </body> |
Tan sólo se ha agregado el input para que pueda escribirse el correo por supuesto,un nuevo botón y un párrafo de respuesta. El botón se encargará de activar el envío de información del campo de texto al servidor, el cuál procesará el correo y nos devolverá una respuesta por medio de un script en PHP, entonces agreguemos lo siguiente al código en JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
document.getElementById("enviar").addEventListener("click",enviar); function enviar(){ var su_correo = "correo="+document.getElementById("correo").value; var xhr = new XMLHttpRequest(); xhr.open("POST", "verifica.php"); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(su_correo); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById("respuesta").innerHTML = xhr.responseText; } } } |
Encontraremos algunas cosas nuevas:
|
1 2 |
xhr.open("POST", "verifica.php"); xhr.send(su_correo); |
Ahora utilizamos el método POST y enviamos la petición con la información a verifica.php.
|
1 2 |
var su_correo = "correo="+document.getElementById("correo").value; xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); |
Primero convertimos lo que queremos enviar a una forma url-encoded, bastará con una simple concatenación ya que sólo enviaremos una variable (correo). El método setRequestHeader especifica el tipo de información que se enviará (que es la forma en que ya se encuentra la cadena su_correo). Una vez que se procesa la cadena, la respuesta del servidor será la salida del código PHP.
Este es el contenido de dicho código:
|
1 2 3 4 5 6 7 8 |
<?php if (filter_var($_POST['correo'], FILTER_VALIDATE_EMAIL)) { echo 'Correo Válido'; } else { echo 'No Válido'; } ?> |
$_POST[‘correo’] asocia la variable correo que enviamos con el método POST tomando el valor que se escribió en el campo cuando el contenido de la petición es del tipo application/x-www-form-urlencoded o multipart/form-data.
filter_var es una función de PHP que filtra un valor con distintos tipos de validaciones, en este caso FILTER_VALIDATE_EMAIL bastará para comprobar si es un correo válido. Retornando el valor filtrado si es verdadero o FALSE en caso contrario.
Finalmente, si todo sale como esperamos, se escribirá la respuesta en el párrafo con el id=”respuesta”.
Conclusión
Siempre es bueno conocer como hacer las cosas de distintas maneras, pues existe la posibilidad de no contar con las herramientas a las que tanto nos aferramos.
AJAX con JavaScript no es en realidad muy complicado, pero existen otras alternativas más populares como JQuery que puede reducir el código anterior a unas pocas líneas y en proyectos muy complejos eso podría facilitar su mantenimiento.
Un tema que podría resultar interesante discutir es el rendimiento de un navegador al utilizar las librerías de jQuery o JavaScript puro, pero se dice que la diferencia no es considerable estos días y no hay un claro ganador.
jQuery parece ser el favorito de la mayoría de desarrolladores web. En mi opinión, es cuestión de gustos, ya que siempre habrá algunos que querrán hacer todo a la manera difícil y esto podría incluso resultar en mejores alternativas para un futuro.
Código
Puede encontrar los archivos aquí mencionados en este repositorio.
