Co mpart ir

0 Ms

Siguienteblog

Cdigo Fuente

Crearunblog Acceder

Megusta A266personaslesgustaesto.Regstrateparaverqulesgustaatus
amigos.

80

Apuntes de programacin. Ejemplos de cdigo en PHP, C, Javascript, jQuery, Pascal, Java y C++.

7/17/2013

Como usar AJAX con jQuery todo lo que necesitas saber

80

Megusta A266personaslesgustaesto.Regstrateparaverqulesgustaatus
amigos.

Ajax en jQuery la explicacin que faltaba, con todos los ejemplos

Entradas populares
Ejemplo de switch en java
El siguiente es un ejemplo del uso de la sentencia
swtich en Java /* * Ejemplo de uso switch. * * */
public class Ejercicio03 { ...
Arreglos o arrays en C++
Un arreglo en C++ es un conjunto de datos que se
alamacenan en memoria de manera contigua con el
mismo nombre. Para difenciar los elementos ...
Como leer un archivo de texto en Java
En el siguiente ejemplo se muestra como leer un
archivo de texto utilizando Java. El archivo se lee
lnea por lnea, y a medida que avanza l...
Ejemplo de Herencia en Java
Ac tenemos el ejemplo bsico de herencia en
Java. En este caso la clase Ciudadano hereda desde
la clase Persona , para tomar funcionalidad...
Como usar AJAX con jQuery todo lo que necesitas
saber
Ajax en jQuery la explicacin que faltaba, con
todos los ejemplos Vamos a ver las mejores maneras
de utilizar AJAX junto a jQuery ...
El mtodo SPLIT en Java
Veamos un ejemplo sencillo de como utilizar el
mtodo split en Java. En este ejemplo
convertiremos una cadena a un array de cadenas.
pu...
Suma de dos nmeros en JAVA
//----JAVA SUM A DE DOS VARIABLES. import
javax.swing.JOptionPane; public class
SumarNumeros { public static void main( String
args[]...
Hacer un redirect con Javascript
Para realizar un redirect mediante javascript
podemos utilizar la propiedad window.location :
Redirect normal utilizando Javascript w...
Clculo de races cuadradas en java
El siguiente ejemplo muestra como hacer uso de
java.lang.M ath para el clculo de races cuadradas.
class raices { private static ...
Ejemplo de String indexOf de Java
El mtodo indexOf de la clase String de Java, nos
permite obtener el ndice de comienzo de una
subcadena dentro de otra. public class in...

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

En primer lugar expliquemos que AJAX es una tecnologa bastante madura por la cual los navegadores
pueden realizar peticiones web sin recargar completamente la pgina. La librera jQuery tiene una serie
de funciones muy convenientes con las cuales podremos simplificar el uso de AJAX para todos los
navegadores soportados.
Hay varias funciones que implican el uso de AJAX en jQuery a continuacin te presentamos las ms
comunes y una breve descripcin de su caso de uso ms comn. Es importante tener presente este
resumen porque la al haber tantas funciones uno no sabe exactamente cul usar, esta lista los ayudar
con esa decisin.
jQuery.get: hace una peticin HTTP GET debera ser uno de los usos ms comunes, sobre todo
cuando no deseas mandar muchos datos al servidor o para acciones que no modifican el estado del
server.
jQuery.post: hace una peticin HTTP POST deberas usarla cuando queres enviar muchos datos al
servidor o cuando deseas modificar el estado del server.
jQuery.getJSON: Si quien responde envia JSON, este es un buen mtodo para simplificar la
llamada porque te entregar el objeto listo para usar.
jQuery.load: muy popular entre los usuarios de jQuery, esta peticin pone el resultado
directamente en el elemento desde que se llam.
jQuery.ajax o $.ajax: es la funcin ms generica o de ms bajo nivel con esta podrs hacer
cualquiera de los llamados AJAX que se logran con las otras.
jQuery.get e introduccin a llamadas asincrnicas
La forma ms sencilla de la funcin es $.get(url)dnde urles el recurso que queremos solicitar. Al
ejecutar ese cdigo simplemente le diremos a nuestro navegador que abra una peticin a esa url y que
no haga nada con el resultado. No estaramos haciendo nada en la pgina, pero tal vez nos interese para
notificar al server de algo (por ejemplo hacerlo cada cierto tiempo para no que no se desloguee un
usuario).
La forma ms comn de esta funcin es en realidad $.get(url, function(resultado) {})con esta
forma estamos pasando una funcin que se ejecutar con el resultado cuando la peticin termine. Es
importante entendender que las peticiones en AJAX son por defecto asincrnicas, esto significa que el
javascript continuar la ejecucin de las siguientes instrucciones que sigan a una peticin y en otro hilo
de ejecucin comenzar a realizar la entrada y salida necesaria para la peticin. No entendiste nada de
asincrnico y entrada/salida? mira el siguiente ejemplo:
Ejecutarejemplo

Editarejemplo

log('Comienza ejecucin');
$.get('/feeds/posts/default', function(data) {
log('Termino de cargar la primer peticin');
});
$.get('/feeds/posts/default', function(data) {
log('Termino de cargar la segunda peticin');
});
log('ltima lnea del programa');

enlaces
Learn Spanish
Truco
Jugar al Domino Diamond Online

Comienza ejecucin
ltima lnea del programa
Termino de cargar la primer peticin
Termino de cargar la segunda peticin

Si le das al botn ejecutar, vers que los logs que deja el programa no estn en el orden en que aparecen
textualmente. Esto es porque como dijimos el hilo de ejecucin no se detiene a esperar la finalizacin de
una llamada AJAX, simplemente continua con el programa y otro hilo de ejecucin de tu navegador se
ocupar de realizar las peticiones y a medida que las termine llamar a las funciones (usualmente
conocidas como callbacks) con el resultado de la ejecucin que le pasaste en cada llamada a get. Este
estilo de programacin se conoce como entrada/salida no bloqueante y es muy comn en Javascript, y se
encuentra en contraposicin al estilo bloqueante tradicional de entrada y salida de otros
lenguajes/entornos (como C, Java, etc). ltimamente se puso muy de moda por el entorno node.js.
jQuery.post haciendo una peticin POST y su diferenciacin con .get
Con este mtodo haremos una peticin HTTP de tipo POST, usualmente tilizadas para realizar una
accin que cambie el estado del servidor. A qu me refiero? Cuando vos te traes una lista de usuarios
generalmente no ests modificando para nada el estado del servidor. Simplemente ests solicitando un
listado y no modificas ninguno de sus datos. El servidor seguramente har una query sql de tipo SELECT
... y tu peticin no causar ninguna modificacin en el estado del servidor. Ese tipo de peticiones
suelen (y deberan hacerse) con peticiones de tipo get (utilizando la funcin $.get). Contrariamente si
uno actualiza un nombre de usuario, o borra un usuario estara causando un cambio en el servidor por lo
que lo correcto es usar una peticin POST con la funcin $.post. Otra razn para utilizar una peticin
POST es si la cantidad de datos a enviar al servidor es muy grande (las peticiones GET envian los datos
como parte de la URL y algunos servidores web limitan el tamao que una URL puede tener).
Veamos el mismo ejemplo anterior pero ahora utlizando peticiones POST:
Ejecutarejemplo

Dejardeeditar

log('Comienza ejecucin');
$.post('/feeds/posts/default', function(data) {
log('Termino de cargar la primer peticin');
});
$.post('/feeds/posts/default', function(data) {
log('Termino de cargar la segunda peticin');
});
log('ltima lnea del programa');

Comienza ejecucin
ltima lnea del programa
Termino de cargar la segunda peticin
Termino de cargar la primer peticin

Como vern cambiar la funcin get por post no cambia el caracter asincrnico del programa, ya que
como dijimos todas las llamadas AJAX son por defecto asincrnicas.
Lo siguiente es mostrar un ejemplo en dnde enviamos datos al servidor.
Como dijimos en el caso de $.getlos datos se enviarn como parte de la URL (usualmente a estos datos
se los llama query string y toman la forma de ?clave=valor&clave2=valor2) en cambio en el caso de
POST los datos seran parte del cuerpo de la peticin. Por dar el ejemplo ms comn de un lenguaje
servidor: en PHP podrs 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 los
que 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 navegador
para poder ver exactamente que peticiones esta haciendo la pgina web que estn programando. En el
caso del navegador Google Chrome esto lo puedes ver en la pestaa de Network o de Red de las
herramientas para el desarrollador, accediendo desde Herramientas. En el caso de Firefox puedes
bajarte la excelente extensin Firebug que tambin cuenta con la misma pestaa.
Si quers probar en tu propio servidor podras generar un archivo test.phpcon el siguiente contenido:
<?php
var_dump($_REQUEST);

Trabajando con JSON getJSON

Suele ser bastante comn que las pginas planeadas para el uso de AJAX utilicen JSON como lenguaje de
intercambio con el servidor. Esto permite que el servidor responda de manera liviana sin toda la

sobrecarga que implica el uso de HTML, y con la ventaja de que los datos recibidos son fcilmente
parseables por el navegador. La funcin $.getJSONrealiza (a igual que $.get) una peticin GET, con la
diferencia de que esperar como respuesta del servidor JSON bien formado.
Veamos primero como podra 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 podra pedir por estos datos:

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

Si todo fue bien en el callback recibirs un objeto javascript construdo a partir del json enviado por el
servidor.
NOTA SOBRE ERRORES: no es poco comn ver errores de CrossOrigin entre los que empiezan a utilizar
AJAX. Estos errores se deben a que debido a polticas de seguridad los navegadores slo permiten hacer
peticiones al mismo dominio desde dnde cargo la pgina. Es decir uno no podra hacer una peticin
AJAX a google.com si el navegador se encuentra en la pgina de Codigo Fuente. Este problema puede
solucionarse utilizando otras tcnicas como JSONP que implica el uso de tags script, pero esta tcnica
es algo ms compleja y la veremos en algn otro artculo.
jQuery.load utilizando el resultado rpidamente
Este es otro de los mtodos que permite hacer una peticin GET, la diferencia es que cuando es llamado
desde un elemento, el contenido de ese elemento sera cargado por la respuesta de la peticin. Esta
tcnica es til para llenar un div o elemento rpidamente con una respuesta AJA. Si se proporciona un
callback, el callback se ejecutar despus de cargarse el elemento.
$("#destino").load("/test.php", function() {
console.log("Este mensaje se ejecutar luego de que se cargue el div con id = dest
ino");
});

Una de las funciones desconocidas de $.loadque la mayora de los desarrolladores ignora es que a la
misma respuesta se le puede aplicar un filtro por selectores para usarla parcialmente. Esto significa que
si del html que nos responde el servidor queremos utilizar slo un div podremos seleccionarlo con los
tpicos selectores de jQuery (que si por no lo sabas son selectores CSS).
$("#destino").load("/test.php #detalles"); // de lo que responda test.php solo nos qu
edamos con el div id="detalles"

jQuery.ajax la funcin bajo nivel

Esta es la funcin de ms bajo nivel que posee jQuery utilizandola podremos controlar todos los aspectos
importantes de la peticin 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 asincrnico de la

peticin lo que causara que antes de ejecutar la siguiente instruccin javascript espere a que se
termine de ejecutar la peticin.
Publicado por Author en 1:16 p. m.
Etiquetas: ajax, ejemplos javascr ipt, ejemplos jquer y, javascr ipt, jquer y

6 comentarios:
seba dijo...
Hola
Estoy buscando la forma de utilizar jquery para obtener el codigo html de una pagna que
genera una tabla despus de calcular datos. con ().load carga la pgina muy rpidamente,
pero no obtengo el html, que es lo que necesito para generar los correos con los datos

que se deben envar al departamento de gerencia. Tienes alguna idea de como puedo
obtener este cdigo 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 sen
los 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 la
version 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 funciono
de 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!!! pero
del resto
Muuuchas gracias!!
6:23 p. m.

Manuel Aguilar dijo...

Que manera tan clara de explicarte... Muchas Gracias!!
1:52 p. m.
Publicar un comentario

Entrada ms reciente

Pgina Principal

Suscribirse a: Comentarios de la entrada (Atom)

Entrada antigua