Una de las cosas que nos permite AJAX es realizar peticiones asíncronas, las cuales solo recarguen una parte de la página. Esto nos da la posibilidad de dar la sensación de velocidad de cara al usuario. Un caso ejemplo es el de la repaginación de datos. Es decir, tener una lista de elementos dentro de las páginas e ir avanzando o retrocediendo en el listado. Buscando no afectar al resto de la página.

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:

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

 
<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.

 
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:

 
 // 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"

 
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.

 
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()

 
req.send(null);
 

Veamos como es la función repaginar entera:

 
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.

 
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.

Como último hay que destacar que tanto el archivo cliente como el servicio de datos tienen que estar en el mismo dominio. Debido a las políticas de seguridad de JavaScript.

Similar Posts:

• Peticiones AJAX con jQuery
• Validar usuario usando AJAX
• Repaginar con jQuery y AJAX
• Obtener cabeceras con XMLHttpRequest
• Cargar contenido con el scroll usando jQuery

AJAX podemos verlo como un paradigma de programación Web. Resumiéndolo podemos decir que permite la recarga de datos de la página sin necesidad de una recarga total de la misma. No debemos de tomarnos dicho paradigma como la solución a todos nuestros problemas de rendimiento. Sobre todo porque existen ciertos escenarios donde AJAX complica el diseño de una manera desmesurada.

Si bien, en ciertas ocasiones puede ser algo muy útil. Uno de los ejemplos prácticos es la validación de los datos del formulario. Cuando vamos a recuperar información del usuario podemos utilizar JavaScript de una forma muy potente para validar la información introducida. Por ejemplo podemos validar los tamaños del texto introducido, si cumple algún patrón, si son números o fechas validar rangos y límites,...

Pero todo tiene un límite. Y el límite de las validaciones del cliente es cuando queremos validar lógica de negocio. Me explico, podemos pedirle al usuario que tecleé su usuario y querer validar si existe dicho usuario en nuestra base de datos. Sería algo poco sensato el tener descargado en el cliente el listado entero de usuarios para saber si el dato introducido es correcto o no.

Es en estos casos cuando el paradigma AJAX nos da una gran potencia ya que podemos ir de forma asíncrona al servidor de negocio y validar si existe el dato introducido. De tal manera podemos avisar al usuario de forma rápida si su nombre es válido o no.

En este ejemplo vamos a ver cómo usar el paradigma AJAX para validar si el usuario introducido por pantalla ya le tenemos dado de alta en nuestras bases de datos. Algo muy útil en un formulario de alta de usuarios.

Creando el formulario y la capa oculta

Lo primero que tenemos que hacer es crear la página con el formulario. Tarea simple. ¿Quién no conoce el uso de la etiqueta FORM?

 
<form name="form1" method="post" action="">
 
  <label for="usuario">Usuario:</label> 
<input type="text" id="usuario">
<input type="submit" name="Submit" value="Enviar">
<input type="reset" name="Submit2" value="Borrar">
</form>
 

El comportamiento que vamos a dar a nuestro formulario es que una vez el usuario haya introducido su usuario vayamos a validarlo al servidor. Si el servidor me dice que ya existe el usuario, entonces deberemos de mostrarle al usuario una ventana diciéndole que ya existe el usuario en la base de datos.

Es por ello que necesitamos dos cosas más en nuestra página web. La primera es capturar el evento onChange del campo de texto del usuario. Es decir, una vez que el usuario tecleé el usuario y vaya a otro campo realizaremos la validación.

 
<input type="text" id="usuario" onChange="return autentica();">

En el código que acabamos de poner llamaremos a la función JavaScript autentica() que será la que realice la validación asíncrona.

La segunda necesidad es la de tener una capa, oculta al principio, donde se le diga al usuario que su usuario ya está ocupado. Dicha capa la mostraremos si la respuesta del servidor es que si está ocupado y la ocultaremos nuevamente si la validación da un resultado positivo.

<span id="error" style="font-family: Verdana, Arial,
   Helvetica, sans-serif; font-size: 12pt;color: #CC3300;
  position:relative;visibility:hidden;">
usuario Ocupado ¡¡¡
</span>

Función Autentica

Como hemos indicado en el párrafo anterior, la función autentica() será la que realice la petición asíncrona al servidor.

Dentro de la función lo que haremos serán tres cosas:

