Ajax : Introducción y Ejemplos

Prototype Capitulo 01 – Introducción a Ajax

Hola a todos, estoy realizando un primer curso en mi blog, y creí que seria un buen tema la del framework prototype (Javascript, Ajax).

En esta intro les escribiré sobre una introducción a Ajax.

página web

Ajax ¿Para que sirve?

Ajax en una propuesta para paginas web que quieran mejorar su interfaz y su usabilidad.
Ocultando interacciones que el usuario final realiza con el servidor (consultas a BD, inserts, updates, etc) para solamente
mostrar las actualizaciones en una parte especifica de la pagina y así agilizar la pagina web ( no esperar largas demoras al actualizarse una pagina ).

Ajax y las Aplicaciones de Escritorio

Si bien una aplicación de escritorio es mucho mas veloz que una en web por su rápida respuesta.
Ajax le da la solución a las aplicaciones Web, ya que con esto agilizaran su respuesta y tendrán las mismas ventajas que tienen las aplicaciones Windows, podrán hacer las mismas acciones y eventos , con una interfaz mucho mas amigable.

Significado

Ajax es simplemente Javascript y XML asincronos (Asynchronous Javascript And XML)

Es solamente otra moda pasajera?

Si bien Microsoft, Google, Amazon, Yahoo, entre otros están totalmente en desacuerdo, pienso que tienen que saber usar Ajax en una aplicación Web.

Ejemplo:

En un proyecto de Tienda virtual el frontend no debería tener mucho de Ajax ya que sus usuarios mas comunes no tendrían por que saber de configuracion de su browser , esto implica la habilitacion del Javascript y si soporta Ajax, Un Ejemplo de aprovechamiento del Ajax seria en el backend de la Tienda Virtual ya que sus Empleados de actualizacion de productos y Pedidos, ya que su lugar de operaciones sera un ambiente apropiado y podrá estar previamente configurado para ejecutar Aplicaciones con Ajax.
En Resumen no deben usar Ajas para impresionar a sus usuarios finales con efectos maravillosos, validaciones con alertas muy llamativas y cosas así.

Google Maps, un Ejemplo claro

Es un muy buen ejemplo de carga de gráficos asincronamente (lo que se dice detrás de la pantalla)
en esta aplicación las imágenes se cargan en un principio y al arrastrar se cargan las del fondo,
es por eso que nos da la impresión de ser un mapa

Como se hace ?

Para simplificar Ajax lo veremos de esta forma

-Solicitud y Respuesta

Esto es una forma en que interactúa el navegador con el servidor, cuando el usuario esta viendo
la pagina web, el navegador utiliza el conocido XMLHttpRequest (XHR), esto hace que diferentes áreas
de la pagina web carguen de manera asíncrona, permitiendo navegar tranquilamente al usuario mientras carga
la pagina completamente (Las partes que se están cargando tienen Callbacks, lo que permite dar
avisos de estados de carga de la pagina)

Como empezar

Primero:

como has echo para implementar Ajax en tus sitios web (si lo has echo)?

si les gusta reinventar la rueda pues están sin resolver el problema o creen que seria un mejor trabajo,
la mayoría de desarrolladores utilizan librerías ya escritas con un buen performance en producción
La elección se basa en el Lenguaje de programación usado del lado del Servidor
Los mas populares son:

DWR(Java), Prototype (PHP),Ajax.net (.NET), entre otros.

Estas librerías hacen que la implementación de Ajax sea muy divertida al momento de programar, también
tienen un buen soporte así como actualizaciones permanentes, estas herramientas nos hacen la vida mas fácil al momento de desarrollar los proyectos.

Espero que les aya gustado esta pequeña introducción pero buena en contenido.
Los capítulos saldrán una vez por semana, el próximo tratara sobre una introducción al framework prototype.

También te puede interesar

4 Comments

  1. Carlos
    may 14, 2009 @ 11:42:21

    SALU2

    Eh buscado en la web muchos tutoriales con una definicion completa y directa de AJAX y no quedaba satisfecho, pero creo q ya la encontre y muchas gracias ha sido de gran ayuda!, estoy demasiado interesado a comprender como funciona ajax porque quiero umplementarlo en sitios a a desarrollar. Empezare a recomendar este blog.

  2. irving
    ago 17, 2010 @ 18:14:42

    ola que tal oie aun no termino mi pagina pero en ella kiera poner una imagen la kual seria mi intro pero no encuentro la manera de acerlo un amigo me comento que podria acer por medio de la libreria de ajax me podrias xplicar plis muchas gracias k sts bn

  3. Tweets that mention Ajax : Introducción y Ejemplos -- Topsy.com
    ene 29, 2011 @ 09:14:54

    [...] This post was mentioned on Twitter by Cesar Mancilla, Juan Carlos Nuñez. Juan Carlos Nuñez said: RT @craftyman: El primer POST! … Ajax : Introducción y Ejemplos http://t.co/rod6Nbk vía @Craftyman [...]

  4. Sergio
    oct 26, 2011 @ 06:32:48

    El término moda pasajera lo veo más apropiado para frameworks, Flash y CMS open source, debido a qué la propia evolución de la tecnología ofrece soluciones mejores y pierden uso este tipo de plataformas.

    Ajax no es ni una tecnología, ni un lenguaje, ni una moda ni esto ni lo otro…es un medio para consultar y transportar datos con el server. Salvando las diferencias es como comparar el modelo MVC de PHP,haciendo Ajax la función de controlador.