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

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.

En pocas palabras AJAX es una tecnologia que permite hacer llamadas a un servidor y solo se le solicita parte de la información necesaria, por ejemplo puedo necesitar recargar una tabla después que se ha insertado información en ella, para evitar recargar toda la pagina se puede utilizar AJAX, solo se haría una llamada al servidor de aplicaciones solicitando dicha información y todo el formateo de la tabla puede llevarse a cabo desde el cliente, no siempre la información necesita ser XML en lenguajes como PHP con un simple echo basta, aunque algunas veces es necesario utilizar JSON para procesar de mejor manera la información.

Acá hay un tutorial mostrando dicho procedimiento.

Ahora un ejemplo de código funcional.

<script type="text/javascript">
$(document).ready(function(){
        $.ajax({
                            type: "POST",
                            url: "controller/empleadosAjax.php",
                            data: "getEmpleados=get",
                            dataType: "html",
                            beforeSend: function(){},
                            error:      function(){alert("Server not available");},
                            success:    function(data)
                            {
                                res = JSON.parse(data);
                                $("#id").html(res);
                            }
        });
});
</script>

En el bloque de código anterior se manda a hacer una llamada a un procedimiento en un controlador el cual devuelve información en un formato JSON.

Acá se utilizan una serie de parámetros para poder utilizar AJAX, los cuales son type (el tipo de método a utilizar, en este caso post), url (lugar donde se encuentra el archivo a ser utilizado) data: los parámetros a enviar a dicho archivo, dataType: el tipo de datos a ser recibidos y a su vez se declaran los bloques anónimos de código a ser ejecutados, antes de enviar la solicitud AJAX (beforeSend), en caso de error (error) y en caso de que la solicitud sea ejecutada correctamente (success).

Existen websites como este: ajax shake los cuales tienen una documentacion extensivas sobre estas tecnologias y la manera en la cual pueden ser utilizadas.

Cabe destacar que las tecnologías incluidas en AJAX son las siguientes:


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.

Cabe mencionar esto ya que AJAX como tal no es una tecnología nueva, sino una serie de tecnologías existentes que trabajan en conjunto.

Y aca un pequeno video mostrando animaciones con CSS3 y AJAX.