{"id":266,"date":"2013-06-21T10:02:57","date_gmt":"2013-06-21T16:02:57","guid":{"rendered":"http:\/\/behstant.com\/blog\/?p=266"},"modified":"2015-10-15T15:36:15","modified_gmt":"2015-10-15T21:36:15","slug":"uso-de-ajax-con-jquery","status":"publish","type":"post","link":"http:\/\/behstant.com\/blog\/jquery\/uso-de-ajax-con-jquery\/","title":{"rendered":"Uso de Ajax con jQuery"},"content":{"rendered":"

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\u00f3n con el servidor de una manera tan din\u00e1mica que no necesitamos recargar nuestro sitio Web completo para obtener una respuesta.<\/p>\n

Antes de hablar de Ajax de jQuery voy a dar un antecedente de lo que es Ajax, porque si no sabemos de d\u00f3nde viene no podemos comprender su uso. Una vez que entendamos como funciona Ajax, mostrare su uso a trav\u00e9s de la librer\u00eda jQuery, el cual es nuestro objetivo.<\/p>\n

AJAX<\/strong><\/p>\n

Ajax es un t\u00e9rmino acu\u00f1ado por Jesse Garrett de Adaptive Path para explicar la comunicaci\u00f3n as\u00edncrona entre cliente-servidor. El significado del Acr\u00f3nimo Ajax es “Asynchronous Javascript and XML”, Ajax se simplemente un t\u00e9rmino para encapsular las t\u00e9cnicas necesarias para crear una aplicaci\u00f3n web.<\/p>\n

<\/p>\n

No se necesita mucho c\u00f3digo para hacer una petici\u00f3n de Ajax, el aspecto m\u00e1s importante de Ajax es la petici\u00f3n HTTP del proceso. El env\u00edo de informaci\u00f3n as\u00edncrona al servidor y recibir informaci\u00f3n adicional de regreso es ultimo prop\u00f3sito de Ajax.<\/p>\n

UN EJEMPLO PR\u00c1CTICO DEL USO DE AJAX<\/strong><\/p>\n

function obtenerInformacion() {\r\n\t\t\/\/ If IE is used, create a wrapper for the XMLHttpRequest object\r\n\t\tif ( typeof XMLHttpRequest == "undefined")\r\n\t\t\tXMLHttpRequest = function() {\r\n\t\t\t\t\/\/ Internet Explorer uses an ActiveXObject to create a new\r\n\t\t\t\t\/\/ XMLHttpRequest object\r\n\t\t\t\treturn new ActiveXObject("Microsoft.XMLHTTP");\r\n\t\t\t};\r\n\t\t\/\/ creamos el objecto de peticion\r\n\t\tvar xmlHttpRequestObject = new XMLHttpRequest();\r\n\t\t\/\/ abrimos nuestro socket\r\n\t\txmlHttpRequestObject.open("GET", "server.html", true);\r\n\t\t\/\/ establece la conexion con el servidor y envia informacion adicional\r\n\t\txmlHttpRequestObject.send();\r\n\r\n\t\t\/\/ ver cuando el estado del documento este actualizado\r\n\t\txmlHttpRequestObject.onreadystatechange = function() {\r\n\t\t\t\/\/ Wait until the data is fully loaded\r\n\t\t\tif (xmlHttpRequestObject.readyState == 4) {\r\n\t\t\t\tif( httpSuccess(xmlHttpRequestObject) ) {\r\n\t\t\t\t\t\/\/ xmlHttpRequestObject.responseXML contiene el documento XML (Si se regreso alguno).\r\n\t\t\t\t\t\/\/ xmlHttpRequestObject.responseText contiene el texto de respuesta(Si no se obtuvo un documento XML).\r\n\t\t\t\t\tvar resultado = document.getElementById("resultado");\r\n\t\t\t\t\tresultado.innerHTML = xmlHttpRequestObject.responseText;\r\n\t\t\t\t} else {\r\n\t\t\t\t\talert("Sucedio un problema al realizar la respuesta del servidor.")\r\n\t\t\t\t}\t\t\t\t\r\n\t\t\t\t\/\/ Limpiar despues de haber terminado para evitar fugas de memoria\r\n\t\t\t\txmlHttpRequestObject = null;\r\n\t\t\t}\r\n\t\t};\r\n\t}\r\n\t\/\/ Determina el exito de la respuesta XML\r\n\tfunction httpSuccess(r) {\r\n\t\ttry {\r\n\t\t\t\/\/ Si no se brindo un estatus, y estamos solicitando\r\n\t\t\t\/\/ un archivo local, entonces fue existoso\r\n\t\t\treturn !r.status && location.protocol == "file:" ||\r\n\t\t\t\/\/ cualquier estatus en el rango de 200 esta bien.\r\n\t\t\t(r.status >= 200 && r.status < 300 ) ||\r\n\t\t\t\/\/ Exitoso si el documento no fue modificado\r\n\t\t\tr.status == 304 ||\r\n\t\t\t\/\/ Safari regresa un estatus vacio si el archivo no fue modificado\r\n\t\t\tnavigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined";\r\n\t\t} catch(e) {\r\n\t\t}\r\n\t\t\/\/ Si la revision del estatus fallo, entonces asumimos que la peticion tambien fallo.\r\n\t\treturn false;\r\n\t}<\/pre>\n
HTML que lo utiliza<\/p>\n
<button onClick="obtenerInformacion();">Obtener un documento<\/button>\r\n\t<p><span id="resultado"> <\/span><\/p><\/pre>\n
Puedo compartir un estudio m\u00e1s profundo sobre el uso de Ajax a nivel nativo para aquellos usuarios que est\u00e9n 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\u00f3n Ajax pueda funcionar en su totalidad en diferentes browser tenemos que hacer mucho mas validaciones para que nuestra aplicaci\u00f3n pueda funcionar y no solo a un explorador especifico.<\/p>\n
Tenemos dos opciones:<\/p>\n
    \n
  1. \u00a0Ponernos a hacer nuestras funciones para validar los browser y hacer funciones gen\u00e9ricas con Javascript Nativo.<\/li>\n
  2. \u00a0Hacer uso de un framework que ya tiene todas las validaciones implementadas como es jQuery.<\/li>\n<\/ol>\n
    Alguien flojo dir\u00eda, yo uso el framework, para que hago todas las funciones, pero que tal si te digo que tu c\u00f3digo eventualmente necesitara fixes para que funcione correctamente si lo haces todo por tu cuenta? No te quito el cr\u00e9dito 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\u00f3digo 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\u00f3digo va a funcionar y te vas a enfocar en hacer una mejor aplicaci\u00f3n web.<\/p>\n
    Para mi opini\u00f3n, al realizar aplicaciones web es cr\u00edtico que me enfoque en c\u00f3mo voy a realizarla y con qu\u00e9 \u00a0herramientas cuento. Por eso hago este tutorial con las funciones m\u00e1s generales de Ajax en jQuery.<\/p>\n
    Como pudimos observar en el ejemplo anterior, usamos una funci\u00f3n\u00a0httpSuccess ()<\/code>que se encarga de verificar que nuestra petici\u00f3n haya tenido \u00e9xito, esta y muchas funciones mas podemos crear para trabajar con nuestras peticiones Ajax, as\u00ed que John Resig (El creador de jQuery) y su equipo se han encargado en empaquetar estas funciones para nuestro uso, las funciones y m\u00e9todos que se usan son:<\/p>\n
    \n
    Manejadores Globales de Ajax<\/strong><\/p>\n
    .ajaxComplete() \r\n.ajaxError()\r\n.ajaxSend()\r\n.ajaxStart()\r\n.ajaxStop() \r\n.ajaxSuccess()\r\njQuery.param()<\/pre>\n
    Interface de Bajo-Nivel<\/strong><\/p>\n
    jQuery.ajax()\r\njQuery.ajaxPrefilter()\r\njQuery.ajaxSetup()\r\njQuery.ajaxTransport()<\/pre>\n
    M\u00e9todos de Acceso R\u00e1pido<\/strong><\/p>\n
    jQuery.get()\r\njQuery.getJSON()\r\njQuery.getScript()\r\njQuery.post()\r\n.load()<\/pre>\n
    Funciones de Ayuda<\/strong><\/p>\n
    .serialize()\r\n.serializeArray()<\/pre>\n<\/div>\n
    De cada una de estas funciones y m\u00e9todos se desencadenan m\u00e1s opciones pero para esta parte del tutorial vamos \u00a0a utilizar dos:<\/p>\n
    \n
    Forma Simple<\/strong><\/p>\n
    .load()<\/p>\n
    Forma Compleja<\/strong><\/p>\n
    jQuery.ajax() \u00f3 $.ajax()<\/p>\n<\/div>\n
    jQuery.load()<\/strong><\/p>\n
    Carga informaci\u00f3n del servidor y fija el HTML regresado en el elemento encontrado. Este m\u00e9todo podemos llamarle un \u00a0m\u00e9todo m\u00e1s gen\u00e9rico por que nos carga todo el contenido que estemos solicitando de un sitio. Este m\u00e9todo toma 3 \u00a0argumentos:<\/p>\n
    \n
    url<\/strong>: Una cadena que tiene el URL al cual se le est\u00e1 haciendo la petici\u00f3n.<\/p>\n
    data<\/strong>: Un objeto plano o una cadena que es enviada al servidor con la petici\u00f3n.<\/p>\n
    complete<\/strong>: Una funci\u00f3n callback que se ejecuta cuando la petici\u00f3n se ha completado, complete como es una funci\u00f3n tambi\u00e9n tiene par\u00e1metros (responseText, textStatus, XMLHttpRequest) que se pueden usar posteriormente para \u00a0hacer mas validaciones.<\/p>\n<\/div>\n
    Y para entrar m\u00e1s en materia vamos a comenzar con un ejemplo pr\u00e1ctico.<\/p>\n
    CARGAR CONTENIDO DE UNA PAGINA WEB EXTERNA
    \nPor cuestiones de segurida en Ajax, no se puede (debe) cargar contenido de otro dominio del cual se esta haciendo la petici\u00f3n. Sin embargo para este ejemplo cargo el contenido de una p\u00e1gina que tengo en mi sitio y que tiene integrado un iframe.<\/p>\n