TUTORIAL DE COMBOS DEPENDIENTES CON AJAX Y JSP

Este tutorial es una recopilacin de toda la informacin que pude conseguir respecto a este tema la cual luego de estudiarla la adapte a los requerimiento de mi proyecto, en especial lo referente a ajax que fue algo que desconoca por completo y que me pareci muy interesante aprender, es la primera vez que hago un tutorial , as que intentare hacerlo lo mas entendible que pueda. PASO1: Debemos crear en SQL dos procedimientos Almacenados, bueno esto va variar segn los requerimientos de nuestro sistema, en el caso de estar trabajando con departamento provincia distrito, tendra que crear tres procedimientos almacenados, donde la lgica y proceso es muy similar, en mi proyecto tambin implemente combos de departamentos y provincias, pero en este tutorial me limitare hacer el ejemplo de CATEGORIAS Y SUBCATEGORIAS ya que el proceso es muy similar para el otro caso: SP_DEVUELVE CATEGORIA CREATE PROCEDURE DEVUELVE CATEGORIA AS Select* from Categoria (Donde mi tabla categora tiene dos campos que son idcategoria ,y la descripcin de la categoria) SP_DEVUELVE SUBCAT Aqu si debo entregarle como parmetro de entrada al SP, el id_categoria ,y en base a ello me devuelva los campos (id_subcat ,desc_subcat) de mi tabla SUBCATEGORIAS. El SP, seria de esta forma: CREATE PROCEDURE DEVUELVESUBCAT @idcategoria char(5) AS Select id_subcat,desc_subcat from SUBCATEGORIA where id_categoria =@idcategoria PASO2: En este paso explicare las clases correspondiente que debemos crear en cada CAPA del proyecto ,en mi caso he trabajado con TRES CAPAS : PAQUETE BEANS: Vamos a crear dos beans categora y subcategoria BEANS CATEGORIAS:
package BEANS; /** *

*/ public class categoria { private String idcategoria; private String descripcion; public categoria() { } public String getIdcategoria() { return idcategoria; } public void setIdcategoria(String idcategoria) { this.idcategoria = idcategoria; } public categoria(String descripcion) { this.descripcion = descripcion; } public String getDescripcion() { return descripcion; } public void setDescripcion(String descripcion) { this.descripcion = descripcion; }

BEANS SUBCATEGORIA
package BEANS; /** * */ public class subcategoria { private String idsubcat; private String idcategoria; private String descrip; public subcategoria() { } public String getDescrip() { return descrip; } public void setDescrip(String descrip) { this.descrip = descrip; } public String getIdcategoria() {

return idcategoria; } public void setIdcategoria(String idcategoria) { this.idcategoria = idcategoria; } public String getIdsubcat() { return idsubcat; } public void setIdsubcat(String idsubcat) { this.idsubcat = idsubcat; }

PAQUETE DAO: dentro del paquete DAO ,se ha creado una clase llamada bsquedas ,la cual contiene los siguientes mtodos que interactan con la base de datos y que invocaran a los procedimientos almacenados creados previamente.
public Vector buscadorCategorias() { Vector V=new Vector(); try { conexion con = new conexion(); cn = con.getConexion(); CallableStatement Cstmt; Cstmt = cn.prepareCall("{call DEVUELVECATEGORIA}"); ResultSet rs; rs=Cstmt.executeQuery(); while(rs.next()){ categoria cat =new categoria(); cat.setIdcategoria(rs.getString(1)); cat.setDescripcion(rs.getString(2)); V.addElement(cat); } } catch (SQLException e) { System.out.println("error al devolver categoria"); } finally { return V; } }

public Vector buscadorSubcategorias(String Idcategoria) { Vector B=new Vector(); try { conexion con = new conexion(); cn = con.getConexion(); CallableStatement Cstmt; Cstmt = cn.prepareCall("{call DEVUELVESUBCAT(?)}"); Cstmt.setString(1, Idcategoria); ResultSet rs; rs=Cstmt.executeQuery(); while(rs.next()){ subcategoria subcat =new subcategoria(); subcat.setIdsubcat(rs.getString(1)); subcat.setDescrip(rs.getString(2)); B.addElement(subcat); } } catch (SQLException e) { System.out.println("error al devolver subcategoria"); } finally { return B; } }

PAQUETE UTILITARIOS: En este paquete se ha creado una clase llamada llenarcombos,la cual invocara los mtodos creados en la clases bsquedas del paquete DAO public Vector comboCategorias(){ busquedas B=new busquedas(); return B.buscadorCategorias(); }

public Vector comboSubCategorias(String Idcategoria){ busquedas B=new busquedas(); return B.buscadorSubcategorias(Idcategoria); }

PASO3: Ahora trabajaremos dentro de la pagina JSP, en mi proyecto la encontrara con el nombre de new_producto, para ello primero debemos importar los paquetes y clases java que vamos a utilizar dentro de nuestra pagina ,para ellos nos ubicaremos dentro de la etiqueta Page que se encuentra al inicio de la pagina JSP: <%@page contentType="text/html" pageEncoding="UTF-8" import="DAO.busquedas,utilitarios.llenarcombos,java.util.Vector,BEANS.categoria,BEANS.subca tegoria"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> PASO 4: Una vez importadas nuestros paquetes y clases Java , dentro del formulario ,nos ubicamos dentro de las etiquetas SELECT del combo categoras e invocaremos a los mtodos creados dentro de la clase llenarcombos (ComboCategorias) ,para luego obtener los elementos dela base de datos uno a uno mediante un bucle y almacenarlos dentro de un vector.

Deben tener en cuenta que en la lnea de cdigo en donde muestro la descripcin categora en la opcin valu del combo se esta poniendo el id de la categora, esto para que cuando mandemos la categora se tome el id para poder realizar la bsqueda en la tabla subcategorias.

PASO 5: Ahora veremos la parte de AJAX, para esto tenemos un archivo javascript ajax_subcategoria.js en el cual tendremos el siguiente cdigo:

Veamos lo que hace este cdigo: Var xmlHttp: En esta lnea lo que se hace es declarar una variable de tipo java script de nombre xmlHttp (se puede haber usado cualquier otro nombre) ,en esta variable vamos almacenar el objeto (XMLHttpRequest) .Este objeto es muy importante, ya que en este se basa el funcionamiento del Ajax . Creamos la Funcion getsubcat ,a la cual le estamos enviando como parmetro el idcategoria luego en la parte mas abajo vemos que hacemos la referencia a la pagina ajax_subcategoria.jsp, que es en la que recuperaremos la informacin de la tabla de subcategorias enviando como parmetro el idcategoria. Para realizar la peticin al servidor vamos a instanciar el objeto (XMLHttpRequest) dentro de la variable xmlHttp. Lo que hace el objeto XMLHttpRequest, es preparar la funcin de respuesta, realiza la peticin al servidor y ejecuta la funcin de respuesta.

Todas las aplicaciones realizadas con tcnicas de AJAX deben instanciar en primer lugar el objeto XMLHttpRequest, que es el objeto clave que permite realizar comunicaciones con el servidor en segundo plano, sin necesidad de recargar las pginas.

La implementacin del objeto XMLHttpRequest depende de cada navegador, por lo que es necesario emplear una discriminacin sencilla en funcin del navegador en el que se est ejecutando el cdigo:
if(window.XMLHttpRequest) { // Navegadores que siguen los estndares peticion_http = new XMLHttpRequest(); } else if(window.ActiveXObject) { // Navegadores obsoletos peticion_http = new ActiveXObject("Microsoft.XMLHTTP"); }

Yo encontr dos variantes de este objeto y las dos me funcionaron ,as que no tuve problemas ,esta son: new ActiveXObject("Msxml2.XMLHTTP"); new ActiveXObject("Microsoft.XMLHTTP");

Los navegadores que siguen los estndares (Firefox, Safari, Opera, Internet Explorer 7 y 8) implementan el objeto XMLHttpRequest de forma nativa, por lo que se puede obtener a travs del objeto window. Los navegadores obsoletos (Internet Explorer 6 y anteriores) implementan el objeto XMLHttpRequest como un objeto de tipo ActiveX. Ahora continuare explicando las dems lneas de cdigo: var url="ajax_subcategoria.jsp"; (pagina de la cual recuperaremos la informacin de la tabla subcategorias) url=url +"?idcategoria="+idcategoria; ( adjunto a la pagina ajax_subcategoria el idcategoria ,para que busque las subcategorias segn el idcategoria que se le envie)
xmlHttp.onreadystatechange=resultado_subcategoria;
onreadystatechange es una propiedad del objeto XMLHttpRequest la cual almacena el nombre de la funcin que se ejecutar cuando el objeto XMLHttpRequest cambie de estado,es decir cuando reciba la respuesta del sevidor,se ejecutara la funcin resultado_subcategoria

xmlHttp.open("GET",url,true); xmlHttp.send(null); Las instrucciones anteriores realizan el tipo de peticin que se va enviar al servidor, se trata de una peticin de tipo GET simple que no enva ningn parmetro al servidor. La peticin HTTP se crea mediante el mtodo open(), en el que se incluye el tipo de peticin (GET), la URL solicitada (ajax_subcategoria.jsp + idcategoria) y un tercer parmetro que vale true. Una vez creada la peticin HTTP, se enva al servidor mediante el mtodo send().

function resultado_subcategoria(){
if(xmlHttp.readyState==4){ document.getElementById("result_subcategoria").innerHTML= xmlHttp.responseText;

} La funcin resultado_subcategoria() se ejecutara cuando se reciba la respuesta del servidor La primera lnea if(xmlHttp.readyState==4) comprueba en primer lugar que se ha recibido la respuesta del servidor (mediante el valor de la propiedad readyState). La propiedad readyState Almacena el estado del requerimiento hecho al servidor, su valores pueden ser de 5 tipos:
0 No inicializado (el mtodo open no a sido llamado) 1 Cargando (se llam al mtodo open) 2 Cargado (se llam al mtodo send y ya tenemos la cabecera de la peticin HTTP y el status) 3 Interactivo (la propiedad responseText tiene datos parciales) 4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor)

Una vez comprobado si se ha recibido alguna respuesta, simplemente se muestra por pantalla el contenido de la respuesta del servidor (en este caso, el contenido del archivo solicitado) mediante la propiedad responseText.
document.getElementById("result_subcategoria").innerHTML= xmlHttp.responseText;

document.getElementbyid(esta propiedad de java script nos permite identificar un determinado objeto dentro de una pagina por su id ,es decir identifica al objeto que tenga el id=result_subcategoria ,y cambia su contenido por la respuesta enviada desde el servidor que en mi caso van a ser todas las subcategorias relacionadas al idcategoria enviado como parametro, podemos cambiar el contenido mediante la propiedad InnerHTML ,esta propiedad nos permite entre otras cosas dar efectos dinmicos a nuestra pagina.,) Entonces el objeto de mi pagina cuyo id=("result_subcategoria"). Es donde se me mostraran los resultados obtenidos . Esto lo veremos en el siguiente paso.

PASO 6:

Ahora vamos a crear una nueva pagina JSP , la encontrara con el nombre ajax_subcategorias.jsp ,cuyo cdigo es el siguiente:

En este cdigo, como en el caso anterior primero importaremos dentro de la etiqueta page los paquetes y clases que usaremos. Luego declaramos e inicializamos las variables de mi tabla subcategorias que son de tipo string. Creamos un objeto vector B; Instanciamos el BEANS subcategorias como subcat. Obtenemos el parmetro idcategoria enviado desde la pagina JSP new_producto () Luego en la siguiente lnea de cdigo invocamos al mtodo ComboSubcategorias de la clase llenar combos, verificamos que el vector no este vacio y mostramos dichos elementos en el combos subcategorias. IMPORTANTE: para poder enviar a esta pagina (ajax_subcategorias.jsp) el parmetro idcategoria enviado desde la pagina new_producto() no debemos olvidar importar la librera ajax_categoria.js dentro de las etiquetas HEAD de la pagina new_producto () <script type="text/javascript" src="script_js/ajax_categoria.js"></script>

Ahora dentro de nuestra pagina new_producto ,nos ubicaremos dentro de las etiquetas select del combo categoras y en el evento onchange ,invocaremos a la funcin getsubcat(this.value), la cual fue vista anteriormente ,esta funcin va recibir como parmetro el idcategoria ,almacenado en la propiedad value del combo categora y la va enviar al servidor para que la procese y envi la respuesta ,la cual se mostrara en el combo subcategorias .

Ahora para mostrar el resultado ,observar en el cdigo de abajo que estoy asignando a la etiqueda div que contiene al combo subcategorias el id=result_subcategoria que es donde quiero que se me filtren los resultados.

Bueno eso es todo con respecto a los combos dependientes .espero haberme dejado entender y que le sea mucha utilidad a usted y a las personas que lo lean.

PAGINACION CON JSP Y ARRAYLIST: En mi proyecto podr encontrar dos tipos de paginacin una realizado con resultset que utilize para mi intranet y la otra con arraylist que utilice para la mi catalogo . En el primer tipo de paginacin el proceso se realiza dentro de la misma pagina JSP ,la encontrara con los nombre de listas ; listar_productos,listar_clientes,etc En la de tipo Arraylist , he creado una clase dentro del paquete DAO llamado Opera ,en el cual obtengo desde mi base de datos los registro de los productos ,y luego lo almaceno en un objeto de tipo arraylist ,este objeto luego lo tengo que invocar en mi pagina JSP ,que se llama index5.jsp,donde importo el paquete y la clase DAO.opera, y llamo al objeto de tipo arraylist. Puede ver el cdigo en mi pagina index5.jsp.