"Atras y Adelante" con Ajax

[chilenozzz]

Gracias por tu respuesta.

Pero por ejemplo, ¿cómo lo hace Gmail para que los botones "atrás" y "adelante" funcionen a pesar de no cambiar su URL?

Con respecto a la usabilidad, en lo personal creo que sí tiene que ver porque estaría quitando el control que tiene el usuario sobre estos botones, además si agrego botones atrás y adelante en mi aplicación sería algo redundante (pienso yo).

Aqui les dejo cómo llamo a las páginas, a ver si me pueden echar una manito para que los botones atrás y adelante del navegador funcionen como siempre:


Este onclick lo pongo dentro de un HREF:

Código:

onClick="FAjax ('inicio.php?<?=sid?>','div_centro','','post')";

Y el <DIV> donde se va cambiando la página según se escoja en el menú:

Código HTML:

<div id="div_centro"></div> 

Función AJAX (la típica):

Código:

function creaAjax() {
         var objetoAjax=false;
         try {
          /*Para navegadores distintos a Internet Explorer*/
          objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
         } 
		 catch (e) {
		  try {
			   /*Para Internet Explorer*/
			   objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
		  }
		  catch (E) {
			objetoAjax = false;
		  }
         }

         if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
          objetoAjax = new XMLHttpRequest();
         }
         return objetoAjax;
}

function FAjax (url,capa,valores,metodo) {

        var ajax=creaAjax();
        var capaContenedora = document.getElementById(capa);
		
		/* variable para almacenar el mensaje que se muestra mietras ajax carga una página*/
		var cargando  = "<table border='0' align='center' cellpadding='0' cellspacing='0'>";
			cargando += "<tr><td>&nbsp;</td></tr>";
			cargando += "<tr><td align='center'>";
			cargando += "<img src='images/loading.gif' alt=''>";
			cargando += "</td></tr>";
			cargando += "<tr><td align='center'>";
			cargando += "<font face='verdana' size='1' color='#333333'>";
			cargando += "Cargando...";
			cargando += "</font>";
			cargando += "</td></tr>";
			cargando += "</table>";

		/*Crea y ejecuta la instancia si el metodo elegido es POST*/
		if(metodo.toUpperCase()=='POST'){
			 ajax.open ('POST', url, true);
			 ajax.onreadystatechange = function() {
				 if (ajax.readyState==1) {
					capaContenedora.innerHTML = cargando;
				 }
				 else if (ajax.readyState==4) {
						   if(ajax.status==200) {
								document.getElementById(capa).innerHTML=ajax.responseText;
						   }
						   else if(ajax.status==404) {
							capaContenedora.innerHTML = "<center>La direcci&oacute;n no existe</center>";
						   }
						   else {
							capaContenedora.innerHTML = "Error: ".ajax.status;
						   }
				}
	   		 }
	   		 ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		     ajax.send(valores);
		     return;
		} 
		/*Crea y ejecuta la instancia si el metodo elegido es GET*/
		if (metodo.toUpperCase()=='GET'){
		
				 ajax.open ('GET', url, true);
				 ajax.onreadystatechange = function() {
				 if (ajax.readyState==1) {
					capaContenedora.innerHTML = cargando;
				 }
				 else if (ajax.readyState==4){
						   if(ajax.status==200){
							 document.getElementById(capa).innerHTML=ajax.responseText;
						   }
						   else if(ajax.status==404)
													 {
		
									capaContenedora.innerHTML = "<center>La direcci&oacute;n no existe</center>";
													 }
													 else
													 {
									capaContenedora.innerHTML = "Error: ".ajax.status;
													 }
											}
						  }
				 ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				 ajax.send(null);
				 return
		}
}