• Ajax es una herramienta, no un juguete: en muchos casos el uso de Ajax es totalmente innecesario.
• No se lleva bien con el botón back del navegador: este botón es necesario para la usabilidad y javascript no se lleva muy bien con él.
• No avisar de que se realiza una acción: cuando hago click en alguna zona de la página y se genera una acción, se debería avisar de ello para que el usuario sepa que se están actualizando datos.
• Dejar a los usuarios offline de lado: que cada vez haya más gente con conexión a internet, no quita que nos debamos olvidar de la gente que apenas hace uso de ella, por ello es necesario pensar que las páginas en Ajax muestran datos de forma dinámica, y que no se producirá el refresco de datos si el usuario está offline.
• Hacer esperar al usuario: la ‘A’ de Ajax es de asíncrono, no es necesario que el usuario haga algo para obtener datos, nos podemos adelantar a sus acciones e ir realizando peticiones para obtener esos datos y que el usuario no tenga que esperar la respuesta.
• Enviar información sensible de forma visible: en muchas ocasiones enviamos al navegador los mismos datos que se reciben en la aplicación, la diferencia es que la aplicación filtra esos datos y muestra los que convienen. En el navegador, aunque no se muestren todos, si se envían se podrán ver.
• Asumir que Ajax es una única plataforma: hay que testear correctamente las aplicaciones Ajax para que se puedan ver en las distintas plataformas que permiten Ajax, por ejemplo los distintos navegadores.
• Múltiples usuarios: si tu aplicación la usan varios usuarios a la vez, ten en cuenta que puede haber problemas al actualizar datos por parte de unos y visualizarlos por parte de otros.
• Excesivo trabajo para el navegador: a veces el uso de aplicaciones Ajax hace que el navegador tenga que realizar muchas tareas, lo cual puede no ser bueno para el rendimiento.
• Olvidarse de aquellos que no tienen Javascript: según las estadísticas son un 11%, por ello siempre hay que ofrecer una alternativa no Ajax.
• No usar enlaces: al refrescarse el contenido dinámicamente, nos olvidamos de los enlaces para poder acceder a esa información.
• Salirse de lo común en la usabilidad: al permitirnos realizar operaciones poco habituales, nos encontramos con la circunstancia de que esperemos que el usuario realice una acción que este no espera que se tenga que hacer así. La gente suele estar acostumbrada a realizar siempre lo mismo.
• No realizar cambios en cascada: nos olvidamos de que cuando cambia una parte de la página deben cambiar a su vez otras partes relacionadas.

$.ajax({
        type: "POST",
        url: "alta.php",
        data: "nombre=Jose&id=15",
        success: function(html){
             $.("#destino").html(html)
        }
});

He puesto en mayúsculas la línea en la que se mandan los parámetros. No he trabajado mucho con estas tecnologías pero por más que he buscado no he sido capaz de encontrar otra solución para mandar los parámetros.

El problema, es que la validación de los datos tiendo a hacerla en el destino y no en el formulario origen, por lo que siempre me he limitado a enviar lo que fuera y ya vería después como gestionarlo, pero claro, Ajax y Jquery son más de la opinión de “te lo valido en el momento” por lo que suelen tratar los datos en la misma función que los enviará y por eso pueden crear la cadena.

Para mí es un incordio y tendría que modificar muchos formularios por lo que no estoy dispuesto, como solución, he utilizado DOM para generar automáticamente esa cadena para cualquier formulario.

var objs = document.getElementsByTagName("INPUT");

var str ="";
var j=0;
for (var i=0; i<objs.length; i++) {
   if(j!=0) str+="&";
   if(objs[i].value != ""){
      str += objs[i].name + "=" + objs[i].value;
      j++;
   }
}

Básicamente lo que hago es recoger todos los input del documento (si hubiera más, habría que filtrarlos por el formulario correcto o mediante el id, pero ya no sería muy genérico..) y generar la cadena para mandar.

Al final, tendríamos en str la cadena de datos a enviar por lo que la función ajax quedaría

$.ajax({
        type: "POST",
        url: "alta.php",
        data: str,
        success: function(html){
             $.("#destino").html(html)
        }
});

