AJAX

AJAX.



  • ¿Que es AJAX?
AJAX es acrónimo de "Asynchronous JavaScript And XML" es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). 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.


Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página, aunque existe la posibilidad de configurar las peticiones como síncronas de tal forma que la interactividad de la página se detiene hasta la espera de la respuesta por parte del servidor.
Tecnologías incluidas en Ajax.



Ajax es una combinación de cuatro tecnologías ya existentes:

  • XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.
  • Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada.
  • El objeto XMLHttpRequest para intercambiar datos de forma asíncrona con el servidor web. En algunos frameworks y en algunas situaciones concretas, se usa un objeto iframe en lugar del 
  • XMLHttpRequest para realizar dichos intercambios. PHP es un lenguaje de programación de uso general de script del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico también utilizado en el método Ajax.
  • XML es el formato usado generalmente para la transferencia de datos solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.

Como el DHTML, LAMP o SPA, Ajax no constituye una tecnología en sí, sino que es un término que engloba a un grupo de éstas que trabajan conjuntamente.



Ejemplos de codigo AJAX.


La aplicación AJAX completa más sencilla consiste en una adaptación del clásico "Hola Mundo". En este caso, una aplicación JavaScript descarga un archivo del servidor y muestra su contenido sin necesidad de recargar la página.
Código fuente completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hola Mundo con AJAX</title>
 
