sábado, 20 de noviembre de 2010

Ajax

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y 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, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.


Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

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.
  • 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.

Problemas e Inconvenientes
  • Las páginas con AJAX son más difíciles de desarrollar que las páginas estáticas.
  • Las páginas creadas dinámicamente mediante peticiones sucesivas AJAX, no son registradas de forma automática en el historial del navegador, así que haciendo clic en el botón de "volver" del navegador, el usuario no será devuelto a un estado anterior de la página, en cambio puede volver a la última página que visitó. Soluciones incluyen el uso de IFrames invisible para desencadenar cambios en el historial del navegador y el cambio de la porción de anclaje de la dirección (después de un #).
  • Los motores de búsquedas no entienden JavaScript. La información en la página dinámica no se almacena en los registros del buscador.
  • Hay problemas usando Ajax entre nombres de dominios. Eso es una función de seguridad.
  • El sitio con Ajax usa más recursos en el servidor.
  • Es posible que páginas con Ajax no puedan funcionar en telefonos moviles, PDA u otros aparatos. Ajax no es compatible con todos los software para ciegos u otras discapacidades.

Navegadores que permiten Ajax
  • Ha de tenerse en cuenta que ésta es una lista general, y el soporte de las aplicaciones Ajax dependerá de las características que el navegador permita.
  • Navegadores basados en Gecko como Mozilla, Mozilla Firefox, SeaMonkey, Camino, K-Meleon, IceWeasel, 
  • Flock, Epiphany, Galeon y Netscape versión 7.1 y superiores. 
  • Google Chrome
  • Microsoft Internet Explorer para Windows versión 5.0 y superiores, y los navegadores basados en él
  • Navegadores con el API KHTML versión 3.2 y superiores implementado, incluyendo Konqueror versión 3.2 y superiores, Apple Safari versión 1.2 y superiores, y el Web Browser for S60 de Nokia tercera generación y posteriores
  • Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser versión 8.0 y superiores.

Navegadores que no permiten Ajax
  • Opera 7 y anteriores
  • Microsoft Internet Explorer para Windows versión 4.0 y anteriores
  • Anteriores a Safari 1.2 
  • Dillo
  • Navegadores basados en texto como Lynx y Links
  • Navegadores para personas con capacidades especiales visuales (Braille)
  • Algunos navegadores de teléfonos móviles
  • Navegador de la PSP
Ejemplo

ajax.html
<html>
 <head>
  <title>Ejemplo1</title>
  <script language = "javascript">
  var XMLHttpRequestObject = false;
  if (window.XMLHttpRequest) {
  XMLHttpRequestObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
  XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  function pedirDatos(fuenteDatos, divID){
  if(XMLHttpRequestObject) {
  var obj = document.getElementById(divID);
  XMLHttpRequestObject.open("GET", fuenteDatos);
  XMLHttpRequestObject.onreadystatechange = function(){
  if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
  obj.innerHTML = XMLHttpRequestObject.responseText;
  }
  }
  XMLHttpRequestObject.send(null);
  } 
  }
  </script>
  </head>
  <body>
  <H1>Mostrando datos con AJAX</H1>
  <form>
  <input type = "button" value = "Mostrar mensaje" onclick = "pedirDatos('datos.txt','targetDiv')">
  </form>
  <div id="targetDiv" style="background-color:#99FF66;">
  <p>Aqu&iacute; aparecer&aacute; texto</p>
  </div>
 </body>
</html>
datos.txt 
Este texto aparecio usando AJAX y sin un refresh a la pagina.
  
En primer lugar creamos el objeto XMLHttpRequestObject para la petición de datos. Este objeto será creado dependiendo del navegador web, la primera parte del if es para la mayoría de navegadores y la parte del if else es para Internet Explorer.

Luego está la creación de una función pedirDatos que tiene como parametros fuenteDatos y divID. Está función, como su mismo nombre lo indica, será la encargada de hacer una petición de datos, a través del parámetro fuenteDatos al servidor. Y el resultado de la petición será mostrada en la variable divID , la cual es una capa de estilos que se mostrará en el html.

Como se aprecia la mayor parte del código interesante se centra en el javascript.

FUENTE
http://es.wikipedia.org/wiki/AJAX
http://www.ajax.org

Tutorial
www.w3schools.com/ajax/default.asp

BX puntos para la clase...
Saludos..

1 comentario: