En el ejemplo repaginar datos con AJAX nos vamos a centrar en la parte cliente de petición (en nuestra página HTML). No entraremos en detalle de la construcción de la parte servidor. Si bien, dejo pendiente el escribir un artículo completo que utilice AJAX, PHP y acceso a datos MySQL. Lo cual nos dejará ver el proceso entero de una forma más detallada.

Empezaremos definiendo la página del servidor que nos devuelva los datos. Esta puede estar construida en cualquier tecnología del lado del servidor. Véase ASP, PHP, JSP,… En nuestro caso vamos a crear una pequeña página en JSP.

Esta página recibe un parámetro denominado “página”. Según el valor que le llegue como parámetro devolverá una lista HTML u otra. La URL será algo como lo siguiente:

http://www.miservidor.com/datos.jsp?pagina=2

Aunque no quiero entrar en detalle del código JSP os adjunto un pequeño extracto del código. De forma orientativa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<%
 
String[] provincias = {"Álava","Albacete","Alicante","Almería",...,"Zamora","Zaragoza"};
 
int pagina = Integer.valueOf(request.getParameter("pagina"));
 
pagina=(pagina-1)*10;
 
out.println("&lt;ul&gt;");
 
for (int x=0;x<10;x++)
 
out.println("
 
<li>" + provincias[pagina+x] + "</li>
 
");
 
out.println("&lt;/ul&gt;");
 
%>

Comentándolo muy por encima, recupera el valor del parámetro utilizando el método .getParameter() y lo utiliza para acceder a un array de String. A partir de ese elemento del array devuelve 10 elementos en una lista HTML utilizando las etiquetas UL y LI.

Pero centrémonos en la parte cliente. Lo primero será definir la página. La página tendrá una capa DIV donde iremos mostrando el contenido. Es importante darle un ID a la capa, ya que nuestro código JavaScript accederá a ella para ir modificando el contenido de forma asíncrona.

Debajo de la capa pondremos 5 enlaces que llamen a una función JavaScript paginar. Esta función será la que realice la petición AJAX y cargue el contenido en la capa DIV.

Veamos este código:

1
2
3
4
5
6
7
8
9
10
11

<div id="datos"></div>
 
<a href="" onclick="paginar(1);" title="paginar">1</a> |
 
<a href="" onclick="paginar(2);" title="paginar">2</a> |
 
<a href="" onclick="paginar(3);" title="paginar">3</a> |
 
<a href="" onclick="paginar(4);" title="paginar">4</a> |
 
<a href="" onclick="paginar(5);" title="paginar">5</a>

La función JavaScript paginar será la que realice todo el trabajo. Como vemos esta función recibe un parámetro que indica el número de página sobre el que queremos posicionarnos.

1

function paginar(pagina) {...}

Lo primero que tiene que realizar esta función es cargar el objeto que nos permita realizar las peticiones asíncronas a modo AJAX. Este objeto es XMLHttpRequest.

Aunque el objeto XMLHttpRequest es un objeto ya estandarizado y definido por la W3C hay ciertos navegadores (como el Internet Explorer) que siguen sin implementarlo. En su defecto utilizan el objeto Microsoft.XMLHTTP. Este viene a hacer lo mismo, o algo parecido, pero con otro nombre.

Es por ello que la instancia del objeto XMLHttpRequest se complica un poco. Quedaría de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13

// Llama objeto XMLHttpRequest
 
if (window.XMLHttpRequest) {
 
req = new XMLHttpRequest();
 
// Si no funciona intenta utiliar el objeto IE/Windows ActiveX
 
} else if (window.ActiveXObject) {
 
req = new ActiveXObject("Microsoft.XMLHTTP");
 
}

La variable que tiene la instancia es req. Esta variable será la que represente la conexión con el servicio de datos

El siguiente paso será establecer la conexión. Para ello seguimos tres pasos:

Primero indicamos que función JavaScript es la que va a procesar la respuesta del servidor. Esto lo hacemos mediante el evento .onreadystatechange de la petición. En nuestro caso será la función JavaScript “procesarRespuesta”

1

req.onreadystatechange = procesarRespuesta;

Segundo indicamos la URL a la cual queremos realizar la petición. Para componer la URL concatenamos la URL del servicio de datos con el número de página recibido como parámetro.

1
2

url = 'http://www.miservidor.com/datos.jsp?pagina=' + pagina;
req.open("GET",url,true);

El método .open es el que utilizamos para indicar la URL. Este tiene varios parámetros: tipo de petición (GET,POST o PUT), la URL y si queremos que sea síncrono -false- o asíncrono -false- como tercer parametro.

Tercero y último realizamos la petición. Para ello nos apoyamos en el método .send()

1

req.send(null);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function paginar(pagina) {
 
req = false;
 
// Llama objeto XMLHttpRequest
 
if (window.XMLHttpRequest) {
 
req = new XMLHttpRequest();
 
// Si no funciona intenta utiliar el objeto IE/Windows ActiveX
 
} else if (window.ActiveXObject) {
 
req = new ActiveXObject("Microsoft.XMLHTTP");
 
}
 
if(req!=null){
 
req.onreadystatechange = procesarRespuesta;
 
url = 'datos.jsp?pagina=' + pagina;
 
req.open("GET",url,true);
 
req.send(null);
 
}
 
}

Ahora nos tenemos que centrar en la función JavaScript “procesarRespuesta”. Esta función es la que recibirá los datos del servidor y los colocará en la capa.
Los datos de la respuesta vienen en la propiedad .responseText de la petición (es decir, del objeto req). Es por ello que simplemente tenemos que pegarlos en la capa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function procesarRespuesta(){
 
contenido = document.getElementById('datos');
 
contenido.innerHTML="Cargando los datos...";
 
if (req.readyState==4 && req.status==200) {
 
//mostrar resultados en esta capa
 
contenido.innerHTML = req.responseText;
 
}
 
}

Para poder poner los datos en la capa DIV tenemos que haber accedido a ella mediante su ID y la función .getElementById(). Para modificar el contenido de una capa nos apoyamos en la propiedad .innerHTML. Esta propiedad será sobre la que dejemos el contenido de responseText.

Y ya está. Con esto hemos construido una repaginación de datos con AJAX de una forma muy sencilla.