Ver Mensaje Individual
  #9 (permalink)  
Antiguo 27/03/2007, 02:44
Avatar de kennyhp
kennyhp
 
Fecha de Ingreso: julio-2006
Mensajes: 370
Antigüedad: 18 años, 4 meses
Puntos: 5
Re: Caja estilo yahoo

Creo que tu duda es sobre todo de concepto, en realidad AJAX no es mas que una metodologia o forma de usar javascript, usando un objeto concreto que te permite crear una comunicación asíncrona, a la vez que te permite actualizar sin tener que recargar toda la página, te voy a poner un ejemplo de algo como lo que quieres conseguir para ver si así lo entiendes mejor, pero creo que la mejor manera de aprender es mirando tutoriales y haciendo muchas pruebas.

principal.php // pagina principal donde se mostrarian lo que quieres hacer.
Código HTML:
<html>
<head>
<title>Pruebas Ajax</title>
// el fichero donde crearemos la chica del AJAX
<script language="javascript" type="text/javascript" src="ajax.js"></script> 
// el fichero donde crearemos la chica del AJAX
<body onLoad="return principal('datos.php','ventana');>
// creo una capa con el menú
<div id="menuvenatana" style="position:absolute; left:10px; top:20px; width:354px; height:25px; z-index:2">
  <a href="#" onclick="return principal('datos.php?ver=noticias','ventana');"> Noticias</a>
  <a href="#" onclick="return principal('datos.php?ver=analisis','ventana');"> Analisis</a> 
  <a href="#" onclick="return principal('datos.php?ver=avances','ventana');"> Avances</a>
 </div>

// Creo un Div donde cargare los datos, fijate que se llama ventana
<div id="ventana" style="position:absolute; left:11px; top:46px; width:339px; height:135px; z-index:2"></div>
</body>
</html> 
Ahora creamos el fichero Javascript donde crearemos el objeto AJAX, este no lo comentare por que lo mejor es que lo mires en las FAQS, hay paginas donde lo explican muy bien.

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);
		}
	
}
Y por último la pagina que hace las consultas que se llamara...

datos.php

Código PHP:
<?php 
include "/includes/conexion.php";  // la conexión a la base de datos
if(!isset($ver)) $ver=noticias// mostrara por defecto las 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;
    case 
'analisis':
    echo 
"Lo mismo que noticias pero consulta a analisis";
        break;
    case 
'avances':
    echo 
"Idem que los anteriores";
        break;
    
}

?>

Y con esto creas un efecto parecido a lo de Yahoo, ahora hay que ponerlo bonito y tal, te recomiendo que mires la parte de AJAX y que con este ejemplo te quede un poco mas claro como funciona y que tirando de las FAQS y google puedas entenderlo.
Saludos!