jQuery » Peticiones AJAX con jQuery
Las bondades del patrón AJAX son más que conocidas... La posibilidad de hacer peticiones de forma asíncrona que actualicen una parte de la página es una realidad de muchas webs. jQuery, como framework de JavaScript nos permite realizar esta tarea de forma sencilla, evitando codificar directamente la petición AJAX en JavaScript.
En este caso vamos a realizar una petición a una página para que nos devuelva un contenido, el cual incluiremos en una capa de nuestra página.
Así, lo primero será montar nuestra página HTML. Con su button y su div.
Lo siguiente será inicializar jQuery y empezar a generar el código no intrusivo. Cargamos la librería jQuery mediante la etiqueta SCRIPT.
Una vez configurado todo... vamos a resolver el tema en cuestión. Lo primero será capturar el onClick sobre el botón. Para ello, sobre el ID cargar asociamos la función click().
Para hacer la petición AJAX nos apoyaremos en la función .get(url,[data],[callback],[type]). Esta función es muy sencilla y sus parámetros se descomponen en:
- url, es la URL que contendrá el fichero que nos devuelva los datos.
- data, son los datos a enviar a la URl de petición
- callback, es el método que se ejecutará cuando se realice la petición
- type, tipo de datos que se devolverán desde el servidor: text, xml, html, json,...
Así la petición AJAX será:
En ella se puede apreciar varias cosas. La primera que datos.php es el fichero que devuelve los datos (no entraremos en detalle de como se compone, pero básicamente devuelve código HTML). La segunda es que la función de callback recibe como parámetro los datos devueltos por el servidor... dentro de esta función lo que estamos haciendo es añadir estos datos a la capa mediante el método .html()
Ahora solo nos queda el explotar las posibilidades del método .get() para dar potencia a nuestra web mediante peticiones AJAX con jQuery.
 Visualiza el artículo |  Descargar el código |  Error en el código |  Foro sobre jQuery |
Artículos relacionados:
Mayo 24, 2010 #
[...] carga de datos es una petición AJAX con jQuery. Veamos el [...]
Octubre 13, 2010 #
Una consulta, como el parametro dataque esta en :
$(“#mensaje”).html(data);
que contiene, no a sido declarado en ningun lugar, seria interesante ver el code de http://lineadecodigo.com/samples/datos.php
Desde ya muchas gracias
Octubre 13, 2010 #
Muy bueno dudas resueltas…. data es un parametro que captura el HTML y lo embede en el div que quiero
Gracias
Diciembre 25, 2010 #
Eres un completo imbecil, para interpretar ademas de la basura de codigo que publicas, CHINGAS A TODA TU PUTA MADRE…..!!!!!!!!!!!Y SI A ALFUIEN LO LE GUSTA QUE CHINGE A TODA SU RECONTRAREPUTA MADRE EMBARAZADA QUE TUBO UN CERDO ASQUEROSO..!!