Actualizar contenido de tabla/BD en un div

[3rn3st0]

Tengo una página cuyo layout contiene un header, un footer, una columna a la izquierda, otra a la derecha y en el medio de todo ese montón de CSS está un <div> donde se muestra el contenido principal de la página. En la columna izquierda dispongo de un menú que se forma de información contenida en una BD.

Deseo hacer lo siguiente, pero no tengo idea de cómo empezar:
1. Al hacer clic en las opciones del menú de la columna izquierda, se deberá ejecutar un SELECT SQL el cual a su vez recreará otro menú que deberá mostrarse en el <div> principal. ¿Qué debo ejecutar desde cada clic de esos elementos de menú si están formados por etiquetas <a></a>?
2. Una vez conseguido lo primero (que se ejecute un SELECT SQL desde un <a></a>, ¿cómo muestro los resultados en el <div> principal usando AJAX?

Los ejemplos que he visto en muchas partes, hacen que el contenido se actualice de manera automática, sin embargo en este caso se requiere la participación del usuario, puesto que siempre deberá primero hacer clic en el elemento <a></a> antes de que se ejecute la consulta.

De antemano agradezco a todos la ayuda que puedan prestarme.

PD: Si el caso fuera que no se requiere AJAX, pues no hay problema, en todo caso quiero saber como ubicar el contenido de la consulta en el <div> que he mencionado.

[GatorV]

Hola 3rn3st0,

Toda petición en AJAX requiere que el usuario haga algo, como en tu caso hacer un click.

Te recomiendo usar la librería prototype, y usar el Ajax.Updater para actualizar cierta parte de tu pagina sin problemas.

Saludos.

[ramzax200]

Primero tu script en la parte superior del codigo:

Código HTML:

<script type="text/javascript">
function getXHR() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}
function cargar_contenido(q) {//con la variable q envias lo que quieras consultar
	randomnumber=Math.floor(Math.random()*11111)
	var url = "la_url_a_cargar.php?random="+randomnumber+"&q=" + q;
	var request = getXHR();
	var processRequest = function() {
		if (request.readyState == 4) {
			if (request.status == 200) {
				document.getElementById("div_central").innerHTML = request.responseText;			
			}
			else {
				document.getElementById("div_central").innerHTML = "no se cargo el archivo";
			}
		}
	};
	request.onreadystatechange = processRequest;
	request.open("GET", url, true);
	request.send("");
}
</script> 

Y para recargar el div "div_central" es con el siguiente link:

Código HTML:

<a href="javascript:cargar_contenido('portada');">Portada</a> 

Por cierto, el link puede estar en tu menu izquierdo e incluso dentro del mismo "div_central" en el contenido cargado, de igual manera va a funcionar.