Tutorial: Jquery ajax

¿Que es AJAX?

Ajax es el acronimo de Asynchronous JavaScript And XML,  es una forma de desarrollo web que permite la creacion de paginas web interactivas y aplicaciones RIA (Rich Internet Applications). Ademas de que tambien forma parte esencial de la Web 2.0. El Ajax se ejecuta del lado del cliente y pèrmite mantener una comunicacion constante con el servidor, permitiendo modificar la informacion que ve el usuario sin necesidad de recargar la pagina.

El Ajax asi no lo sepamos ya forma parte del internet y de nuestra vida, aplicaciones como facebook, twitter, gmail, etc ya la usan, por nombrar algunas, el unico que falta eres tú.


El framework de jquery posee una completa suite de herramientas para trabajar con ajax, esta suite tiene funciones para trabajar con json, html, xml y js, además que es muy configurable por si queremos una carga sincronica o asincronica.

¿Cual es la utilidad de el AJAX?

El ajax es muy util principalmente para crear aplicaciones web que no requieran estar recargandose para funcionar, la comunicacion ajax entre cliente y servidor siempre es mas ligera que la comunicacion asincronica por lo cual se puede aumentar racionablemete la velocidad de la pagina, adémas tambien nos permite aumentar la interraccion del usuario con la pagina, y asi de esa manera mejor la experiencia del usuario.

El ajax es tan util que se pueden crear una pagina completa que muestre informacion nada más sin necesidad de php, asp o java. Ya que se puede ir cargando dinamicamente paginas dentro del nuestro servidor y mostrarlo donde queramos sin mucho problema.

¿Que es y como se usa $.ajax() ?

Es una función que realiza una peticion http ajax al servidor y despues permite manejar la respuesta, ya sea un error o no, ademas de que tambien permite facilmente cambiar el tipo de solicitud, caracteres, parametros, tipos de dato, etc. Primero les voy a mostrar las tres principales eventos de nuestra llamada:


Success(data, textStatus, jqXHR):

Esta es la función que se llama cuando la solicitud ajax a sido exitosa. pasa tres variables, data: es la informacion que devuelve la pagina, textStatus: que es el estatus de la solicitud y jqXHR que es el objeto XMLHttpRequest.

error(jqXHR, textStatus, errorThrown)

es la función que se llama cuando una llamada ajax no es exitosa, y nos permite manejar ese error para avisar al usuario. Entre los parametros que se pasan a la función estan, jqXHR que es el objeto XMLhttpRequest, textStatus que es una cadena de texto que describe el tipo de error pueden ser: "timeout", "error", "abort", and "parsererror", y por ultimó errorThrown cuando ocurre un error http devuelve una cadena con el error exacto.

complete(jqXHR, textStatus)

Es la función que se llama cuando la solicitud AJAX a finalizado, teniendo exito o no, esta función devuelve el objeto jqXHR y el estatus de la solicitud los posibles valores que puede tener son: "success", "notmodified", "error", "timeout", "abort", or "parsererror".

Ahora les voy a mostrar los parametros más importantes en las llamadas ajax:

• url: donde colocaremos la dirección de nuestra solicitud.
• data: es la información enviada al servidor, puede ser una cadena de texto o un objeto.
• dataType: donde se especifica el tipo de data que se esta esperando del servidor, y dependiendo del tipo de dato jquery hace algo al respecto, por ejemplo si decimos que es un script jquery lo trae y de una ves lo ejecuta, los tipos de datos soportados son: xml, html, script, json, jsonp y text.
• type: aqui es donde se especifica el tipo solicitud si POST o GET, predeterminado es GET.

Para mas información sobre jquery pueden visitar http://api.jquery.com/jQuery.ajax/.

Funciones para trabajar con ajax en jquery.


Realmente en jquery hay una sola funcion principal para trabajar con ajax que es $.ajax, el resto solo son metodos mas cortos de la funcion anteriror, que ya traen algunos parametros agregados. Las siguientes funciones llamadas metodos del lado corto.

• $.load( url, [ data ],[complete(responseText, textStatus, XMLHttpRequest)]):
  
  Carga informacion de el servidor y despues la pone en el elemento HTML que corresponda.
  ejemplo: $('#result').load('ajax/test.html');
  
  
• $.get( url, [data], [success(data, textStatus, jqXHR)], [dataType]):
  
  Hace una petición get en el servidor, permite especificar el tipo de dato que se espera y después permite manejar la respuesta.
  
  
• $.getJSON(url, [data], [success(data, textStatus, jqXHR)]):
  
  Carga variables codificadas en json del servidor por el método GET.
  
  
• $.getScript(url, [success(data, textStatus)]):
  
  Cara un script del servidor y después lo ejecuta.
  
  
• $.post(url, [data], [success(data, textStatus, jqXHR)], [dataType]):
  
  Hace una solicitud al servidor por el método POST.
  
  

Jquery tambien trae funciones de ayuda para hacer algunas actividades regulares que tienen que ver con ajax y formularios, otras para manejar eneventos y otras para configurar las llamadas ajax, aqui les dejo una lista, después las explicare:

• $.serialize()
• $.param()
• $.serializeArray()
• $.ajaxPrefilter()
• $.ajaxSetup()