Buenos dias, a peticion de un amigo, voy a dar una pequeña introduccion a ajax. Buscando en internet he encontrado algunaos manuales muy buenos, donde te hablan de como funciona ajax, la capa intermedia entre el navegador y el servidor, etc... Pero la primera vez que lei uno de estos me quede con una pregunta ¿Como empiezo?. Asi que en este tutorial empezaremos un ejercicio desde cero, eso si, suponiendo que se tienen conocimientos previos de java, servlets y jsp.
Bueno empezare explicando que vamos a hacer.
Haremos un campo de entrada donde iremos escribiendo y conforme escribimos el sistema va a buscar en una lista los correos relacionados con los caracteres que se van tecleando y nos los mostrara en un div flotante(Como un autocompletar).
Lo primero que haremos es el jsp, con el input donde se van a teclear los datos:
input type="text" name="mail" id="mail" value="" size="100"
onkeyup="obtenMail(this, 'listaMails'); return false;"
Este es un simple input al cual le vamos a dar el id de mail, con este id vamos a identificar al elemento.Tambien hay que crear un div invisible en el cual se van a mostrar los correos.
div id="listaMails" style="display: none;"
A conticuacion creamos un archivo javascript, aqui vamos a crear 3 funciones importates. A la primera la llamaremos getXMLHTTPRequest() o como mejor les paresca. Esta funcionen la que nos va a regresar ul objeto con el cual nos vamos a comunicar con el servidor. La funcion quedaria de la siguiente manera:
function getXMLHTTPRequest(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
var http = getXMLHTTPRequest();
En esta funcion se valida dependiendo del tipo de navegador que se utilize.
Despues haremos una funcion que llamaremos cargaContenido() a la cual le vamos a pasar dos valores, el primero es el input donde se van a meter los datos, el segundo es el div, donde van a aparecer los valores que se traigan del servidor.
function obtenMail(inputObject, division) {
var url = 'BuscaMail?text=' + inputObject.value;
divisionValores = division;
http.open("GET", url, true);
http.onreadystatechange = muestraResultadoMail;
http.send(null);
}
En esta funcion se abre hace una peticion al servidor de tipo GET pasandole un url. Despues se le asigna la funcion que se va a ejecutar, y por ultimo le desimos que no le vamos a pasar ningun parametro.
Despues haremos la funcion la cual nos va a manejar la respuesta.
function muestraResultadoMail() {
if (http.readyState == 4) {
if (http.status == 200) {
var mails = http.responseXML.getElementsByTagName("mails")[0];
var mailList = mails.getElementsByTagName("mail");
var divListaMails = document.getElementById(divisionValores);
var html1 = "< table >";
for (i = 0; i < mailList.length; i++) {
var valor = mailList[i].childNodes[0].nodeValue;
html1 = html1 + "< tr id='row_" + i + "' onmouseover='seleccionarRenglon(" + i + ") ; return false;' ";
html1 = html1 + " onmouseout='deseleccionarRenglon(" + i + ") ; return false;'";
html1 = html1 + " onclick='seleccionarValor(\"" + valor + "\", \"mail\", \"" + divisionValores + "\")' ; return false;'";
html1 = html1 + " >";
html1 = html1 + "< td >" + valor + "";
}
html1 = html1 + "< / table >";
divListaMails.innerHTML = html1;
if (mailList.length == 0)
divListaMails.style.display = "none";
else
divListaMails.style.display = "block";
}
}
}
Esto es en cuanto a java script, ah este codigo se le pueden hacer mejoras utilizando json, pero por el momento lo dejaremos asi. Ahora pasaremos a la parte del revlet que se va a ejecutar
Primero creamos una clase a la cual vamos a llamar BuscaMail, y la extenderemos de la clase
javax.servlet.http.HttpServlet para que esta clase sea un servlet, no hay que olvidar dar de alta el servlet en el web xml.
Creamos la clase
public class BuscaMail extends HttpServlet implements
javax.servlet.Servlet {
public BuscaMail() {
super();
}
}
Ahora hay que crear el metodo doGet del serlet, el cual nos va a regresar la lista de correos
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String text = request.getParameter("text");
// Buscamos en la BD o en memoria
double random = Math.random();
int numero = 0;
if (text != null && text.trim().length() != 0)
numero = (int) (random * 10);
response.setContentType("text/xml");
PrintWriter pw = response.getWriter();
pw.write("< ?xml version=\"1.0\" ? >");
pw.write("< meve >< mails >");
for (int i = 0; i < numero; i++)
pw.write("< mail >" + (text + i) + "@gmail.com< /mail >");
pw.write("< /mails >< /meve >");
pw.flush();
pw.close();
}
En este metodo nosotros creamos los correos, pero lo mejor es buscarlos en una base de datos o tenerlos en memoria y buscarlos ahi.
Y con esto se deberia de mostrar un inpun en el cual conforme vas tecleando se van mostrando los posibles correos.
Bueno eso es todo por el momento, espero no haberlos confundido mas, cualquier duda o comentario me pueden escribir a xgress2000@hotmail.com
igo nuevas buenas para tranquilizar un poco mis nervios después de una mala noche.
