Como usar ajax con jquery

Como usar AJAX con jQuerytodo lo que necesitas saber
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 navegadores pueden realizar peticiones web sin recargar completamente la página.
La librería 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 continuación te
presentamos las más comunes y una breve descripción de su caso de uso más común. Es
importante tener presente este resumen 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 todo cuando no deseas mandar muchos datos al servidor o para
acciones que no modifican el estado del server.
jQuery.post: hace una petición HTTP POST deberías 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 método para
simplificar la llamada porque te entregará el objeto listo para usar.
jQuery.load: muy popular entre los usuarios de jQuery, esta petición pone el
resultado directamente 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 hacer cualquiera 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. Al ejecutar ese código simplemente le diremos a nuestro navegador
que abra una petición a esa url y que no haga nada con el resultado. No estaríamos
haciendo nada en la página, 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 más común de esta función es en realidad $.get(url,
function(resultado) {}) con esta forma estamos pasando una función que se
ejecutará con el resultado cuando la petición termine. Es importante entendender que las
peticiones en AJAX son por defecto asincrónicas, esto significa que el javascript
continuará la ejecución de las siguientes instrucciones que sigan a una petición y en otro
hilo de ejecución comenzará a realizar la entrada y salida necesaria para la petición.
¿No entendiste nada de asincrónico y entrada/salida? mira el siguiente ejemplo:

log('Comienzaejecució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');

Comienza ejecución Última línea del programa Termino de cargar la primer petición
Termino 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 aparecen textualmente. Esto es porque como dijimos el hilo de ejecución no se
detiene a esperar la finalización de una llamada AJAX, simplemente continua con el
programa y otro hilo de ejecución 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 ejecución que le pasaste en cada llamada a get. Este
estilo de programación se conoce como entrada/salida no bloqueante y es muy común
en Javascript, y se encuentra en contraposición 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 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 una acción que cambie el estado del servidor. ¿A qué me refiero? Cuando vos te
traes una lista de usuarios generalmente no estás modificando para nada el estado del
servidor. Simplemente estás solicitando un listado y no modificas ninguno de sus datos.
El servidor seguramente hará una querysql de tipo SELECT ...y tu petición no causará
ninguna modificación en el estado del servidor. Ese tipo de peticiones suelen (y
deberían hacerse) con peticiones de tipo get (utilizando la función $.get).
Contrariamente si uno actualiza un nombre de usuario, o borra un usuario estaría
causando un cambio en el servidor por lo que lo correcto es usar una petición POST con
la función $.post. Otra razón para utilizar una petición 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 tamaño que una URL puede tener).
Veamos el mismo ejemplo anterior pero ahora utlizando peticiones POST:

Comienza ejecución Última línea del programa Termino de cargar la segunda petición
Terminojj 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 que como 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 datos se los llama querystring y toman la forma de
?clave=valor&clave2=valor2) en cambio en el caso de POST los datos seran parte
del cuerpo de la petición. Por dar el ejemplo más común de un lenguaje servidor: 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 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 página
web que están programando. En el caso del navegador Google Chrome esto lo puedes
ver en la pestaña de Network o de Red de las herramientas para el desarrollador,
accediendo desde Herramientas. En el caso de Firefox puedes bajarte 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:
<?php
var_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 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 fácilmente parseables por el navegador. La función
$.getJSON realiza (a igual que $.get) una petición GET, con la diferencia 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);
echojson_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 javascriptconstruído a partir del json
enviado por el servidor.
NOTA SOBRE ERRORES: no es poco común ver errores de CrossOrigin entre los
que empiezan a utilizar AJAX. Estos errores se deben a que debido a políticas de
seguridad los navegadores sólo permiten hacer peticiones al mismo dominio desde
dónde cargo la página. Es decir uno no podría hacer una petición AJAX a google.com si
el navegador se encuentra en la página de Codigo Fuente. Este problema puede
solucionarse utilizando otras técnicas como JSONP que implica el uso de tagsscript,
pero esta técnica es 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 llamado desde un elemento, el contenido de ese elemento sera cargado por la
respuesta de la petición. Esta técnica es útil para llenar un div o elemento rápidamente
con una respuesta AJA. Si se proporciona un callback, 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 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 sólo un div podremos seleccionarlo con los tí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 jQueryutilizandola podremos controlar
todos los aspectos importantes 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 la petición lo que causaría que antes de ejecutar la siguiente instrucción
javascript espere a que se termine de ejecutar la petición.

Como usar ajax con jquery

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Como usar ajax con jquery (20)

Último (20)

Como usar ajax con jquery