Tema: cargar un div en la misma pagina
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 01/05/2011, 09:18
Avatar de angel2010
angel2010
 
Fecha de Ingreso: julio-2010
Ubicación: monagas
Mensajes: 131
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: cargar un div en la misma pagina
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>AJAX - Cargar páginas con AJAX</title>
  6. <script type="text/javascript">
  7. function ajaxFunction() {
  8.   var xmlHttp;
  9.   
  10.   try {
  11.    
  12.     xmlHttp=new XMLHttpRequest();
  13.     return xmlHttp;
  14.   } catch (e) {
  15.     
  16.     try {
  17.       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  18.       return xmlHttp;
  19.     } catch (e) {
  20.       
  21.       try {
  22.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  23.         return xmlHttp;
  24.       } catch (e) {
  25.         alert("Tu navegador no soporta AJAX!");
  26.         return false;
  27.       }}}
  28. }
  29.  
  30.  
  31.  
  32.  
  33. function Enviar(_pagina,capa) {
  34.     var ajax;
  35.     ajax = ajaxFunction();
  36.     ajax.open("POST", _pagina, true);
  37.     ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  38.  
  39.     ajax.onreadystatechange = function() {
  40.         if (ajax.readyState==1){
  41.             document.getElementById(capa).innerHTML = " Aguarde por favor...";
  42.                  }
  43.         if (ajax.readyState == 4) {
  44.            
  45.                 document.getElementById(capa).innerHTML=ajax.responseText; 
  46.              }}
  47.              
  48.     ajax.send(null);
  49. } 
  50.  
  51.  
  52.  
  53. </script>
  54. </head>
  55.  
  56. <body>
  57. <div id="contenedor">
  58.             <div id="encabezado">
  59.             <h1>AJAX: Cargar páginas con AJAX</h1>
  60.   </div>
  61.             
  62.   <ul id="enlaces">
  63.             <li>enlaces</li>
  64.             <li><a href="javascript:Enviar('bio.html','contenido')" title="Mi Biografía">Mi Biografía</a></li>
  65.             <li><a href="javascript:Enviar('blog.html','contenido')" title="Mi Blog">Mi Blog</a></li>
  66.             <li><a href="javascript:Enviar('fotos.html','contenido')" title="Mis Fotos">Mis fotos</a></li>
  67.               <li><a href="javascript:Enviar('pdf.html','contenido')" title="Mis Fotos">PDF</a></li>
  68.             </ul>
  69.           
  70.             <div id="contenido">
  71.               <p><em><strong>INFORMACIÓN:</strong></em></p>
  72.               <p>Ejemplo realizado por: <a href="http://guedea.blogspot.com">Héctor Guedea</a></p>
  73.               <p><span class="test">moc.liamg@aedeugrotceh</span></p>
  74.               <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>
  75.   </div>
  76.  
  77. </div>
  78.  
  79. </body>
  80. </html>


donde estan los enlaces como por ejemplo <li><a href="javascript:Enviar('bio.html','contenido')" title="Mi Biografía">Mi Biografía</a></li> bio.html a lado dice contenido ese el div id="contenido haci de facil es" llama a otra pagina tanto html como php si no entiendes me dices