Mucho se ha hablado sobre el uso de Ajax en la Web moderna, para muchos esto parece algo tan complejo que mejor prefieren estar trabajando su aplicaciones web en una forma tradicional, claro, Ajax es algo complicado porque nos permite tener interacción con el servidor de una manera tan dinámica que no necesitamos recargar nuestro sitio Web completo para obtener una respuesta.
Antes de hablar de Ajax de jQuery voy a dar un antecedente de lo que es Ajax, porque si no sabemos de dónde viene no podemos comprender su uso. Una vez que entendamos como funciona Ajax, mostrare su uso a través de la librería jQuery, el cual es nuestro objetivo.
AJAX
Ajax es un término acuñado por Jesse Garrett de Adaptive Path para explicar la comunicación asíncrona entre cliente-servidor. El significado del Acrónimo Ajax es “Asynchronous Javascript and XML”, Ajax se simplemente un término para encapsular las técnicas necesarias para crear una aplicación web.
No se necesita mucho código para hacer una petición de Ajax, el aspecto más importante de Ajax es la petición HTTP del proceso. El envío de información asíncrona al servidor y recibir información adicional de regreso es ultimo propósito de Ajax.
UN EJEMPLO PRÁCTICO DEL USO DE AJAX
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | function obtenerInformacion() { // If IE is used, create a wrapper for the XMLHttpRequest object if ( typeof XMLHttpRequest == "undefined") XMLHttpRequest = function() { // Internet Explorer uses an ActiveXObject to create a new // XMLHttpRequest object return new ActiveXObject("Microsoft.XMLHTTP"); }; // creamos el objecto de peticion var xmlHttpRequestObject = new XMLHttpRequest(); // abrimos nuestro socket xmlHttpRequestObject.open("GET", "server.html", true); // establece la conexion con el servidor y envia informacion adicional xmlHttpRequestObject.send(); // ver cuando el estado del documento este actualizado xmlHttpRequestObject.onreadystatechange = function() { // Wait until the data is fully loaded if (xmlHttpRequestObject.readyState == 4) { if( httpSuccess(xmlHttpRequestObject) ) { // xmlHttpRequestObject.responseXML contiene el documento XML (Si se regreso alguno). // xmlHttpRequestObject.responseText contiene el texto de respuesta(Si no se obtuvo un documento XML). var resultado = document.getElementById("resultado"); resultado.innerHTML = xmlHttpRequestObject.responseText; } else { alert("Sucedio un problema al realizar la respuesta del servidor.") } // Limpiar despues de haber terminado para evitar fugas de memoria xmlHttpRequestObject = null; } }; } // Determina el exito de la respuesta XML function httpSuccess(r) { try { // Si no se brindo un estatus, y estamos solicitando // un archivo local, entonces fue existoso return !r.status && location.protocol == "file:" || // cualquier estatus en el rango de 200 esta bien. (r.status >= 200 && r.status < 300 ) || // Exitoso si el documento no fue modificado r.status == 304 || // Safari regresa un estatus vacio si el archivo no fue modificado navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined"; } catch(e) { } // Si la revision del estatus fallo, entonces asumimos que la peticion tambien fallo. return false; } |
HTML que lo utiliza
| 1 2 | <button onClick="obtenerInformacion();">Obtener un documento</button> <p><span id="resultado"> </span></p> |
Puedo compartir un estudio más profundo sobre el uso de Ajax a nivel nativo para aquellos usuarios que estén interesados, sin embargo, este no es el objetivo del tema, el objetivo es poder trabajar con Ajax en jQuery. De acuerdo al ejemplo anteriormente mostrado nos podemos dar cuenta de que parece algo cansado el tener que estar revisando el tipo de navegador que usamos y como debemos de reaccionar ante ello, pero esto es solo el principio, para que nuestra aplicación Ajax pueda funcionar en su totalidad en diferentes browser tenemos que hacer mucho mas validaciones para que nuestra aplicación pueda funcionar y no solo a un explorador especifico.
Tenemos dos opciones:
- Ponernos a hacer nuestras funciones para validar los browser y hacer funciones genéricas con Javascript Nativo.
- Hacer uso de un framework que ya tiene todas las validaciones implementadas como es jQuery.
Alguien flojo diría, yo uso el framework, para que hago todas las funciones, pero que tal si te digo que tu código eventualmente necesitara fixes para que funcione correctamente si lo haces todo por tu cuenta? No te quito el crédito si lo haces pero personalmente creo que hacer uso del framework de jQuery es tener la certeza de que muchos desarrolladores ya han trabajado en todos estos fixes y han hecho que el código funcione en casi todos los browsers. Ahora al usar el framework no es que seas flojo, es que eres sabio porque sabes que tu código va a funcionar y te vas a enfocar en hacer una mejor aplicación web.
Para mi opinión, al realizar aplicaciones web es crítico que me enfoque en cómo voy a realizarla y con qué herramientas cuento. Por eso hago este tutorial con las funciones más generales de Ajax en jQuery.
Como pudimos observar en el ejemplo anterior, usamos una función httpSuccess ()que se encarga de verificar que nuestra petición haya tenido éxito, esta y muchas funciones mas podemos crear para trabajar con nuestras peticiones Ajax, así que John Resig (El creador de jQuery) y su equipo se han encargado en empaquetar estas funciones para nuestro uso, las funciones y métodos que se usan son:
Manejadores Globales de Ajax
| 1 2 3 4 5 6 7 | .ajaxComplete() .ajaxError() .ajaxSend() .ajaxStart() .ajaxStop() .ajaxSuccess() jQuery.param() |
Interface de Bajo-Nivel
| 1 2 3 4 | jQuery.ajax() jQuery.ajaxPrefilter() jQuery.ajaxSetup() jQuery.ajaxTransport() |
Métodos de Acceso Rápido
| 1 2 3 4 5 | jQuery.get() jQuery.getJSON() jQuery.getScript() jQuery.post() .load() |
Funciones de Ayuda
| 1 2 | .serialize() .serializeArray() |
De cada una de estas funciones y métodos se desencadenan más opciones pero para esta parte del tutorial vamos a utilizar dos:
Forma Simple
.load()
Forma Compleja
jQuery.ajax() ó $.ajax()
jQuery.load()
Carga información del servidor y fija el HTML regresado en el elemento encontrado. Este método podemos llamarle un método más genérico por que nos carga todo el contenido que estemos solicitando de un sitio. Este método toma 3 argumentos:
url: Una cadena que tiene el URL al cual se le está haciendo la petición.
data: Un objeto plano o una cadena que es enviada al servidor con la petición.
complete: Una función callback que se ejecuta cuando la petición se ha completado, complete como es una función también tiene parámetros (responseText, textStatus, XMLHttpRequest) que se pueden usar posteriormente para hacer mas validaciones.
Y para entrar más en materia vamos a comenzar con un ejemplo práctico.
CARGAR CONTENIDO DE UNA PAGINA WEB EXTERNA
Por cuestiones de segurida en Ajax, no se puede (debe) cargar contenido de otro dominio del cual se esta haciendo la petición. Sin embargo para este ejemplo cargo el contenido de una página que tengo en mi sitio y que tiene integrado un iframe.
El código con el que hago la petición es el siguiente:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | jQuery(function($) { $('div.loadedContent01').load("iframe.php",showLoadDiv); function showLoadDiv() { $('div.loadedContent01').show() .animate({ width: "95%" },"fast") .animate({ height: "380px" },"slow","easeOutExpo"); // hide the spinner since the data is already loaded $('.spiner01').hide("slow"); } }); |
jQuery.ajax()
Realiza una petición asíncrona HTTP (Ajax). Este método recibe dos parametros, de los cuales, el segundo se descompone en una serie de propiedades para configurar la petición.
urlUna cadena que contiene la URL a donde se hace la petición.
settings Un set de propiedad/valor que configura la petición Ajax.
Ya que settings esta compuesto de varias propiedades, a continuación las listo:
| accepts | contents | dataFilter | isLocal | scriptCharset | url |
| async | contentType | dataType | jsonp | statusCode | username |
| context | error | jsonpCallback | success | xhr | |
| beforeSend | converters | global | mimeType | timeout | xhrFields |
| cache | crossDomain | headers | password | traditional | |
| complete | data | ifModified | processData | type |
Son demasiadas opciones para diferentes tipos de casos, pero voy a describir los que se usan generalmente:
data Tipo: Objeto Plano o Cadena. La información que va a ser enviada al servidor. Es convertida en un query string. Es agregada la url para peticiones-GET. Ver la opción proceesData para prevenir este proceso automático. El Objeto de de ser un par de llave/valor. Si valor es un arreglo, jQuery serializa los valores múltiples con la misma llave basado en el valor de la configuración traditional.
dataType Tipo: Cadena. Por default jQuery intenta hacer un reconocimiento inteligente (xml, json, script, o html). El tipo de dato que tu estás esperando de respuesta del servidor. jQuery va a tratar de reconocer la respuesta basado en el MIME type de la respuesta (un tipo MIME XML devolvera un XML, en JSON 1.4 responderá un objeto de Javascript, en 1.4 el script se ejecturá y todo lo demás será devuelto como una cadena.
type Tipo: Cadena. El tipo de peticion a hacer (“POST” ó “GET”), por default es “GET”. Nota: Otros tipo de peticiones HTTP como PUT o DELETE se pueden utilizar. Pero no todos los exploradores los soportan.
url Tipo: Cadena. Una cadena que contiene la URL a donde se hace la peteción.
success Tipo: Función ( PlainObject data, String textStatus, jqXHR jqXHR ). Es una función que es llamada cuando la petición se realizó con éxito. La función recibe tres argumentos: La información que regresa el servidor, un parametro formateado de acuerdo al datatype, una cadena describiendo el estatus, y el objeto jqXHR (en jQuery 1.4.x, XMLHttpRequest).
error Tipo: Función ( jqXHR jqXHR, String textStatus, String errorThrown ). Una función que es llamada en caso de que la petición falle. La función recibe 3 argumentos. El objeto jqXHR (en jQuery1.4.x,XMLHttpRequest), una cadena describiendo el tipo de error que ocurrio y un objecto de excepción, si alguno ocurrio. Los posibles valores para el segundo argumento (aparte de null) son "timeout", "error", "abort", y "parsererror". Cuando haya errores de HTTP errorThrown recibe la posición textual del estado de HTTP, como “Not Found” o “Internal Server Error”.
Ahora para mostrar un ejemplo del uso de jQuery.ajax() voy a mostrar un ejemplo donde hago una petición al servidor preguntando si un alumno esta con el curso aprobado. Para saber si el curso se aprobó la calificación debe de ser mayo que 6, si está en el rango de 9 a 10 es excelente y reprobado menor que 6.
Estatus:
El código con el cual hago la petición Ajax es el siguiente:
| 1 2 3 4 5 6 7 8 9 10 11 | $.ajax({ url: "includes/php/getScore.php", data: "score="+$('.value1').val(), type: "get", success: function(response) { $('.loadedContent02 span').text(response); }, complete: function() { $('.spiner01').hide(); } }); |
Como podemos observar podemos controlar muchas de las acciones que se realizan al hacer una petición al servidor. Muchos pensaran que esto es para gente floja, pero en realidad si se analiza lo que realmente hace el código por nosostros, veremos que realmente es una gran herramienta y que en realidad debemos de preocuparnos por realizar grandes aplicaciones web como soundcloud, dropbox, google, grooveshark, etc.
Después de haber leído el libro Pro Javascript Technichs de John Resig (creador de jQuery) comprendí el gran esfuerzo que lleva realizar el método Ajax que he utilizado en este tutorial y que el API está ahí para que nosotros seamos capaces de realizar mas cosas.
Queda de ustedes realizar cosas innovadoras y compartirlas con el mundo. Si tienen dudas y comentarios no duden en hacerlo aquí en el post. Y como ya es costumbre pueden descargar el código fuente desde aquí