Problemas con mis primeras pruebas

kennyhp · #1 (**permalink**) 31/01/2007, 02:35

Hola, estoy realizando mis primeras pruebas con Ajax y de momento no me funciona, he estado varias horas probando mi código y tirando de google, pero de momento no hay manera, a ver si me podeís ayudar vosotros...

Lo que quiero hacer es que al clicar en un link cargue una imagen en una etiqueta Div, tengo esto:

en pagina1.php:
Cargo el objeto...

Código HTML:

<html>
<head>
<title>Pruebas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
</script>

La función que devería mostrar la imágen:

Código HTML:

<script language="javascript">
function muestra_perfil(pagina,divID)
{
var estado; // 1 oculto, 0 desplegado

//if(estado !=0 && estado !=1) estado=0;
//if(estado==1)
//{
	if(XMLHttpRequestObject)
	{
		var mostrar = document.getElementById(divID);
		XMLHttpRequestObject.open("GET", pagina, true);
		XMLHttpRequestObject.onreadystatechange = function()
		{
			if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) 
			{
		
		//ahora tengo un alert, pero aquí deveria mostrar la imagen, creo.
		//la cosa es que no me muestra ni el alert
                   alert("jander");
			}
			else{
			// me muestra este alert, por lo tanto no carga bien el objeto
                        var codigo_error2 = XMLHttpRequestObject.readyState;
			var codigo_error = XMLHttpRequestObject.status;			
			alert("pasa algo " +  codigo_error + codigo_error2);
				
				}	
 
		}
	XMLHttpRequestObject.send(null);
	}
estado=0;
}
</script>

Aquí el código HTML que llama a la funcion:

Código HTML:

</head>

<body>

<div id="Layer1" style="position:absolute; left:203px; top:60px; width:292px; height:231px; z-index:1">
  <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><img src="../Unnamed%20Site%201/imagenes/perfilarr.jpg" width="301" height="99" border="0" usemap="#Map"></td>
    </tr>
  </table>
  <div id="perfil_muestra">
  </div>
  <p>&nbsp;</p>
</div>
<map name="Map">
  <area shape="rect" coords="276,4,289,17" href="" onClick = "muestra_perfil('perfil_bajo.php','perfil_muestra');">
</map>
</body>
</html>

En perfil_bajo.php simplemente esta la imagen:

Código HTML:

<img src="perfil_bajo.jpg" width="301" height="115">

Pues a ver si me podeís ayudar, gracias y un saludo!

MarioNunes · #2 (**permalink**) 02/02/2007, 07:13

Que guarrada de código ^_^

Con prototype haces menos lineas y es más fácil de entender:

échale un vistazo

http://www.prototypejs.org/

Un saludo.

ventanazul · #3 (**permalink**) 02/02/2007, 08:49

Mario, talvez luzca como guarrada pero es Javascript puro, Prototype y varias librerías lo hacen más fácil, claro, pero en esencia son solo una interfaz más amigable para Javascript.

Kenny, en la línea:

Código:

XMLHttpRequestObject.open("GET", pagina, true);

¿Por "pagina" te refieres al archivo "perfil_bajo.php"?

Si es así creo que alli está tu problema. perfil_bajo.php debería retornar texto, XML o incluso JSON que luego Javascript procesará.

En tu caso podrías simplemente retornar el nombre de la imagen como texto, "perfil_bajo.jpg", y crear el elemento img desde la función del evento onreadystatechange.

Por cierto, en vez de usar una función anónima sería más modular si creas una función y la pasas por referencia a onreadystatechange.

También dale un vistazo a otras formas de instanciar tu objeto XMLHttpRequest, en especial la que utiliza try/catch y comprueba la existencia de Msxml2.XMLHTTP, que es una librería más actual que Microsoft.XMLHTTP.

mdk · #4 (**permalink**) 03/02/2007, 12:09

Cita:

Iniciado por MarioNunes

Que guarrada de código ^_^

Con prototype haces menos lineas y es más fácil de entender:

échale un vistazo

http://www.prototypejs.org/

Un saludo.

Yo tb estoy intentando aprender ajax, en ke te ayudan esactamente esas libreria y ke aplicacion tienen?

ventanazul · #5 (**permalink**) 03/02/2007, 16:57

En el enlace al sitio de Prototype podrás ver en que te ayuda y como se usa pero el gran resumen es que permite abstraer muchas funcionies y líneas de código en un API mucho más fácil de usar.

Ahora, si quieres aprender Ajax lo primero es usar simplemente Javascript "puro" para entender bien los conceptos, una vez que manejas eso podrás escoger la libreria que prefieras.

MarioNunes · #6 (**permalink**) 06/02/2007, 02:37

Atención que lo de guarrada de código no lo decía con ánimos de ofender.

Para mi JavaScript en general es una guarrada... pocas herramientas para debugear en comparación con el resto de lenguajes... total, que con prototype es la libreria con la que trabajo aunque ya lo he hecho a pelo...

Solo le he recomendado la libreria por su sencillez de uso, el concepto seguro que lo entiende, nadie se mete en ajax sin entender el concepto porque si no no es capaz de desarrollar nada claro...

Un saludo.