De momento, me he resistido a utilizar frameworks para css e incluso aún ando dudando si usar alguno para php, pero lo que si tengo claro, es que voy a usar Jquery.

Ajax con Jquery

Sinceramente, esperaba algo más complicado y me ha sorprendido gratamente, tanto su facilidad de uso como lo sencillo que es de modificar.

Para poder utilizar Ajax en Jquery recomiendo leer (aunque sea por encima) la API en la página oficial, allí nos explicarán cómo se hace internamente y cómo se puede usar.

Lo primero que tenemos que tener claro, es que antes de usar Ajax, tenemos que activar Jquery, por lo que la primera instrucción que debería aparecer en nuestra página sería

$(document).ready(function(){
   ....
});

Ahora, una vez inicializado, podemos pasar a utilizar la función Ajax, que llamaremos de la siguiente manera

$.ajax({
   ....
});

Una vez que ya tenemos la llamada a la función que controla Ajax, tendremos que configurarlo mediante una serie de parámetros, tendremos parámetros de configuración, como indicar el tipo de datos que vamos a mandar, la página que se cargará, el tipo de transferencia que realizaremos y otra serie de parámetros a los que yo llamo de estado, donde podremos realizar acciones, cuando empiece, cuando termine, cuando falle, mientras está enviando datos…

No voy a poner todos los posibles parámetros, estos están explicados muy bien en la API antes mencionada, así que me limitaré a hacer un par de ejemplos con lo más frecuente.

Ejemplo para cargar una página estática

Si queremos cargar una página estática “prueba.html” en la capa “destino” deberíamos utilizar el siguiente código

$.ajax({
        url: "prueba.html",
        success: function(html){
            $.("#destino").html(html)
        }
});

En este caso le estamos indicando, mediante el parámetro url, la página que se cargará y mediante el estado success, lo que tendrá que ejecutarse cuando la transferencia haya terminado.

Ejemplo para cargar una página dinámica

En el caso de que queramos hacer lo mismo pero con páginas dinámicas que puedan recibir parámetros, el código sería así

$.ajax({
        type: "POST",
        url: "alta.php",
        data: "nombre=Jose&id=15",
        success: function(html){
             $.("#destino").html(html)
        }
});

Supongo que no hace falta explicar mucho, la única diferencia es que podemos definir de qué forma se enviarán los datos, post o get y el parámetro que los contendrá, data.

¿Y si algo falla?

Si en algún momento el proceso de transmisión falla, tenemos un estado para poder tomar medidas al respecto, es el error.

$.ajax({
        type: "POST",
        url: "alta.php",
        data: "nombre=Jose&id=15",
        success: function(html){
             $.("#destino").html(html)
        },
        error: function(html){
             alert("El proceso ha fallado!");
        }
});

¿Cómo pongo una imagen para indicar que está funcionando?

Uno de los grandes problemas de Ajax es que a veces la gente no sabe que la página está trabajando, para ello, una forma de indicarles que no deben preocuparse es poner un gif que indique que la página está trabajando.

¿Cuando se mostrará esta información? pues sencillo, desde que empiece el proceso hasta que se llegue al estado success.

$.ajax({
        type: "POST",
        url: "alta.php",
        data: "nombre=Jose&id=15",
        beforeSend: function(objeto){
	     $('#destino').html("<img src='ruta/loading.gif' alt='Loading...'/>");
        },
        success: function(html){
             $.("#destino").html(html)
        },
        error: function(html){
             alert("El proceso ha fallado!");
        }
});

Con esto ya tendríamos nuestra pequeña función para utilizar Ajax en nuestros proyectos.

Como ventajas podemos destacar que permitirá la creacción de aplicaciones Ajax de una manera más cómoda y facilitando la integración y desarrollo mediante la tecnología RAP con Java.

En algún momento hice referencia a poder cargar documentos que contuvieran funciones javascript o incluso servlets.

Esto si es posible, pero siempre con algunas recomendaciones para evitar problemas futuros.

Recomendaciones para evitar problemas.