1. Recuperar el valor del usuario introducido por el usuario.
2. Montar la url del servidor donde el valor del usuario irá como parámetro.
3. Llamar a la función leer_doc(url) que es la que se encarga únicamente de realizar la petición a la URL indicada como parámetro.

function autentica(){
 usuario = document.getElementById("usuario").value;
 url = "/samples/existeusuario.php?usuario=" + usuario;
 leer_doc(url);
}

Petición XMLHttpRequest

Para realizar la llamada al servidor vamos a crear una variable request que será la que en toda la vida del programa JavaScript mantenga la referencia a la petición.

var req;

Dicha variable será la que dentro de la función leer_doc(url) realice la conexión mediante el objeto XMLHttpRequest.

El objeto XMLHttpRequest tiene dos formas de llamarse dependiendo del navegador en el que nos encontremos (que raro). Si existe el objeto como objeto del navegador bastará con realizar un new sobre el mismo, sino tendremos que instanciarlo como un ActiveX para los navegadores Internet Explorer (versiones 5 y 6). Quedándonos el siguiente código:

if (window.XMLHttpRequest) {
   req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest y Callback

El objeto XMLHttpRequest se maneja mediante callbacks. ¿Qué quiere decir esto? Que la respuesta del objeto será manipulada por la función que le indiquemos. Para ello tendremos que informar a la variable .onreadystatechange

En nuestro caso será la función procesarRespuesta la que analice la respuesta.

Lo que nos quedará será el realizar la petición a la URL previamente montada. Para ello utilizamos el método .open

if(req){
   req.onreadystatechange = procesarRespuesta;
   req.open('GET', url, true);
   req.send(null);
} 

Analizando la respuesta: parsear el XML

Una vez retornada la respuesta por el servidor los datos adjuntos a la misma irán a parar a nuestra función de callback procesarRespuesta().

En este caso, y como veremos en un momento, los datos devueltos por el servidor vienen en formato XML. Los datos los recuperaremos del atributo .responseXML del objeto XMLHttpRequest.

Como la respuesta viene en XML deberemos utilizar funciones del DOM para poder ver que valores tienen y actuar en consecuencia. En este caso la función .getElementsByTagName("tag").

Dentro del XML devuelto viene la etiqueta <existe> que tendrá un valor de "true" si el usuario enviado ya existe y un valor de "false" si el valor enviado no existe en la base de datos.

A si que en caso afirmativo pondremos la capa de error de la página a visible (el usuario existe) o la ocultaremos (si el usuario no existe)

function procesarRespuesta(){
 
 respuesta = req.responseXML;
 
 var existe = respuesta.getElementsByTagName('existe')
   .item(0).firstChild.data;
 
 if (existe=="true")
   document.getElementById("error").style.visibility = "visible";
 else
   document.getElementById("error").style.visibility = "hidden";
}

Página PHP, ¿Nuestro WebService?

En esto del AJAX pasa a ser algo de vital importancia el uso de servicios web, ya sean WebServices, páginas con script de servidor, CGI o similares.

En nuestro ejemplo la llamada se hace a la http://lineadecodigo.com/samples/existeusuario.php?usuario=miusuario

Es decir, que estamos usando una página PHP.

Dicha página PHP es muy sencilla, y aunque lo suyo sería que fuese a una base de datos, lo que he hecho ha sido devolver un XML estático. Dicho XML solo varía cuando se meta un usuario en concreto ("victor").

<?php
 
   $usuario = $_GET["usuario"];
 
   header('Content-type: text/xml');
 
   if ($usuario != "victor") {
     echo("<existe>true</existe>");
   } else {
     echo("<existe>false</existe>");
   }
 
?>

Ahora que podemos complicar este código cuanto queramos. Acceder a una base de datos,...

Visualizar el ejemplo
|- Descargar el código
|- Descargar del SVN
|- Reportar un error del códigoSimilar Posts:

• Repaginar datos con AJAX
• Peticiones AJAX con jQuery
• Obtener cabeceras con XMLHttpRequest
• Confirmar datos en JavaScript
• Cargar contenido con el scroll usando jQuery

Si tenemos que describir la Web 2.0 estoy seguro que no podríamos obviar la palabra AJAX. Y es que podríamos decir que la Web 2.0 se sustenta sobre un modelo tecnológico asíncrono, el cual, mediante peticiones/respuesta para regenerar parte de la página busca dar un efecto de mayor velocidad al usuario final. Al menos, mayor que la recarga entera de la página. "Pure AJAX".

Y si hablamos de AJAX tenemos que hablar del objeto XMLHttpRequest, sobre el cual nos apoyamos para realizar las peticiones asíncronas desde la página web.

Una de las posibilidades que nos ofrece este objeto es la de conocer la información de la cabecera http. Para ello tenemos los métodos .getAllResponseHeaders() o .getResponseHeader(etiqueta). El primero nos dará toda la información de la cabecera y el segundo nos permitirá ir a buscar un valor en concreto.

Un ejemplo de esta respuesta sería el siguiente:

Microsoft-IIS/5.0
Date: Sat, 10 Jun 2006 17:12:29 GMT
Content-Length: 43
Content-Type: text/xml
Cache-Control: private

El uso de estas cabeceras puede ser de lo más variopinto y va desde la validación de las ultimas modificaciones del recurso para ver si es válido o no, control de la cache o del contenido de la respuesta,....

Para poder recuperar las cabeceras lo primero que tenemos que hacer es crear un objeto XMLHttpRequest. A la hora de cargar un objeto XMLHttpRequest lo podremos hacer de dos formas. Mediante el propio objeto XMLHttpRequest o bien mediante un ActiveX para mantener compatibilidad con IE5 e IE6.

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

Una vez que tenemos el objeto XMLHttpRequest instanciado deberemos de indicar cual es el método de callback, es decir, que método va a atender la respuesta. Esto lo hacemos mediante el atributo onreadystatechange.

Lo siguiente será llamar al método open, para indicarle los parámetros de conexión: método de envío, URL destino,...

Recuerda que la URL destino del método open tiene que estar en tu mismo dominio. En caso contrario no podrás acceder al contenido de dicha URL.

Por último llamaremos al método send. El cual realizará la conexión.

if(req){
   req.onreadystatechange = procesarRespuesta;
   req.open('GET', url, true);
   req.send(null);
} 

Cuando procesemos la respuesta simplemente tendremos que llamar al método .getAllResponseHeaders() o .getResponseHeader(etiqueta)

Debemos de recordar que para procesar la respuesta es una buena práctica que la petición ha terminado

if (req.readyState == 4)

Y que la respuesta del servidor ha sido un OK. Es decir, un código de status 200.

if (req.status == 200)

Una vez hechas todas las validaciones y en nuestro caso vamos a volcar las cabeceras en un área de texto.

sTexto = document.getElementById("texto").value;
 
if (req.readyState == 4) {
   texto = texto + "Respuesta Procesada...\n";
   texto = texto + req.getAllResponseHeaders();
   texto = texto + "Estado de la petición: " + req.status + "\n";
   document.getElementById("texto").value = texto;
}

Visualizar el ejemplo
|- Descargar el código
|- Descargar del SVN
|- Reportar un error del códigoSimilar Posts:

• Repaginar datos con AJAX
• Validar usuario usando AJAX
• Borrar registros de una base de datos con ADO
• Generar un documento HTML mediante JavaScript
• Responder XML en ASP

IBM libera AJAX para la plataforma WebSphere junto con un "Early Access Program". En esta versión se incluye Dojo Toolkit 0.4.1 y 3 aplicaciones end-to-end que muestran como Dojo puede ser utilizado en aplicaciones J2EE sobre la plataforma WebSphere.

Todas las características están empaquetadas para utilizar en el entorno Eclipse 3.2.1 de igual manera que hay una distribución para desarrolladores no-Eclipse.

AJAX para la plataforma IBM WebSphere incluye:

• Toolkit Dojo
• Librerias JSON4J
• Web Pub Sub Bridge for AJAX
• 4 ejemplos

Además podemos encontrar una version offline de la versión borrador del "DOJO Book".

Las plataformas de servidor soportadas son AIX®, HP-UX, Linux, Solaris, Windows, z/OS,... y dentro de la plataforma cliente Intenet Explorer 5.5/6 y Mozilla FireFox 1.5 (y superiores).

Puedes informarte del "Early Access Program" de AJAX

Vía: AjaxianSimilar Posts:

• IBM Java SDK 6 Beta
• 2007 Technology of the year awards
• SilverLight 1.0
• Netbeans 6.9
• AJAX Programming (with Passion!)