Includes Dinamico con PHP y AJAX

>> //seccion/ajax/ -- 23 comentario /// Agregado el 2005-10-28 @ Por kaioken

Bueno todo sabemos el famoso include dinamico donde enviando un parametro por el url, incluimos un archivos en la pagina PHP, de esta manera cambiando el contendio. Pero que tal si ahora lo hacemos con AJAX?

Bueno todo sabemos el famoso include dinamico donde enviando un parametro por el url, incluimos un archivos en la pagina PHP, de esta manera cambiando el contendio. Pero que tal si ahora lo hacemos con AJAX?

El include dinamico normal con PHP es efectivo por:
1- Simplicidad para los Webmasters, ya que no tienen que repetir el diseño sino llevan una simple estructura y cambian por contenido
2- Página menos cargada

Ahora, que mejor manera de sacarle provecho a AJAX que hacer un include dinamico de PHP, de esta manera la pagina no hacer refresh sino la zona que lleva el contenido o include hara el cambio. Empezemos

PHP


Lo primero que haces es crear nuestro archivo PHP que lleva el include. De esta manera cuando el archivo corra nos trae el contenido y con el actualizamos la zona dinamica de la página.

include.php Codigo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <?php

$pagina = addslashes((string) $_GET['variable']);

if(!isset($pagina))
{
    include('main.php');
} 
else if ((string) $pagina && is_string($pagina))
{
 if(file_exists('.$page.'.php'))
 {
       include('.$page.'.php');
 } 
 else 
 {
       die("que paso bitch");
 } 
}

?>


hola.php Codigo:
1
2
3
4
5
6
7
 <?php
hola como tut a bien bien

<?
//simplemente soy el archivo que se va incluir

?>


JavaScript


Bueno ahora la parte de AJAX, utilizaremos la libreria XHConn.js de la cual ya he comentado anteriormente, de esta forma nos sale mas facil hacer el script.

Lo unico que debemos hacer es agregar este codigo:
Code:

 <script type="text/javascript" language="javascript" src="XHConn.js"></script>
 <script>
 //inicializamos la libreria
 var myConn = new XHConn();
 
 //si no existe da error
 if (!myConn) alert("XMLHTTP no disponible. Intenta un mejor browser.");
 
 //funcion que se llama luego del include
 var include_terminado = function (oXML) { document.getElementById('include').innerHTML = oXML.responseText; };
 
 //funcion que hace el include
 function include_dinamico (url)
 {
  //que hace mientras esta corriendo el script, pone una imagen de loading
  document.getElementById('include').innerHTML = "<img src='loading_ani2.gif' />";
 
  //AJAX, llamo a la pagina y le mando los parametros
  myConn.connect("include.php", "GET", "variable="+url, include_terminado);
 }
 </script>
 


Uniendo Todo


Ahora tenemos nuestro script de PHP y nuestra funcion de AJAX, ¿Que nos Falta? Bueno ya es simple, es solo unirlo todo.

el archivo index.php o index.htm Code:

 <html>
 <head>
 <script type="text/javascript" language="javascript" src="XHConn.js"></script>
 <script>
 //inicializamos la libreria
 var myConn = new XHConn();
 
 //si no existe da error
 if (!myConn) alert("XMLHTTP no disponible. Intenta un mejor browser.");
 
 //funcion que se llama luego del include
 var include_terminado = function (oXML) { document.getElementById('include').innerHTML = oXML.responseText; };
 
 //funcion que hace el include
 function include_dinamico (url)
 {
  //que hace mientras esta corriendo el script, pone una imagen de loading
  document.getElementById('include').innerHTML = "<img src='loading_ani2.gif' />";
 
  //AJAX, llamo a la pagina y le mando los parametros
  myConn.connect("include.php", "GET", "variable="+url, include_terminado);
 }
 </script>
 </head>
 <body>
 Bueno esto es una prueba y lo k tu kieras <a href="#" onclick="include_dinamico('hola');">Link</a>
 
 <!-- Aki va el contenido k va a ser remplazado por AJAX -->
 <div id="include">
 Entraste a la pagina y aki es k va el include
 </div>
 </div>
 </body>
 </html>
 


*Nota: No influye si es un index.php o index.htm

Guardamos nuestro include.php en el mismo folder que esta nuestro index y la libreria de AJAX igual.

Con esto ya terminamos, espero que sea de ayuda cualquier consulta esta el foro y aqui les dejo todo para que los descargen.

Desventajas


Nada es perfecto, ¿que no tiene de perfecto? Aunque es funcional, impresionaria a los usuarios y es poco codigo tienes estas desventajas.

1- No Bookmarks: ya que el url no cambia sino que siempre se queda en index.php los usuarios no podran una pagina en la que se quedaron.

2- No Botton de Back: tus usuarios no podran hacer back, sino que debes tener un buen panel de navegación

3- Refresh vuelve al Inicio: si el usuario da refresh vuelve al inicio

MC | #permalink 23 comentario