80A 266 personas les gusta esto. Regístrate para ver qué les gusta a tusamigos.

Me gusta

80

7/17/2013

Como usar AJAX con jQuery todo lo que necesitas saberA 266 personas les gusta esto. Regístrate para ver qué les gusta a tusamigos.

Me gusta

Ajax en jQuery la explicación que faltaba, con todos los ejemplos

Vamos a ver las mejores maneras de utilizar AJAX junto a jQuery

En primer lugar expliquemos que AJAX es una tecnología bastante madura por la cual los navegadorespueden realizar peticiones web sin recargar completamente la página. La librería jQuery tiene una seriede funciones muy convenientes con las cuales podremos simplificar el uso de AJAX para todos losnavegadores soportados.

Hay varias funciones que implican el uso de AJAX en jQuery a continuación te presentamos las máscomunes y una breve descripción de su caso de uso más común. Es importante tener presente esteresumen porque la al haber tantas funciones uno no sabe exactamente cuál usar, esta lista los ayudarácon esa decisión.

jQuery.get: hace una petición HTTP GET debería ser uno de los usos más comunes, sobre todocuando no deseas mandar muchos datos al servidor o para acciones que no modifican el estado delserver.jQuery.post: hace una petición HTTP POST deberías usarla cuando queres enviar muchos datos alservidor o cuando deseas modificar el estado del server.jQuery.getJSON: Si quien responde envia JSON, este es un buen método para simplificar lallamada porque te entregará el objeto listo para usar.jQuery.load: muy popular entre los usuarios de jQuery, esta petición pone el resultadodirectamente en el elemento desde que se llamó.jQuery.ajax o $.ajax: es la función más generica o de más bajo nivel con esta podrás hacercualquiera de los llamados AJAX que se logran con las otras.

jQuery.get e introducción a llamadas asincrónicas

La forma más sencilla de la función es $.get(url) dónde url es el recurso que queremos solicitar. Alejecutar ese código simplemente le diremos a nuestro navegador que abra una petición a esa url y queno haga nada con el resultado. No estaríamos haciendo nada en la página, pero tal vez nos interese paranotificar al server de algo (por ejemplo hacerlo cada cierto tiempo para no que no se desloguee unusuario).

La forma más común de esta función es en realidad $.get(url, function(resultado) {}) con estaforma estamos pasando una función que se ejecutará con el resultado cuando la petición termine. Esimportante entendender que las peticiones en AJAX son por defecto asincrónicas, esto significa que eljavascript continuará la ejecución de las siguientes instrucciones que sigan a una petición y en otro hilode ejecución comenzará a realizar la entrada y salida necesaria para la petición. ¿No entendiste nada deasincrónico y entrada/salida? mira el siguiente ejemplo:

Ejecutar ejemplo Editar ejemplo

log('Comienza ejecución');$.get('/feeds/posts/default', function(data) { log('Termino de cargar la primer petición');});$.get('/feeds/posts/default', function(data) { log('Termino de cargar la segunda petición');});log('Última línea del programa');

Entradas popularesEjemplo de switch en java

