Links en AJAX

kennyhp · #1 (**permalink**) 01/03/2007, 13:09

Hola, estoy dando mis primeros pasos en Ajax, consigo cargar bien datos en mi pagina principal, pero me encuentro con un problema, los datos que muestro tienen links, que mostrarian otros datos, pero quiero que al darle al link se muestre en la misma capa, ahora al hacer link pues me va a la pagina a la que linco. Quiero conseguir un efecto parecido a este:

www.gamespot.com (el cuadro central que muestra informacion, ellos lo tienen en flash, pero yo quiero hacer algo parecido en AJAX)

Ahora tengo esto:

index.php:

Código HTML:

<script language="javascript" type="text/javascript" src="js/ajax.js"></script>
<body onLoad="return principal('ventana.php','ventana');">
<div id="ventana" style="position:absolute; left:93px; top:127px; width:341px; height:141px; z-index:2"></div>

ventana.php:

Código PHP:

  <?php  
include "./includes/conexion.php";  
conectar(); 
?> 
 
<?php 
if(!isset($ver)) $ver=noticias; 
 
switch($ver) 
{ 
    case 'noticias': 
    $noticias=mysql_query("SELECT titulo FROM noticias WHERE '1'"); 
        while($row = mysql_fetch_array($noticias)) 
        { 
            $titulo=$row['titulo']; 
            print("$titulo<br>"); 
        } 
    break; 
} 
 
?> 
<div align="left"></div> 
<div align="left"></div> 
</div>     
<div id="Layer3" style="position:absolute; left:334px; top:16px; width:107px; height:204px; z-index:2"> 
  <p class="style1"><a href="ventana.php?ver=noticias">Noticias</a></p> 
  <p class="style1"><a href="ventana.php?ver=analisis">Analisis</a></p> 
  <p class="style1"><a href="ventana.php?ver=avances">Avances</a></p> 
  <p class="style1"><a href="ventana.php?ver=articulos">Articlulos</a></p> 
</div> 
</div>

Los links de arriba tendrian que hacer que se mostrara una cosa u otra...

ajax.js:

Código:

function principal(pagina,divID)
{
	var XMLHttpRequestObject = false;
	if (window.XMLHttpRequest) {
	XMLHttpRequestObject = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
	}	
	if(XMLHttpRequestObject)
		{
			var mostrar = document.getElementById(divID);
			XMLHttpRequestObject.open("GET", pagina, true);
			XMLHttpRequestObject.onreadystatechange = function()
			{
				if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) 
				{
					mostrar.innerHTML = XMLHttpRequestObject.responseText;
				}
			}
		
	   XMLHttpRequestObject.send(null);
		}

	
}

Gurrutello · #2 (**permalink**) 01/03/2007, 21:19

holla prueba
<a href="#" onclick="return principal('ventana.php?ver=noticias','ventana');"> Noticias</a>
saludos

kennyhp · #3 (**permalink**) 02/03/2007, 07:24

Perfecto! justo lo que necesitaba, gracias.
Ahora ya comprendo un poco mejor como funciona AJAX, hay que llamar a la funcion en vez de hacer un link directo