Fetishcode…Thinking in objects

Este es el nombre por el cual se conoce una limitación de seguridad de Ajax, que imposibilita que se puedan realizar conexiones con otros dominios externos, a los cuales esta corriendo la aplicación.
En el capítulo 11 del libro Introducción a AJAX de librosweb hablan en profundidad sobre el tema.
Y en http://www.ajax-cross-domain.com podemos encontrar una librería que nos ofrece el poder hacer peticiones externas.

Por cierto, desde aqui dar las gracias a la gente de Librosweb, por liberar todo ese conocimiento

Para ello lo que haremos será crear los combos dependientes en jsp separados,llamarles via ajax y el resultado incrustarlo en el jsp que contiene el formulario con el combo principal.
A continuación un pequeño ejemplo:

Jsp Principal:

<form name="formulario" action="action.jsp" method="POST" id="formulario">
   <div>
      <label for="comboprincipal"> comboPrincipal </label>
      <select name=" comboprincipal " id=" comboprincipal " onchange="javascript:cargarCombo(' combodependiente.jsp', 'comboprincipal', div_combodependiente)">
            <option value="">Selecciona</option>
             < %//cogemos valores de la bbdd%>
       </select>
     </div>
     <div id="div_combodependiente">
         <label for="combodependiente">comboDependiente</label>
         <select name="combodependiente"  id="combodependiente" ></select>
     </div>
 </form>

A continuación el javascript que hace la peticion AJAX del jsp combodependiente. Este método recibe tres parámetros:el jsp que tiene que llamar, el campo que ha recogido del combodeprincipal, del cual depende y el id del componente html donde volcara el resultado de la petición Ajax.

/*PETICIONES AJAX PARA COMBOS ANIDADOS*/
var peticion = false;
var  testPasado = false;
try {
  peticion = new XMLHttpRequest();
  } catch (trymicrosoft) {
  try {
  peticion = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
  try {
  peticion = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (failed) {
  peticion = false;
  }
  }
}
if (!peticion)
alert("ERROR AL INICIALIZAR!");

function cargarCombo (url, comboAnterior, element_id) {
    //Obtenemos el contenido del div
    //donde se cargaran los resultados
    var element =  document.getElementById(element_id);
    //Obtenemos el valor seleccionado del combo anterior
    var valordepende = document.getElementById(comboAnterior)
    var x = valordepende.value
    //construimos la url definitiva
    //pasando como parametro el valor seleccionado
    var fragment_url = url+'?Id='+x;
    element.innerHTML = '<img src="Imagenes/loading.gif" />';
    //abrimos la url
    peticion.open("GET", fragment_url);
    peticion.onreadystatechange = function() {
        if (peticion.readyState == 4) {
	//escribimos la respuesta
	element.innerHTML = peticion.responseText;
        }
    }
   peticion.send(null);
}

Y por último el combodependiente.jsp

< %
    out.println("<label for='combodependiente'> comboDependiente ");
    out.println("<select name='combodependiente'  id='combodependiente' >");
    out.println("<option value=''>Selecciona</option>");
//recogemos el parámetro
if(request.getParameter("Id")!=null){ //cogemos valores de la bbdd
}
%>

Como veis en el combodependiente.jsp solo cargamos los posibles valores del combo sin el elemento  contenedor “Select” ya que este se implementa en el jsp principal.

Nota:El JavaScript fue sacado de http://www.webintenta.com

Actualización:En el combodependiente.jsp es importante cargar todo mediante out.println sino no funciona en IE7