jump to navigation

Peticiones AJAX con jQuery Enero 6, 2010

Publicado por lineadecodigo en : jQuery , trackback

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">
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. title"><title>Petición AJAX con jQuery</title>
  6. </head>
  8. <h1>Petición AJAX con jQuery</h1>
  9. <div id="mensaje"></div>
  10.  
  11. <button id="cargar">Cargar</button>
  12.  
  13. </body>
  14. </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:

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.

Articulos Similares:

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 1960 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , , , , , ,

Comentarios»

1. Linea de Codigo » Cargar contenido con el scroll usando jQuery - Mayo 24, 2010

[...] carga de datos es una petición AJAX con jQuery. Veamos el [...]




Si tienes dudas sobre jQuery no dudes en visitar el Foro sobre jQuery.
Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen