2. ¿Qué es AJAX? Desarrollo web Siglo 21 PDF

Preview

Summary

material de estudio para la materia de la Universidad Siglo 21 desarrollo web 2021 2022 del periodo Octubre Diciembre...

Description

¿Qué es AJAX?

Desarrollo Web

AJAX AJAX es un acrónimo que viene de aynchronous Javascript and XMLo, traducido al español,Javascript y XML asíncrono, y es ampliamente utilizando hoy en día en el desarrollo web. Contrario a los que muchos creen, no es ni un lenguaje ni un estándar de programación. AJAX es un conjunto de tecnologías o una técnica para desarrollar sitios webinteractivos. En definitiva, y tomando las palabras que componen, se ve que se tieneJavaScript, que es un lenguaje de programación del lado del cliente; XML (siglas en inglés de eXtensible Markup Language) que es un estándar para intercambio de datos (aunque se verá que no es exclusivo e incluso hoy en día se utilizan otros formatos, como JSON [acrónimo de “JavaScript Object Notation”, es un formato de texto para el intercambio de datos.]) y asíncrono que, dentro de un esquema de comunicación web, lo que significa es que, mientras la web ha sido visualizada en el navegador, puede ir solicitando (sin certeza de cuándo llegará) otro contenido para completar la visualización de la web. En definitiva, la gran diferencia es que, mediante AJAX, no es necesario recargar toda la página, sino que se puede trabajar sobre un bloque o sector de esta, refrescar o enviar formularios sin necesidad de volver a cargar la página.

Comunicación En esta sección, se va a analizar en alto nivel el esquema de comunicaciones tradicional y mediante AJAX. Para ello, serecurre a una imagen como la siguiente para visualizar y tratar de entender las diferencias: Figura 1: Peticiones web al utilizar AJAX

Fuente: elaboración propia. (HTML: HyperText Markup Language; JS: JavaScript; HTTP: Hypertext Transfer Protocol )

2

Como se ve en la Figura 1, en la comunicación tradicional (a la izquierda), el navegador solicita contenido a un servidor web y este responde enviando el HTML y los recursos (imágenes, código CSS [Hojas de Estilo en Cascada], etc.). Mediante AJAX, si bien responde de manera similar al inicio, la novedad es que, una vez cargada la página web o petición original, puede seguir mediante JavaScript al solicitar contenido al servidor web y actualizar este en el navegador web y sin necesidad de andar refrescando el contenido completo. Si bien AJAX fue concebido en un comienzo para transferir datos en un solo formatoconocido como XML (de ahí sus siglas), hoy por hoy se pueden utilizar muchos otros formatos aparte de XML, como lo son JSON, texto plano, EBML (“Meta Lenguaje Binario Extendible”, formato creado a partir de XML), HTML y muchos otros. Para intercambio de datos, hoy está ampliamente difundido el formato JSON.

Ventajas y desventajas de AJAX Vamos a analizar algunas ventajas y desventajas de utilizar AJAX. Como ventajas de utilizar esta tecnología, podemos nombrar:  



mejora la experiencia de usuario al poder cargar las páginas web rápidamente y de acuerdo con solicitudes del usuario; la percepción del usuario es de mayor rapidez que una carga completa tradicional, ya que el resto de las peticiones ocurren en un segundo plano; se pueden enviar formularios, editar tablas de datos y demás sin tener que recargar la página y todos sus controles cada vez.

Por el lado de las desventajas de AJAX, podemos citar: 





el historial de navegación y la funcionalidad Volver de los navegadores se puede ver afectada al utilizar AJAX, ya que no se guardan estas peticiones que ocurren en segundo plano; requiere de un mayor desarrollo en términos de complejidad a la hora de programar un sitio web si se lo compara con el sistema tradicional de petición-respuesta única; puede perjudicar el posicionamiento de un sitio web en algunos buscadores, ya que el contenido es variable o de carga dinámica (diferente a los casos tradicionales, donde el contenido puede considerarse estático) y muchos buscadores no indexan código JavaScript, por ejemplo.

