Peticiones AJAX con jQuery

06/Ene/2010 jQuery , 5 Comentarios

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.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  3. <title>Petición AJAX con jQuery</title>
  4. </head>
  5.  
  6. <h1>Petición AJAX con jQuery</h1>
  7. <div id="mensaje"></div>
  8.  
  9. <button id="cargar">Cargar</button>
  10.  
  11. </body>
  12. </html>

Lo siguiente será inicializar jQuery y empezar a generar el código no intrusivo. Cargamos la librería jQuery mediante la etiqueta SCRIPT.

  1. <script type="text/javascript" src="jquery.js"></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().

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("#cargar").click(function(){
  4. // Petición AJAX
  5. });
  6.  
  7. });
  8. </script>

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á:

  1. $.get("http://lineadecodigo.com/samples/datos.php", function(data){
  2. $("#mensaje").html(data);
  3. });

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.

Vídeos sobre jQuery


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

5 comentarios en “Peticiones AJAX con jQuery”

Víctor Cuervo

Víctor Cuervo

@TrshM3tal, bueno, no hay que hacer mucho caso a estos comentarios. Muchas gracias por tu apoyo. Se agradece mucho. Saludos.

Víctor Cuervo

TrshM3tal

Siempre existe un imbecil que no tiene nada que hacer aqui como el caso de energia, !!! buen ejemplo ..

Víctor Cuervo

cristhian

Muy bueno dudas resueltas…. data es un parametro que captura el HTML y lo embede en el div que quiero
Gracias

Víctor Cuervo

cristhian

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*