Hola gente! tengo un problemita que creo es bastante chico!. Al usar Ajax para cargar un .html dentro de un DIV, generalmente tengo que presionar 2 veces sobre el link para que lo cargue o a veces ni si quiera lo carga por mas clic que haga. Este es el codigo:

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX - Cargar páginas con AJAX</title>
<script type="text/javascript">
function ajaxFunction() {
  var xmlHttp;
  
  try {
   
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
  } catch (e) {
    
    try {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
    } catch (e) {
      
     try {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
      } catch (e) {
        alert("Tu navegador no soporta AJAX!");
        return false;
      }}}
}




function Enviar(_pagina,capa) {
    var ajax;
    ajax = ajaxFunction();
    ajax.open("POST", _pagina, true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    ajax.onreadystatechange = function() {
      if (ajax.readyState==1){
         document.getElementById(capa).innerHTML = " Aguarde por favor...";
              }
      if (ajax.readyState == 4) {
         
                document.getElementById(capa).innerHTML=ajax.responseText; 
           }}
          
   ajax.send(null);
} 



</script>
<style type="text/css">
img{border:none;}
a{color:#000; text-decoration:none;}
a:hover{text-decoration:underline;}
body{background:#fff;
font:14px Arial, Helvetica, sans-serif;
margin:0;}

#contenedor{width:950px;
margin: 0px auto;
overflow:hidden;
}
#loading{
 text-align:center; 
background:#6CBF19; 
color:#000; 
width:30%;
margin:0px auto;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;

}
#loading2{
 text-align:center; 
background:#000000; 
color:#fff; 
width:30%;
margin:0px auto;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;

}
#contenido{
float:right;
padding:5px;
width:750px;
background:#F2F2F2;
}
#enlaces{float:left;}
#encabezado{
background:#999;
list-style:none;
  font-size:14px;
  text-align:center;
   color:#fff;
   }
ul{
margin-top:-10px;
width:150px;
padding:10px;
list-style:none;
} 
  
li{
padding:2px;
margin:3px 0px;
width:150px;
border:1px solid #000000;
}
li:hover{background:#EFFCE0;}

span.test { direction: rtl; unicode-bidi:bidi-override; } 

li:first-child{
font:bold 15px Geneva,Georgia;
color:#CCCCCC;
background:#666666;
text-transform:uppercase;
}


</style>
</head>

<body>
<div id="contenedor">
            <div id="encabezado">
            <h1>AJAX: Cargar páginas con AJAX</h1>
  </div>
            
  <ul id="enlaces">
<a href="javascript:Enviar('bio.html','contenido')" title="Mi Biografía">Mi Biografía</a>
            <li><a href="javascript:Enviar('blog.html','contenido')" title="Mi Blog">Mi Blog</a></li>
            <li><a href="javascript:Enviar('fotos.html','contenido')" title="Mis Fotos">Mis fotos</a></li>
             <li><a href="javascript:Enviar('pdf.html','contenido')" title="Mis Fotos">PDF</a></li>
            </ul>
          
            <div id="contenido">
              <p><em><strong>INFORMACIÓN:</strong></em></p>
              <p>Ejemplo realizado por: <a href="http://guedea.blogspot.com">Héctor Guedea</a></p>
              <p><span class="test">moc.liamg@aedeugrotceh</span></p>
              <p>Post: <em>&quot;Cargar páginas con PHP y AJAX</em>&quot; en el blog personal <em><strong><a href="http://guedea.blogspot.com">La Postura Inadecuada</a></strong></em></p>
  </div>

</div>

</body>
</html>


Gracias.