El siguiente es un ejemplo del uso de la sentenciaswtich en Java /* * Ejemplo de uso switch. * * */public class Ejercicio03 { ...Arreglos o arrays en C++

Un arreglo en C++ es un conjunto de datos que sealamacenan en memoria de manera contigua con elmismo nombre. Para difenciar los elementos ...Como leer un archivo de texto en Java

En el siguiente ejemplo se muestra como leer unarchivo de texto utilizando Java. El archivo se leelínea por línea, y a medida que avanza l...Ejemplo de Herencia en Java

Acá tenemos el ejemplo básico de herencia enJava. En este caso la clase Ciudadano hereda desdela clase Persona , para tomar funcionalidad...Como usar AJAX con jQuery todo lo que necesitassaber

Ajax en jQuery la explicación que faltaba, contodos los ejemplos Vamos a ver las mejores manerasde utilizar AJAX junto a jQuery ...El método SPLIT en Java

Veamos un ejemplo sencillo de como utilizar elmétodo split en Java. En este ejemploconvertiremos una cadena a un array de cadenas.pu...Suma de dos números en JAVA

//----JAVA SUMA DE DOS VARIABLES. importjavax.swing.JOptionPane; public classSumarNumeros { public static void main( Stringargs[]...Hacer un redirect con Javascript

Para realizar un redirect mediante javascriptpodemos utilizar la propiedad window.location :Redirect normal utilizando Javascript w...Cálculo de raíces cuadradas en java

El siguiente ejemplo muestra como hacer uso dejava.lang.Math para el cálculo de raíces cuadradas.class raices { private static ...Ejemplo de String indexOf de Java

El método indexOf de la clase String de Java, nospermite obtener el índice de comienzo de unasubcadena dentro de otra. public class in...

Compart ir 0   Más    Siguiente blog» Crear un blog   Acceder

Código FuenteApuntes de programación. Ejemplos de código en PHP, C, Javascript, jQuery, Pascal, Java y C++.

Comienza ejecuciónÚltima línea del programaTermino de cargar la primer peticiónTermino de cargar la segunda petición

Si le das al botón ejecutar, verás que los logs que deja el programa no están en el orden en que aparecentextualmente. Esto es porque como dijimos el hilo de ejecución no se detiene a esperar la finalización deuna llamada AJAX, simplemente continua con el programa y otro hilo de ejecución de tu navegador seocupará de realizar las peticiones y a medida que las termine llamará a las funciones (usualmenteconocidas como callbacks) con el resultado de la ejecución que le pasaste en cada llamada a get. Esteestilo de programación se conoce como entrada/salida no bloqueante y es muy común en Javascript, y seencuentra en contraposición al estilo bloqueante tradicional de entrada y salida de otroslenguajes/entornos (como C, Java, etc). Últimamente se puso muy de moda por el entorno node.js.

jQuery.post haciendo una petición POST y su diferenciación con .get

Con este método haremos una petición HTTP de tipo POST, usualmente útilizadas para realizar unaacción que cambie el estado del servidor. ¿A qué me refiero? Cuando vos te traes una lista de usuariosgeneralmente no estás modificando para nada el estado del servidor. Simplemente estás solicitando unlistado y no modificas ninguno de sus datos. El servidor seguramente hará una query sql de tipo SELECT... y tu petición no causará ninguna modificación en el estado del servidor. Ese tipo de peticionessuelen (y deberían hacerse) con peticiones de tipo get (utilizando la función $.get). Contrariamente siuno actualiza un nombre de usuario, o borra un usuario estaría causando un cambio en el servidor por loque lo correcto es usar una petición POST con la función $.post. Otra razón para utilizar una peticiónPOST es si la cantidad de datos a enviar al servidor es muy grande (las peticiones GET envian los datoscomo parte de la URL y algunos servidores web limitan el tamaño que una URL puede tener).

Veamos el mismo ejemplo anterior pero ahora utlizando peticiones POST:

Ejecutar ejemplo Dejar de editar

log('Comienza ejecución'); $.post('/feeds/posts/default', function(data) { log('Termino de cargar la primer petición'); }); $.post('/feeds/posts/default', function(data) { log('Termino de cargar la segunda petición'); }); log('Última línea del programa');

Comienza ejecuciónÚltima línea del programaTermino de cargar la segunda peticiónTermino de cargar la primer petición

Como verán cambiar la función get por post no cambia el caracter asincrónico del programa, ya quecomo dijimos todas las llamadas AJAX son por defecto asincrónicas.

Lo siguiente es mostrar un ejemplo en dónde enviamos datos al servidor.

Como dijimos en el caso de $.get los datos se enviarán como parte de la URL (usualmente a estos datosse los llama query string y toman la forma de ?clave=valor&clave2=valor2) en cambio en el caso dePOST los datos seran parte del cuerpo de la petición. Por dar el ejemplo más común de un lenguajeservidor: en PHP podrás acceder a los datos enviados por AJAX con: $_GET["clave"], $_POST["clave"]o si queres revisar los dos el conveniente $_REQUEST["clave"]. Visto esto veamos dos ejemplos en losque enviamos datos al servidor, la forma es igual para get y post:

$.post("/test.php", {clave: "valor"}, function(respuesta) { console.log("La respuesta es:", respuesta) }); $.post("/test.php", {clave: "valor"}, function(respuesta) { console.log("La respuesta es:", respuesta) });

Consejo para debugguear: los programadores suelen utilizar las herramientas que brinda el navegadorpara poder ver exactamente que peticiones esta haciendo la página web que están programando. En elcaso del navegador Google Chrome esto lo puedes ver en la pestaña de Network o de Red de lasherramientas para el desarrollador, accediendo desde Herramientas. En el caso de Firefox puedesbajarte la excelente extensión Firebug que también cuenta con la misma pestaña.

Si querés probar en tu propio servidor podrías generar un archivo test.php con el siguiente contenido:

<?phpvar_dump($_REQUEST);

Trabajando con JSON getJSON

Suele ser bastante común que las páginas planeadas para el uso de AJAX utilicen JSON como lenguaje deintercambio con el servidor. Esto permite que el servidor responda de manera liviana sin toda la

enlacesLearn SpanishTrucoJugar al Domino Diamond Online

sobrecarga que implica el uso de HTML, y con la ventaja de que los datos recibidos son fácilmenteparseables por el navegador. La función $.getJSON realiza (a igual que $.get) una petición GET, con ladiferencia de que esperará como respuesta del servidor JSON bien formado.

Veamos primero como podría ser esta vez el archivo test-json.php

<?php$datos = array("mensaje" => "Hola soy json", "error" => false);echo json_encode($datos);

Veamos ahora el programa que podría pedir por estos datos:

$.post("/test-json.php", function(respuesta) { console.log("La respuesta ya viene en forma de objeto:", respuesta.mensaje, respuesta.error)});

Si todo fue bien en el callback recibirás un objeto javascript construído a partir del json enviado por elservidor.

NOTA SOBRE ERRORES: no es poco común ver errores de CrossOrigin entre los que empiezan a utilizarAJAX. Estos errores se deben a que debido a políticas de seguridad los navegadores sólo permiten hacerpeticiones al mismo dominio desde dónde cargo la página. Es decir uno no podría hacer una peticiónAJAX a google.com si el navegador se encuentra en la página de Codigo Fuente. Este problema puedesolucionarse utilizando otras técnicas como JSONP que implica el uso de tags script, pero esta técnicaes algo más compleja y la veremos en algún otro artículo.

jQuery.load utilizando el resultado rápidamente

Este es otro de los métodos que permite hacer una petición GET, la diferencia es que cuando es llamadodesde un elemento, el contenido de ese elemento sera cargado por la respuesta de la petición. Estatécnica es útil para llenar un div o elemento rápidamente con una respuesta AJA. Si se proporciona uncallback, el callback se ejecutará después de cargarse el elemento.

$("#destino").load("/test.php", function() { console.log("Este mensaje se ejecutará luego de que se cargue el div con id = destino");});

Una de las funciones desconocidas de $.load que la mayoría de los desarrolladores ignora es que a lamisma respuesta se le puede aplicar un filtro por selectores para usarla parcialmente. Esto significa quesi del html que nos responde el servidor queremos utilizar sólo un div podremos seleccionarlo con lostípicos selectores de jQuery (que si por no lo sabías son selectores CSS).

$("#destino").load("/test.php #detalles"); // de lo que responda test.php solo nos quedamos con el div id="detalles"

jQuery.ajax la función bajo nivel

Esta es la función de más bajo nivel que posee jQuery utilizandola podremos controlar todos los aspectosimportantes de la petición AJAX que estemos haciendo.

Veamos un ejemplo:

$.ajax("/test.php", { "type": "post", // usualmente post o get "success": function(result) { console.log("Llego el contenido y no hubo error", result); }, "error": function(result) { console.error("Este callback maneja los errores", result); }, "data": {clave: "Valor a enviar al servidor"}, "async": true,});

Es interesante el último de los parametros porque permite apagar el comportamiento asincrónico de lapetición lo que causaría que antes de ejecutar la siguiente instrucción javascript espere a que setermine de ejecutar la petición.

Publicado por Author en 1:16 p. m.

Etiquetas: ajax, ejemplos javascr ipt, ejemplos jquery, javascr ipt, jquery

6 comentarios:

seba dijo...

HolaEstoy buscando la forma de utilizar jquery para obtener el codigo html de una pagína quegenera una tabla después de calcular datos. con ().load carga la página muy rápidamente,pero no obtengo el html, que es lo que necesito para generar los correos con los datos

Entrada más reciente Entrada antigua

Publicar un comentario

Página Principal

Suscribirse a: Comentarios de la entrada (Atom)

que se deben envíar al departamento de gerencia. Tienes alguna idea de como puedoobtener este código html?

12:55 p. m.

Nx_35 dijo...

Que tal, agradezco el contenido publicado, me sirvió muchisimo. Un saludo!

11:04 a. m.

brevetes dijo...

Por post como estos es que me encanta jquery!!Gracias.

10:40 p. m.

Gino dijo...

No entiendo bien porque en el codigo nunca utilizas .getJSON por mas q los nombre senlos titulos, en el codigo solo utilizas .get o .post, no entiendo

4:32 p. m.

Edgdaly Hernandez dijo...

Oye mas chevere me sirvio mucho pero unas cosas que cambie no se si se debe a laversion o no se!models.CharField(maxlength=30)models.CharField(max_length=30)

{'document_root': settings.STATIC_ROOT 'template/js'}),

{'document_root': <b str(settings.STATIC_ROOT) +'template/js'}),

a bueno y las rutas las coloque asi "template/js/ajax_search.js", no se porque no funcionode otra manera, ek combo si me dio falla,

es el que me funciono a mi! y como no es localhost lo mio le coloco la ip y finooo!!! perodel restoMuuuchas gracias!!

6:23 p. m.

Manuel Aguilar dijo...

Que manera tan clara de explicarte... Muchas Gracias!!

1:52 p. m.