Consulta los fantásticos manuales de AJAX de los
tutos de esta misma página.
En ajax, no debería ser muy dificil.
De hecho... podría ser algo así:
(código de la página llamante)
<script>
function pone_imagen ( )
{document.getElementById('imagen').innerHTML='<img src="'+document.getElementById('imagenes').value+'" />}
function elige_imagen_por_AJAX ( id_div , url_contenido )
{ /* Aquí el código de la función de carga asíncrona */}
</script>
<body>
<a href="javascript:elige_imagen_por_AJAX('contenedor','url_del_php');"
<div id="contenedor"></div>
<div id="imagen"></div>
</body>
y a continuación el código del "url_del_php.php"
<body>
<form action="javascript:operacion();" method="get">
<select name="imagenes" id="imagenes">
<option value="url_imagen_1">imagen_1</option>
<option value="url_imagen_2">imagen_2</option>
<option value="url_imagen_3">imagen_3</option>
</select>
<input type="submit" />
</form>
</body>
Este código funciona tal y como está (a falta de poner el código de la función de carga asíncrona).
Pero no te quedes sólo en esto... sólo es una guía, y ejemplo... para hacerte una idea.
Tu labor será hacerlo más compatible y accesible para navegadores y usuarios.
PD: con AJAX, evitas tener que "refrescar" la página.
Si vas a "refrescar", usa php, sencillo... ni ajax, ni historias varias.
(lo ideal, será hacerlo, como te indico, mediante AJAX)
PD2: he visto, que algunas personas han tenido problemas poniendo <script></script> dentro de la página cargada con AJAX. Por eso he definido la función "operacion" fuera de ella, poniéndola en la página de carga principal.
Creo que así funcionará correctamente.
