Hola,
estoy de acuerdo en que lo que proponéis es correcto.
Con vuestras indicaciones se puede asignar la imagen que genera un script (binaria) a un elemento IMG del html sin necesidad de AJAX. Sin embargo la carga de la ventana no tiene porqué coincidir con el tiempo necesario para que el script devuelva el resultado. Como consecuencia, no se pueden sincronizar los elementos de la página. Por ejemplo, si quisiéramos poner un gif animado mientras se procesa el script.... no sabríamos cuándo poner o quitarle la visibilidad ya que window.onload nos indica el momento en que se completa la carga del html y no tiene porqué coincidir con la finalización del script.
Según entiendo, la alternativa AJAX me da la posibilidad de actualizar cosas
mientras se completa el proceso (por ejemplo, un buen indicador de progreso) y por eso me interesa.
Resumiendo:
- con PHP a secas no hay problema en asignar la salida del script al <img>
- con Javascript a secas tampoco (lo habéis explicado de forma muy clara).
- con AJAX, recibo el resultado del proceso pero no sé como asignarlo al <img>
Un ejemplo que aclara la dificultad de usar la técnica que me proponéis es el siguiente. Observaréis que la página se carga muy rápido (html) mientras que el script todavía necesita tiempo para completar su ejecución. Como resultado de esta falta de sincronismo, las asignaciones de visibilidad no funcionan correctamente:
Código:
<html>
<head>
<script type="text/javascript">
window.onload = load;
function load() {
document.getElementById('grafica').src='script.php';
document.getElementById('wait').style.display='none';
document.getElementById('graph').style.display='block';
};
</script>
</head>
<body>
<form method="post" action="index.html">
<input type="submit" id="enter" value="enter"></td>
</form>
<div id="wait" style="display:block;"><img src="wait.gif"></div>
<div id="graph" style="display:none;"><img id="grafica" src=""></div>
</body>
</html>
El script php simplemente genera una imagen básica (el bucle sólo ralentiza el proceso emulando la aplicación original)
Código PHP:
<?php
Header("Content-type: image/png");
$im = ImageCreate (350, 100) or die ("Cannot Create image");
$back_color = ImageColorAllocate ($im, 255, 0, 255);
imagepng($im);
# delay
for($i=1;$i<10000;$i++)
for($j=1;$j<10000;$j++) $x=$i*$j;
echo $im;
?>
Un saludo y gracias por el tiempo que me dedicáis.
Juan Sánchez