Capítulo 4: Ejemplos reales de uso para AJAX 75
4.5 Auto verificación y rendimiento en AJAX 83
La auto verificación es una de esas cosas sencillas que puede ayudar muchísimo al usuario y hacer que nuestro portal tenga algo diferente respecto de otros, pero también puede ser una manera de cargar tanto el servidor que tengamos que comprar uno 10 veces mas grande.
Consiste básicamente en que ciertas acciones, como podría ser ver si una página Web existe o un usuario existe, se realicen sin necesidad de que el usuario tenga que pulsar ningún botón. Estas acciones se realizan automáticamente cuando fueran útiles, evitando muchas veces cargar una página de error, el ejemplo que nos ocupa trata una hipotética creación de usuario, estoy seguro de que más de un lector ha tenido problemas para registrarse debido a que los nombres de usuario que le gustaban estaban ya en uso, este ejemplo intenta resolver esto de forma más elegante sin tener que recibir una página nueva que diga “el nombre de usuario esta cogido”, con la consecuente pérdida de tiempo.
El ejemplo siguiente consta de 3 archivos, uno .html que tiene tanto código JavaScript como HTML y dos archivos .jsp, el único archivo que no es pequeño es el html que se dividirá en dos partes para mostrarlo en este texto, dicho esto comenzamos con el ejemplo.
autoVerificar.html (Parte HTML)
<h1>EJEMPLO DE VERIFICACION DE USUARIOS USANDO AJAX</h1> <br />
Tenemos una hipotética base de datos (simulada) solo con dos usuarios, JuanMa y Sergio.
<br />
Queremos crear un nuevo usuario.
<br />
El sistema comprobará mientras que escribes si tu nombre de usuario esta ya en la base de datos o no.
El nombre debe ser de al menos 4 caracteres de largo.
<br />
<form action="insertar.jsp" method="get"> <table border="0">
<tr>
<!--Si usamos el atributo id, la variable idUsuario no se enviara a la pagina insertar.jps y si usamos name no referenciaremos el objeto dentro de esta página, solución, usar los 2 -->
<td>
<input type="text" id="idUsuario" name="idUsuario" size="20"
onkeyup="validarUsuario()" /> </td> <td> <span id="mensajeValidacion"> </span> </td> </tr> </table>
<input type="Submit" id="botonAceptacion" value="Crear Cuenta" /> </form>
</body>
Como se ve es un formulario muy sencillo, se destaca la primera línea debido a que tiene una cosa algo curiosa, nada más terminar de cargar la página se lanza una función, esta función desconectará el botón ya que éste se activará y desactivará dependiendo de si el usuario introducido es válido o no, el aspecto del ejemplo es el mostrado en la ilustración que sigue.
Capítulo 4: Ejemplos reales de uso para AJAX 85
autoVerificar.html (Parte Javascript)
<script language="JavaScript" type="text/javascript">
var PeticionAjax01 = new objetoAjax("GET"); //Definimos un nuevo
objetoAjax.
PeticionAjax01.completado = objetoRequestCompletado01; //Función
completado del objetoAjax redefinida. function validarUsuario()
{
if (!posibleUsuario) //Crea una variable con el nombre del Posible
nuevo usuario {
var posibleUsuario = document.getElementById("idUsuario");
}
// Envía el nombre a la url de verificación si este es de al menos 4 caracteres de largo.
if (escape(posibleUsuario.value.length) > 3)
{
var url = "validarUsuario.jsp?id=" + escape(posibleUsuario.value);
PeticionAjax01.coger(url); }
else {
desconectaBoton(1); //Desactivamos el botón si el nombre es muy
corto.
document.getElementById('mensajeValidacion').innerHTML = "Nombre muy
corto."; //Si había texto lo borramos. }
}
function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, respuestaXML)
{
//La pagina jsp devolverá true si el nombre se puede usar y false si ya está usando por otro usuario.
if(respuestaTexto == "true")
{
document.getElementById('mensajeValidacion').innerHTML = "<div
style=\"color:green\">Nombre usuario libre.</ div>";
desconectaBoton(0); //Si se puede usar mantenemos el botón activado.
} else {
document.getElementById('mensajeValidacion').innerHTML = "<div
style=\"color:red\">Nombre de usuario ya cogido.</ div>";
desconectaBoton(1); //Si no se puede usar desactivamos el botón.
} }
function desconectaBoton(opcion) {
var boton = document.getElementById("botonAceptacion"); boton.disabled = opcion;
}
</script>
La idea es muy sencilla, la función validarUsuario() envía el nombre al servidor al archivo validarUsuario.jsp si éste es de al menos de cuatro caracteres, el servidor sólo nos puede contestar true(el nombre se puede usar) o false(nombre ocupado). Dependiendo de esta respuesta que se recibe en la función objetoRequestCompletado01() se deja el botón activo o se desactiva, de esta manera al usuario no le llegará la típica página diciendo que su nick de registro
está ya cogido cada vez que intenta registrarse y se evita con ello perder el contexto y los datos de la página donde estamos.
Con lo anterior explicado los estados posibles en los que puede estar la página son los mostrados en la ilustración siguiente:
Ilustración 52 Ejemplo de verificación, estados posibles.
Aunque no añade mucho al ejemplo aquí están los archivos jsp ya que pueden aclarar de dónde se saca el valor de respuesta y cómo se ha simulado el mirar en una base de datos.
validarUsuario.jsp
<%
String usuario;
usuario=request.getParameter("id");
//Tenemos una hipotética base de datos solo con JuanMa y Sergio, la simulamos de esta manera.
if ( (usuario.equals("JuanMa")) || (usuario.equals("Sergio")))
{ out.print("false"); } else { out.print("true"); } %> insertar.jsp <html> <head><title></title></head> <body>
<!-‐-‐Simulamos la inserción del usuario en la base datos, pero no es real, no se inserta nada. -‐-‐>
Usuario insertado: <%= request.getParameter("idUsuario") %> <br /> <a href="index.html">Vuelve a la página principal</a>.
</body> </html>
Esta, como muchas otras cosas que se pueden realizar haciendo chequeos consecutivos al servidor empleando AJAX, tienen un coste en términos de CPU y ancho de banda.
Capítulo 4: Ejemplos reales de uso para AJAX 87
En algunos casos AJAX ayuda a ahorrar mientras que en otros hace que caiga el rendimiento considerablemente, este es uno de los segundos, cada vez que nuestro usuario libere una tecla se enviará una petición.
Si se llena una página de servicios como éste y el servidor ya estaba más o menos copado puede ser un gran problema, por ello el diseñador de la aplicación web debe tener estas cosas en cuenta y saber bien con qué está trabajando.