<script type="text/javascript">
function descargaArchivo() {
  // Obtener la instancia del objeto XMLHttpRequest
  if(window.XMLHttpRequest) {
    peticion_http = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {
    peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
  }
 
  // Preparar la funcion de respuesta
  peticion_http.onreadystatechange = muestraContenido;
 
  // Realizar peticion HTTP
  peticion_http.open('GET', 'http://localhost/holamundo.txt', true);
  peticion_http.send(null);
 
  function muestraContenido() {
    if(peticion_http.readyState == 4) {
      if(peticion_http.status == 200) {
        alert(peticion_http.responseText);
      }
    }
  }
}
 
window.onload = descargaArchivo;
</script>
 
</head>
<body></body>
</html>
En el ejemplo anterior, cuando se carga la página se ejecuta el método JavaScript que muestra el contenido de un archivo llamado holamundo.txt que se encuentra en el servidor. La clave del código anterior es que la petición HTTP  y la descarga de los contenidos del archivo se realizan sin necesidad de recargar la página.
Aqui esta un ejemplo sencillo de AJAX aplicándose desde cero:



Librerias y Framework de AJAX.

Con esto de las aplicaciones web 2.0, se han desarrollado una gran cantidad de utilidades/herramientas/framework para el desarrollo web con JavaScript, DHTML (HTML dínamico) y AJAX. Entre algunas librerias y frameworks estan:

  • Prototype: es un framework basado en JavaScript que se orienta al desarrollo sencillo y dinámico de aplicaciones web. Es una herramienta que implementa las técnicas AJAX y su potencial es aprovechado al máximo cuando se desarrolla con Ruby On Rails. (fuente)
  • AHAH (Asychronous HTML and HTTP) es un microformato que permite la actualización asíncrona del contenido (X)HTML, y su formateo con CSS, al estilo de lo que hace AJAX. La diferencia con éste es que esto se realiza utilizando (X)HTML y no XML. Pero como (X)HTML puede ser visto como un dialecto de XML, entonces podemos decir que AHAH está incluído en AJAX (por lo que lo de llamarlo AJAX 2.0 es muy sensacionalista y poco estricto). (fuente)
  • dojo  es un Framework que contiene APIs y widgets (controles) para facilitar el desarrollo de aplicaciones Web que utilicen tecnología AJAX. Contiene un sistema de empaquetado inteligente, los efectos de UI, drag and drop APIs, widget APIs, abstracción de eventos, almacenamiento de APIs en el cliente, e interacción de APIs con AJAX. Dojo resuelve asuntos de usabilidad comunes como pueden ser la navegación y detección del navegador, soportar cambios de URL en la barra de URLs para luego regresar a ellas(bookmarking), y la habilidad de degradar cuando AJAX/JavaScript no es completamente soportado en el cliente. (fuente)
  • AjaxAC es un marco de trabajo escrito en PHP y que utiliza AJAX para la relación con el servidor. Este framework es liberado bajo la licencia de Apache v2.0. (fuente)
  • JSAN – JavaScript Archive Network es una colección de recursos para JavaScript de código abierto.
  • Ajax.NET Professional es uno de las primeras librerías AJAX disponibles para Microsoft ASP.NET y trabaja con .NET 1.1 y 2.0. Puedes encontrar una guía rápida de cómo dar tus primeros pasos en Ajax.NET, 
  • AjaxRequest Library  es producto de AjaxToolbox.com, que simplifica y extiende las capacidades del objeto XMLHttpRequest (el corazón de AJAX) y te permite desarrollar tus proyectos, sin tener que preocuparte por los procesos a bajo nivel.
  • ATLAS es un paquete de nuevas tecnologías de desarrollo web que integra un extenso conjunto de librerias "client script" con la rica plataforma de desarrollo del lado del servidor ASP .NET lo que nos va a permitir poder crear aplicaciones que tengan la posibilidad de realizar actualizaciones sobre una página web en el cliente haciendo llamadas directas al servidor Web sin la necesidad de hacer un "Refresco de Página", lo que nos permite poder aprovechar todo el potencial del lado del Servidor haciendo mucho trabajo en el Cliente permitiendo una mejor interacción de nuestros usuarios con los sistemas que desarrollemos. 
  • Bajax es una pequeña y simple librería JavaScript para usar AJAX en nuestra páginas web. Es independiente del lenguaje de programación. Podemos mostrar contenido dinámico usando comandos simples. 
  • MochiKit  es una biblioteca de clases de propósito general escrita en JavaScript que suministra características de otros lenguajes de programación como Python u Objective-C. 
  • Code Snippets es un repositorio público de códigos fuente. Permite facilmente crear tu colección personal de códigos/script, categorizarlas con tags y compartirlas con todo el mundo.
  • DHTML API, Drag & Drop for Images and Layers librería JavaScript DHTML la cual agrega funciones de Drag Drop (arrastre/mover) sobre capas (layers) y cualquier imágen. Una librería que no debe faltarnos.
  • DHTMLgoodies.com nos ofrece una gran cantidad de utilidades/scripts de DHTML, JavaScript y Ajax. 
  • Dynamic Drive un lugar en la web donde podemos obtener de manera gratuita utilidades/scripts DTHML y JavaScript para agregarlas a nuestros proyectos. Este sitio se actualiza regularmente.
  • DynAPI es una librería, de código abierto, en JavaScript para crear componentes Dinámicos para HTML (DHTML) en una página web.
  • qooxdoo es una librería que ofrece muchas facilidades para crear interfaces javascript avanzados, incluyendo una consola de depuración, manejo de eventos, control del foco… Soporta la mayoría de los navegadores actuales y tiene licencia LGPL. 
  • Engine for Web Applications es un framework para desarrollo de aplicaciones web del lado del cliente.

Efectos para AJAX.

En AJAX existen muchos efectos que se pueden agregar para tu pagina web, se mostraran unos 4 efectos de mi preferencio que podrias utilizar con links para poder descargar.

GreyBox te permitirá lanzar páginas webs que serán cargadas en una ventana de tipo popup. 

Pero sin que programas de tipo anti-popup las puedan bloquear. 

Con esto evitarás que el usuario pueda perder la web de referencia de la que procede, ya que no le aparece un cuadro de url, limitando de cierta forma la navegación fuera de nuestro sitio. 


  • Instant.js 
http://www.netzgesta.de/instant/ 

Con instant.js lograrás darle a las imágenes de tu sitio un bonito efecto de foto sacada con una polaroid. Añadiendo un bonito borde blanco a cada una de las imágenes. 

La funcionalidad de un sitio nunca tiene que estar debajo del diseño de esta, pero sin duda alguna, pero mejorar el aspecto de una web siempre ayudará a hacer más agradable tu sitio. 



  • mooTable 


http://joomlicious.com/mootable/ 

Con este recurso ajax, podrás hacer que tus tablas se puedan reordenar sin tener que recargar la página completa, con el consiguiente ahorro de carga para el servidor, y el beneficio añadido de no hacer esperar al usuario. La ordenación se realiza realiza vía DOM. 

No lo he probado, pero si trata de forma correcta los distintos formatos de monedas, será una aplicación a tener muy en cuenta. 


  • FancyForm


http://lipidity.com/fancy-form/#example 

Con FancyForm conseguiremos darle algo más de vida a nuestros formularios y hacerlos bastante más atractivos. 

Integrarlo será bastante sencillo, sólo tendremos que agregar el fichero javascript y añadir una etiqueta de clase a los elementos que queremos que se vean modificados. 


Aqui se muestra ejemplos de efectos en AJAX y JQUERY: 







No hay comentarios.:

Publicar un comentario

Suscribirse a: Entradas (Atom)