Inicio JavaScript JQuery Repaginar una web con jQuery y AJAX

Repaginar una web con jQuery y AJAX

Sábado, 10-12-2011 15:38 - Leer comentarios - Comentar

El ejemplo que vamos a montar es el típico en el cual un servicio de datos nos devuelve mensajes, mientras que nosotros, en la parte cliente realizaremos repaginaciones mediante peticiones AJAX a ese servicio.
En primer lugar contaremos con un servicio de datos que daremos por construido, al que llamaremos datos.php. Este servicio puede recibir por parámetro el valor de la página de datos a mostrar. Siguiendo la siguiente sintaxis:
Texto plano
datos.php?pagina=1 //Nos devolverá la primera página
datos.php?pagina=5 //Nos devolverá la quinta página
Lo primero será la estructura de la página. Esta tendrá una capa donde volcaremos los mensajes, y dos botones que nos permitirán el ir hacía delante y hacía detrás.
Texto plano

 |
Vemos que no tiene nada de código Javascript, y es que este le inyectaremos de forma no intrusiva mediante jQuery.
La inicialización de jQuery, tan sencilla como una línea:
JavaScript
De forma general vamos a definir una variable llamada página, la cual representa la página de mensajes a visualizar:
JavaScript
var pagina=1;
La inicializamos a un valor de 1 para que esta sea la primera página a visualizar.
Lo siguiente será codificar las acciones de click sobre los botones. El método que nos permite capturar un click sobre un elemento es el método .click() de jQuery.
La codificación de los botones será muy sencilla. Los pasos que seguirán serán.
1. Decrementar el valor de una variable general llamado página
2. Llamar a una función cargardatos(); la cual implementará las peticiones AJAX
El código quedará de la siguiente manera:
JavaScript
$("#anterior").click(function() {
  pagina--;
  cargardatos();
});

$("#siguiente").click(function() {
  pagina++;
  cargardatos();
});
Como nuestras peticiones AJAX no van a ser muy complejas la función cargardatos se apoyará en el método .get() el cual hace peticiones AJAX de tipo GET. Aunque la función .get() tiene varios parámetros (échale un vistazo a los parámetros de la función .get()) nosotros vamos a utilizar 2.
El primer parámetro indicará el origen de datos que nos devuelve el contenido. Es decir, datos.php. Como la URL a montar varía dependiendo del valor de la página en la que estemos, tenemos que apoyarnos en el valor de la variable global página que estabamos utilizando
JavaScript
"datos.php?pagina="+pagina;
El segundo parámetro de la función .get() es una función que recibe un parámetro "data" con los datos de la respuesta y cuyo contenido es las acciones que vamos a realizar sobre ellos. En nuestro caso el contenido lo vamos a añadir a la capa "mensajes". Apoyándonos en el método .html(), el cual incluirá ese contenido sobre la capa.
JavaScript
function(data){
    if (data != "") {
      $("#mensajes").html(data);
    }
}
Así, el código completo de la función cargardatos() quedará de la siguiente forma:
JavaScript
function cargardatos(){
  $.get("datos.php?pagina="+pagina,
   function(data){
     if (data != "") {
      $("#mensajes").html(data);
     }
   });
}
Unas pocas líneas y algo que parece tan complejo como repaginar con jQuery y AJAX.

Tags

repaginar, javascript, jquery, ajax

Comentarios

Soohoon - Domingo, 12-02-2012 04:51

Thanks for srhiang this, its really cool special the java script basics. And also the tutorial link.–Hari


Irma - Viernes, 10-02-2012 18:54

I seahrced a bunch of sites and this was the best.


No se permiten comentarios en este momento.