como hacer peticiones con xmlhttprequest

killjaden21 · #1 (**permalink**) 10/11/2009, 11:30

Hola que tal todo el mundo...

Tengo un proyecto en netbeans con una pagina jsp y una clase que tiene un metodo conexion y un metodo consulta, que debo conectar a una base de datos access y con esto llenar campos dinamicamente..

tengo un combo que al seleccionar una opcion debe cargar datos en otro combo en el mismo formulario.

Como se utiliza xmlhttprequest para llamar desde la pagina jsp el metodo consulta contenido en la clase java???

Además, mi metodo consulta obtiene como resultado un objeto de tipo resultset que contiene la columna de datos de mi consulta. Qué debo retornar al jsp para poder llenar el combo con la consulta.

Agradeceria mucho un poco de ayuda..

Adios saludos.

Ignacio B.

maycolalvarez · #2 (**permalink**) 10/11/2009, 11:52

primero que todo el xmlhttprequest o AJAX por así decirlo se ejecuta en el cliente con Javascript y de allí envia una solicitud HTTP GET o POST hacia el server, esta solicitud llega a jsp y en la salida puedes devolver 2 cosas: o un texto plano o un xml, para poder procesarlo:

en javacript será más o menos así:

Código:

function Ajax() {
	var xmlhttpobj;
	function getajax(){
		try {
			xmlhttpobj = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (ex) {
			try {
				xmlhttpobj= new ActiveXObject("Microsoft.XMLHTTP");
			} catch (ex2) {
				xmlhttpobj= false;
			}
		}
		if (!xmlhttpobj && typeof XMLHttpRequest!='undefined') {
			xmlhttpobj = new XMLHttpRequest();
		}
		return xmlhttpobj;
	}
	
	this.cancelar= function(){
		xmlhttpobj.abort();
		var ajaxobject = this;
		ajaxobject.error("Cancelado por el usuario");
	}
	
//envia como GET
	this.sendget = function(url,vars,rxml){
		var xmlhttpobj=getajax();
		var ajaxobject = this;
		xmlhttpobj.open ("GET", url+"?"+vars,true);
		xmlhttpobj.onreadystatechange=function(){
			if (xmlhttpobj.readyState==4){
				if (xmlhttpobj.status==200){
					if (rxml==true){
					//respuesta como XML
						ajaxobject.loadxml(xmlhttpobj.responseXML);
						
					}else {
						//respuesta plana:						
ajaxobject.load(xmlhttpobj.responseText);					
					}
				}
			}else if (xmlhttpobj.readyState==2){
				ajaxobject.preload();
			}
			else if (xmlhttpobj.readyState==3){
				ajaxobject.interactive();
			}
			else if (xmlhttpobj.readyState==1){
				ajaxobject.loading();
			}
		}
		xmlhttpobj.send(null);
	}
	
//envia por POST
	this.sendpost = function(url,postvars,rxml){
		var xmlhttpobj=getajax();
		var ajaxobject = this;
		xmlhttpobj.open ("POST", url,true);
		xmlhttpobj.onreadystatechange=function(){
			if (xmlhttpobj.readyState==4){
				if (xmlhttpobj.status==200){
					if (rxml==true){
					
						ajaxobject.loadxml(xmlhttpobj.responseXML);
						
						//alert(xmlhttpobj.responseXML);
					}else {
						ajaxobject.load(xmlhttpobj.responseText);					
					}
				}
			}else if (xmlhttpobj.readyState==2){
				ajaxobject.preload();
			}
			else if (xmlhttpobj.readyState==3){
				ajaxobject.interactive();
			}
			else if (xmlhttpobj.readyState==1){
				ajaxobject.loading();
			}
		}

		xmlhttpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xmlhttpobj.send(postvars);
	}
	
	this.loading = function cargando(){};
	this.load = function cargado(text){};
	this.error = function error(motivo){};
	this.loadxml = function cargadoxml(xml){};
	this.preload = function precargado(){};
	this.interactive = function iterando(){};
	
}

y se usa:

Código:

function funcionjs(texto){
alert('salida desde el server '+texto);
}

function ejecutarajax(){
var a= new Ajax();
	a.load= funcionjs;
	a.sendget('pagina.jsp',"variable="+valor,false);
}

dggluz · #3 (**permalink**) 10/11/2009, 11:59

Cita:

Iniciado por maycolalvarez

primero que todo el xmlhttprequest o AJAX por así decirlo se ejecuta en el cliente con Javascript y de allí envia una solicitud HTTP GET o POST hacia el server, esta solicitud llega a jsp y en la salida puedes devolver 2 cosas: o un texto plano o un xml, para poder procesarlo:

en javacript será más o menos así:

Código:

function Ajax() {
	var xmlhttpobj;
	function getajax(){
		try {
			xmlhttpobj = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (ex) {
			try {
				xmlhttpobj= new ActiveXObject("Microsoft.XMLHTTP");
			} catch (ex2) {
				xmlhttpobj= false;
			}
		}
		if (!xmlhttpobj && typeof XMLHttpRequest!='undefined') {
			xmlhttpobj = new XMLHttpRequest();
		}
		return xmlhttpobj;
	}
	
	this.cancelar= function(){
		xmlhttpobj.abort();
		var ajaxobject = this;
		ajaxobject.error("Cancelado por el usuario");
	}
	
	this.sendget = function(url,vars,rxml){
		var xmlhttpobj=getajax();
		var ajaxobject = this;
		xmlhttpobj.open ("GET", url+"?"+vars,true);
		xmlhttpobj.onreadystatechange=function(){
			if (xmlhttpobj.readyState==4){
				if (xmlhttpobj.status==200){
					if (rxml==true){
					//respuesta como XML
						ajaxobject.loadxml(xmlhttpobj.responseXML);
						
					}else {
						//respuesta plana:						ajaxobject.load(xmlhttpobj.responseText);					
					}
				}
			}else if (xmlhttpobj.readyState==2){
				ajaxobject.preload();
			}
			else if (xmlhttpobj.readyState==3){
				ajaxobject.interactive();
			}
			else if (xmlhttpobj.readyState==1){
				ajaxobject.loading();
			}
		}
		xmlhttpobj.send(null);
	}
	
//envia por POST
	this.sendpost = function(url,postvars,rxml){
		var xmlhttpobj=getajax();
		var ajaxobject = this;
		xmlhttpobj.open ("POST", url,true);
		xmlhttpobj.onreadystatechange=function(){
			if (xmlhttpobj.readyState==4){
				if (xmlhttpobj.status==200){
					if (rxml==true){
					
						ajaxobject.loadxml(xmlhttpobj.responseXML);
						
						//alert(xmlhttpobj.responseXML);
					}else {
						ajaxobject.load(xmlhttpobj.responseText);					
					}
				}
			}else if (xmlhttpobj.readyState==2){
				ajaxobject.preload();
			}
			else if (xmlhttpobj.readyState==3){
				ajaxobject.interactive();
			}
			else if (xmlhttpobj.readyState==1){
				ajaxobject.loading();
			}
		}

		xmlhttpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xmlhttpobj.send(postvars);
	}
	
	this.loading = function cargando(){};
	this.load = function cargado(text){};
	this.error = function error(motivo){};
	this.loadxml = function cargadoxml(xml){};
	this.preload = function precargado(){};
	this.interactive = function iterando(){};
	
}

y se usa:

Código:

function funcionjs(texto){
alert('salida desde el server '+texto);
}

function ejecutarajax(){
var a= new Ajax();
	a.load= funcionjs;
	a.sendget('pagina.jsp',"variable="+valor,false);
}

Buena respuesta, muy detallada. Sin embargo tengo que añadir que desde el servidor se puede devolver también un objeto JSON y en ocasiones esto es muy práctico. ¡Suerte!

killjaden21 · #4 (**permalink**) 12/11/2009, 08:33

Hola gracias por sus respuestas...

Seria posible un ejemplo mas completo por ejemplo aqui estan mis archivos y sus metodos..

Pagina JSP: Solicitudes.jsp //(parte de mi codigo)//

<form name="Solicitud" method="POST" action="">
<select name="lista1" id="lista1" onchange="llenarCombo()">
<select name="lista2" id="lista2">
</form>
-----------------------------------------------------------------------------------------------------
¿Como puedo escribir el script???? para hacer la peticion de datos a las clases de java y retornar los resultados para llenar la lista2.

<script>
function llenarCombo(){

}
</script>
-----------------------------------------------------------------------------------------------------
Package conexiones; //(contiene dos clases)

conexionAccess.java

contiene metodo selectTemplate() el cual se conecta y hace la consulta.
el metodo que nesecito llamar es:

Public Object selectTemplate().
El cual retorna un objeto rs
//objeto resultset que contiene una columna de resultados de la BD Access
-----------------------------------------------------------------------------------------------------
conexioneOracle.java

contiene metodo selectRegla() el cual se conecta y hace la consulta.
el metodo que nesecito llamar es:

Public Object selectRegla().
El cual retorna un objeto rs
//objeto resultset que contiene una columna de resultados de la BD Oracle
----------------------------------------------------------------------------------------------------
La idea es la siguiente:

Cuando selecciono una opcion del combo1 (osea en el onchange) debo escribir una funcion de script que llame al metodo de las clases y conecte, consulte y retorne los valores, para poder llenar el combo2...
¿Como se llena el combo2 con los datos de la consulta?

hace dos un mes que estoy tratando de resolver esto y no he podido ayuda please!!!!!