Las funciones javascript deberían ser declaradas en la plantilla base, es decir, donde se establecen las diferentes capas, al lado de las funciones ajax y a ser posible (para mejor organización) en ficheros .js externos al documento, así para cualquier cambio será todo mucho más sencillo.

Las direcciones deberíamos (por lo menos al principio) ponerlas absolutas y a medida que vaya funcionando ir cambiándolas por relativas, así cargaremos menos el servidor. En caso de no tener problema de carga las podríamos dejar como absolutas.

Cuando carguemos una página en una capa, si esta llama a alguna función ya estará declarada en la plantilla base y no habrá ningún problema de ejecución.

Cómo cargar un servlet en una capa con Ajax

La sintaxis sería la misma que con una página normal, nosotros llamaríamos a nuestra función cargar página y le pasaríamos la dirección del servlet (http://localhost:8080/Prueba/ServletPrueba?accion=1) tal cual la usaríamos para acceder normal.

Ahora, el servlet se ejecutará y la salida, por ejemplo, si redirecciona a un .jsp aparecerá en la capa.

La única modificación que tendremos que hacer será modificar los enlaces generados dentro del servlet para que se vuelvan a cargar dentro de la capa, al igual que llamamos al servlet, hacer las demás llamadas.

Recordad que si en algún momento tenemos que ejecutar varias instrucciones javascript a la vez podemos usar un sólo evento, por ejemplo, el onLoad y separarlas con “;”

onLoad(javascrip1();javascrip2())

En concreto se trata de una función a la que pasándole una capa y una dirección url (html, php, jsp, servlet…) carga la página en dicha capa.

function paginas (url, id_contenedor)
{
var pagina_requerida = false;
if (window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest ();
} else if (window.ActiveXObject)
{
// pero si es IE
try
{
pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
}
catch (e)
{
// en caso que sea una versión antigua
try
{
pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else
return false;
pagina_requerida.onreadystatechange = function ()
{
// función de respuesta
cargarpagina (pagina_requerida, id_contenedor);
}
pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send
pagina_requerida.send (null);
}

Si todo ha funcionado correctamente entonces cargaremos el contenido en la capa correspondiente

function cargarpagina (pagina_requerida, id_contenedor)
{
if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1))
document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
}

Me encantaría poder decir de donde obtuve estas funciones, pero no sé el autor ni el tipo de licencia que tienen, pero vamos, que tampoco tienen mucho, cualquiera con mínimos conocimientos de ajax podría hacerlas e incluso mejorarlas ya que son muy básicas.

Las podemos incluir en un fichero javascript externo o integrarlas en nuestro código, de cualquier manera para poder invocar la función sería desde cualquier evento con la sintaxis:

paginas('url','capa_destino')

Donde la url puede ser tanto absoluta como relativa y la capa_destino ha de ser el id de alguna capa, por ejemplo:

paginas('prueba.html','cprueba')

y tendríamos en nuestro código:

<div id="cprueba"></div>

Luego cargaríamos la página prueba.html en la capa “codigo” ubicada mediante css en cualquier parte de nuestra página.

Para poder invocarla podemos usar eventos onChange o onLoad, por ejemplo, si queremos que nada más cargar la página aparezca algo podemos usar la propiedad onLoad del body:

<body onLoad="paginas('prueba.html','cprueba')">

Es conveniente cargar sólo páginas con texto y evitar transferir mediante Ajax funciones javascript ya que suelen dar muchos problemas y fallos.

Si se pretende llamar a un servlet y este redirige a un jsp, por ejemplo, también tendremos ese problema ya que se recargará toda la página y no sólo la capa.

En estos casos quizás sea mejor solución utilizar frames con la estructura de marco flotante

<iframe name = "nombre" width="100%" height="400"  frameborder="0">Texto alternativo</iframe>

Con el frameborder indicaremos si aparece el borde o si por el contrario queremos hacer transparente su presencia.

Para enviar enlaces al frame sólo necesitaremos utilizar el atributo target del enlace para indicar que frame (name), en este caso sería:

<a target= "nombre" href="">Enlace</a>

Espero que os sirva para vuestros comienzos con Ajax.