3

Ejemplo de utilización de AJAX Dependiendodel entorno, del lenguaje de programación y de para qué se quisiera implementar AJAX, la complejidad puede variar considerablemente. Por ello, hoy en día se utilizan librerías como jQuery para JavaScript que facilitan enormemente las tareas. Por si todavía estás pensando dónde se utiliza AJAX, algunos ejemplos de uso cotidiano: en un campo de búsqueda, cuando se completa con valores sugeridos a medida que se escribe; un chat basado en web (se ve cómo se actualizan los mensajes, pero el entorno sigue idéntico); para corroborar si un nombre de usuario existe en un formulario web y pintar el control de verde si se puede utilizar o advertir al usuario que el nombre elegido no se puede utilizar y pintarlo de rojo, etcétera. Todos estos y muchos más son ejemplos del uso de esta técnica conocida como AJAX. Se verá entonces un ejemplo sencillo de un Hello World utilizando HTML, Javascript y lenguaje PHP:



Num 1 Num 2 Sumar

4

Resultado de la operación: Fin del ejemplo

En el código anterior, se utilizó la librería jQuery y su función ajax() para realizar la operación. Para consultar la referencia completa, puedes ingresar a http://api.jquery.com/jquery.ajax/ Básicamente, lo que planteamos es un formulario sencillo con dos cajas de texto para ingresar dos valores numéricos y un botón para sumarlos. Al hacer clic en el botón para enviar el formulario, siguiendo un método tradicional, se refrescaría la ventana del navegador y se dirigiría la petición ala página ‘sumar.php’; pero con este esquema en un segundo plano llamamos a ‘sumar.php’ y se aguarda su respuesta sin refrescar completamente el sitio. Una vez que la respuesta llega desde el servidor, su resultado se verá reflejado dentro de la etiqueta con id = resultado que fue creada para tal fin. Los parámetros que recibe la función “procesoAJAX” son los valores de los inputs numéricos, donde el usuario ha ingresado los valores que se van a sumar. Luego, se codifican estos valores en formato JSON y se los envía mediante AJAX, especificando el parámetro data (los datos enviados propiamente), URL (la dirección del archivo que procesará nuestra consulta) y “type”, al igual que los métodos HTTP del formulario que se puede optar por POST o GET. Al final, se encuentran dos métodos llamados“beforeSend” y “success”, los que básicamente sirven para programar la acción que se va a ejecutar (1) mientras se procesan los datos en el servidor y (2) una vez que se recibe la respuesta de él. Para finalizar el ejemplo, está faltando el archivo PHP (sumar.php) que procesará los números y devolverá su suma:

Entonces, completando así el esquema con HTML, JavaScript y PHP, se puede representar la arquitectura como la figura siguiente.

5

Figura 2: Esquema AJAX, con el servidor web, PHP y JavaScript

Fuente: elaboración propia. (BD: base de datos)

Si se compara el ejemplo con el esquema, lo que estaría faltando es la consulta a la base de datos que, por razones de simplificación en el ejemplo, se ha obviado. Recuerda siempre sanitizar los datos antes de enviarlos para evitar inyecciones de código o vulnerabilidades con fines maliciosos para las aplicaciones.

6

Referencias ECMA International. (2013). The JSON Data Interchange Format No. Standard ECMA-404 (Traducción propia / Ramonda C., Trad. Carlos Ramonda) (1.a ed.). Recuperado de http://www.ecma-international.org/publications/files/ECMAST/ECMA-404.pdf Gauchat, J. D. (2013). El gran libro de HTML5 CSS3 y Javascript. Barcelona: Marcombo. Cap. 13. jQuery API Documentation. https://api.jquery.com/

(s.

f.).

jQuery

API.

Recuperado

de

7...