Your SlideShare is downloading. ×
Como usar ajax con jquery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Como usar ajax con jquery

130
views

Published on

Explicación detallada encontrada por internet sobre el tema de AJAX y Jquery

Explicación detallada encontrada por internet sobre el tema de AJAX y Jquery

Published in: Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
130
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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:
  • 2. 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.
  • 3. 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) });
  • 4. 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, });
  • 5. 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.

×