Cargar páginas con PHP y AJAX

Se han preguntado ¿Cómo cargar una página dentro de un DIV sin recargar todo el sitio?

Por ejemplo:
Tienen un menu vertical y otro horizontal, y entre ellos se encuentra el contenido del sitio, y es en donde quieres cargar nuevo contenido con los enlaces de los menus.

1. Ya sea que el código de AJAX, lo guardes en un archivo .JS, o lo pongas en el HEAD de tu sitio, es lo mismo, a mi gusto, prefiero guardarlo en un archivo .js, y mandarlo llamar desde mi head, por ejemplo, el nombre de mi archivo se llama AJAX.JS, y esta dentro de la carpeta JS:


2. Crearemos el objeto AJAX (XMLHttpRequest) de multi-navegador, para que tanto pueda trabajar con FireFox Mozilla, Safari, Internet Explorer, etc. nuestra llamada asíncrona.

function ajaxFunction() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
// Internet Explorer
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;
}}}
}

3. Ya creado el objeto de AJAX, vamos a crear una función para mandar llamar nuestra página de manera asíncrona:

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 == 4)
{
document.getElementById(capa).innerHTML =
ajax.responseText;

}}
ajax.send(null);
}

4. Si notan, el enlace debe contener los parametros de PAGINA y CAPA, me refiero a la página que se va abrir en el DIV, y la CAPA es el DIV en donde se va cargar la página del enlace, en nuestro caso se llama "contenido". Quedando de esta manera cualquiera de los menus:

Las páginas a cargar dentro del div, no deben de llemar etiquetas HTML, HEAD, TITLE. por ejemplo (esta página se llamaria pagina-a-cargar.php):

<fieldset><legend>Pagina cargada con ajax </legend><br /><p>Pues bien, aqui les demuestro lo facil que es ajax, para cargar páginas en ciertas secciones de nuestro sitio web</p></fieldset>

Un punto importante es, que en nuestra página principal (donde se encuentren los links, ejemplo Index.php, de la figura que he puesto al principio) tengamos nuestro DIV llamado contenido dentro de las etiquetas BODY:

<!-- HEADER :: AQUI ESTARIAN LOS ENLACES DEL MENU --><br /><div id="contenido"></div><br /><!-- FOOTER :: AUTOR DEL SITIO -->

Y listo!, ya tienen como llamar de manera asíncrona una página!...

ACTUALIZACIÓN 26/junio/2009: Quite el status==200, por alguna razón firefox, no toma el valor de status, y simplemente trabaja con readyState.

ACTUALIZACIÓN 02/febrero/2011: Ahora ya pueden cargar archivos PDF con AJAX. Antes recuerden que AJAX solo lee XML, por lo que se realizó lo siguiente:

- Se creó un archivo llamado pdf.html, el cual contiene lo siguiente:

<object data="twitter.pdf" type="application/pdf" width="750" height="600">
alt : <a href="twitter.pdf">twitter.pdf</a>
</object>

De tal forma que, se agrega el object junto con el nombre del archivo.

- Se agregó el botón PDF en el menú, con el código exactamente igual que las opciones anteriores, lo único es que se cambia el nombre de la página.

Lamentablemente tengo los archivos en un servidor donde no acepta PHP, pero pueden cambiar el valor del nombre del archivo PDF. Lean mi post Enviar valores con AJAX y recibirlos con REQUEST o POST (PHP) . Después de la explicación, verán que es posible agregar variables y recibir sus valores con AJAX.

VER EJEMPLO / DEMO >>>

DESCARGAR ARCHIVOS >>>