Mostrando entradas con la etiqueta AJAX. Mostrar todas las entradas
Mostrando entradas con la etiqueta AJAX. Mostrar todas las entradas

jueves, 1 de septiembre de 2016

Que es AJAX y Para que Sirve

AJAX es el acrónimo de Asynchronous Javascript and XML, es decir, Javascript y XML Asíncrono.

Es una técnica de desarrollo web para crear aplicaciones interactivas o. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
Veamos un esquema para comprender mejor la idea que hay detrás del uso de Ajax. Este esquema lo iremos comentando y comprendiendo a medida que avancemos en la explicación.



ajax comunicacion esquema

Con Ajax, se hace posible realizar peticiones al servidor y obtener respuesta de este en segundo plano (sin necesidad de recargar la página web completa) y usar esos datos para, a través de JavaScript, modificar los contenidos de la página creando efectos dinámicos y rápidos.

En el esquema anterior vemos las ideas en torno a Ajax de forma gráfica. En la parte superior hemos representado lo que sería un esquema de comunicación tradicional: el cliente solicita una página web completa al servidor. El servidor recibe la petición, se toma su tiempo para preparar la respuesta y la envía. El resultado, una pequeña demora debido al tiempo que tarda en llegar la petición al servidor, el tiempo que éste tarda en preparar la respuesta, y el tiempo que tarda en llegar la respuesta más recargarse en el navegador.

En la parte inferior vemos lo que sería un esquema de comunicación usando Ajax: el cliente tiene una página web cargada (puede ser una página web completa, o sólo el esqueleto de una página web). El cliente sigue trabajando y en segundo plano (de ahí que hayamos dibujado con líneas punteadas las comunicaciones) le dice al servidor que le envíe un paquete de datos que le hacen falta. El servidor procesa la petición. Ahora la respuesta es mucho más rápida: no tiene que elaborar una página web completa, sino sólo preparar un paquete de datos. Por tanto el tiempo de respuesta es más rápido. El servidor envía el paquete de datos al cliente y el cliente los usa para cambiar los contenidos que se estaban mostrando en la página web.


Share:

Ejemplos

El ejercicio consiste en ver un breve ejemplo de uso de Ajax para realizar sugerencias de búsqueda (algo parecido a lo que hacen los buscadores cuando muestran sugerencias una vez hemos empezado a introducir una palabra).

Si deseas desarrollar este ejercicio, para desarrollarlo necesitas tener conocimientos básicos de PHP y disponer de un servidor (puede ser un servidor remoto o un servidor local como WAMP ó XAMPP o similar). Empecemos...


Escribe este código y guárdalo en el servidor con el nombre de archivo pruebaAjax.html:

Si desea copiarlo directamente haga clic aquí

Escribe este código y guárdalo en el servidor con el nombre de archivo listadoDatos.php:

Si desea copiarlo directamente haga clic aquí
Share:

Ventajas y Desventajas

Ventajas



  • ·         Rapidez en las operaciones.
  • ·         Menos carga del servidor (menos transferencia de datos cliente/servidor).
  • ·         Menos ancho de banda.
  • ·         Soportada por la mayoría de navegadores.
  • ·         Interactividad (El usuario no tiene que esperar hasta que llegen los datos del servidor).
  • ·         Portabilidad
  • ·         Usabilidad
  • ·         Velocidad (Debido a que no hay que recargar la página nuevamente)


Desventajas



  • ·         Se pierde el concepto de “volver a la página anterior”.
  • ·         Problemas con navegadores antiguos.
  • ·         No funciona si el usuario tiene desactivado el Javascript en su navegador.
  • ·         Se requieren conocimiento sobre las tecnologías que forman AJAX.
  • ·         Problemas SEO, los buscadores no indexan la información recibida vía AJAX.

Share:

Archivo del Blog

Todos los derechos Reservados al Autor. Con la tecnología de Blogger.