Ajax




Ajax


Que es ajax ?


Es una técnica de desarrollo web para crear aplicaciones interactivas. 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.


Ajax hace que la experiencia en las paginas web sea buena dado que este hace que 
se puedan hacer cambios en esta sin necesidad de estar haciéndole 
refresh lo cual mejora la experiencia del usuario.


Tecnología 



 Ajax es una mezcla la tecnología de cuatro tecnologías ya existentes:

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


Funcionamiento


como podemos ver en la imagen se detalla el proceso de como funciona ajax :

a. primero se carga en el explorador un motor ajax de la app web que se desea.
b. el motor ajax se comunica con el server en representacion del usuario.
c. el servidor solicita un procesamiento backend si es el caso.
d. se emite una respuesta backend al servidor.
e. el servidor envia datos xml al motor ajax.
f. se le muestra al usuario la consulta que este ha realizado.

Ejemplos de codigo


Bueno les dejo un ejemplo muy sencillo de ajax , en este ejercicio lo que podran ver es que se ejecuta un metodo javascript el cual contiene un archivo .txt . lo que sucede al ejecutar este codigo es que carga un mensaje que dice "hola mundo" sin la necesidad de recargar la pagina web.


<!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>


Librerias 


Bueno a continuacion les dejo algunas de las librerias que se utilzan en ajax ,pero aqui les dejo el link por si quieren verlas todas.

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

Ventajas


a) El usuario no percibe que haya demoras: está trabajando y al ser las comunicaciones en segundo plano no hay interrupciones.

b) Los pasos que antes podía ser necesario dar cargando varias páginas web pueden quedar condensados en una sola página que va cambiando gracias a Ajax y a la información recibida del servidor.


Desventajas


a) Existen problemas y restricciones de seguridad relacionados con el uso de Ajax. Hay que tener en cuenta que por motivos de seguridad no todos los procesos se pueden realizar del lado del cliente (que por su propia naturaleza es “manipulable”). También existen restricciones de seguridad para impedir la carga de contenidos mediante Ajax desde sitios de terceras partes.

b) La indexación para los motores de búsqueda se ve dificultada, con lo cual nuestros sitios web pueden perder visibilidad en los buscadores. No es lo mismo un contenido “constante” o aproximadamente estático, fácilmente rastreable para un buscador, que un contenido “cambiante” en función de la ejecución de JavaScript, difícilmente rastreable para un buscador.


Tutorial


Bueno por ultimo les dejo este link de un tutorial el cual esta muy bueno espero les sea util.








































No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios (Atom)