Foros del Web » Programando para Internet » Javascript »

Como traer una imagen a un div con ajax

Estas en el tema de Como traer una imagen a un div con ajax en el foro de Javascript en Foros del Web. Buen día. Disculpen la molestia, soy nuevo con javascript y ajax, recientemente he estado trabajando con ajax colocando en un div un archivo html ahora ...
  #1 (permalink)  
Antiguo 25/10/2012, 10:26
 
Fecha de Ingreso: junio-2012
Mensajes: 35
Antigüedad: 7 años, 8 meses
Puntos: 4
Pregunta Como traer una imagen a un div con ajax

Buen día.

Disculpen la molestia, soy nuevo con javascript y ajax, recientemente he estado trabajando con ajax colocando en un div un archivo html ahora me gustaría traer una imagen pero no lo he logrado por lo que pido su ayuda.
Gracias.

Para cargar el html lo hago de la siguiente manera.. la funcion recibe el html y el div donde lo va a colocar.

Código HTML:
if(window.XMLHttpRequest){
	peticion_http = new XMLHttpRequest();	
}
else if(window.ActiveXObject){
	peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
}

/*fUNCION PARA CARGAR EL ARCHIVO HTML*/
function Mostrar(pagina, id){
	var oid = document.getElementById(id);
	peticion_http.open("GET", pagina);
	peticion_http.onreadystatechange = function(){
		if(peticion_http.readyState == 4 && peticion_http.status == 200){
			oid.innerHTML = peticion_http.responseText;	
		}
	}
	peticion_http.send(null);
}
  #2 (permalink)  
Antiguo 25/10/2012, 11:54
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 11 años, 7 meses
Puntos: 1532
Respuesta: Como traer una imagen a un div con ajax

recuerda que el tag IMG realiza una petición para obtener la imágen, así que solo basta:

Código Javascript:
Ver original
  1. var imagen = document.getElementById('id_img'); // <img > del DOM
  2. imagen.src = 'ruta_de_la_imagen.ext'; //con ésto cargas la imagen del server

éso si ya tienes la ruta de la imágen, ajax no es realmente necesario a no ser que necesites obtenerlo del servidor, en tal caso o retornas el código HTML completo del <img /> con la ruta de la imagen desde el server, o aplicas el responseText como el src del IMG devolviendo la ruta del server.

lo ideal para ahorrarnos la doble petición (ajax+src de imagen) es crear un controlador de imágen, donde pases por parámetro al src del IMG y desde el server (php por ejemplo) dumpees el binario de la imágen, quedaría mas o menos así:

Código Javascript:
Ver original
  1. var imagen = document.getElementById('id_img');
  2. imagen.src = 'imagen.php?img=nombre_o_codigo_imagen'; //con ésto cargas la imagen del server

la parte del server la tienes que programar según el lenguaje que uses, usualmente en PHP no son más de 3 lineas de código, saludos
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Etiquetas: ajax, funcion, html, tracker
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:54.