Recargar contenido con Ajax
En este artículo aprenderemos como recargar contenido de nuestra web utilizando Ajax y su objeto XMLHttpRequest. Para poder entender el código propuesto necesitáis tener una base de conocimiento de HTML y Javascript (y por que no, un lenguaje de servidor como php, asp, etc.) ya que Ajax no es un lenguaje de programación, sino una técnica que incluye los lenguajes mencionados.
El primer paso será crear el siguiente archivo html al que llamaremos “index.html”:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Recarga de contenido con Ajax</title>
<script src="ajax.js" language="javascript" type="text/javascript"> </script>
</head>
<body>
<div id="menu">
<a href="#" onclick="recargaContenido(‘A’)">Seccion A</a>
<a href="#" onclick="recargaContenido(‘B’)">Seccion B</a>
</div>
<div id="contenido"></div>
</body>
</html>
En él podemos ver que incluimos el archivo “ajax.js” el cual contiene el siguiente código:
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// codigo soportado por IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// código soportado por IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Tu navegador no soporta XMLHTTP!");
}
xmlhttp.onreadystatechange=function()
{
/* valores posibles de "xmlhttp.readyState"
0 La petición no ha sido inicializada
1 La petición ha sido creada
2 La petición ha sido enviada
3 La petición esta en proceso
4 La petición se ha completado
*/
if(xmlhttp.readyState==4)
{
document.getElementById(‘contenido’).innerHTML=xmlhttp.responseText;
document.getElementById(‘contenido’).style.backgroundColor = ‘#cccccc’;
}
}
xmlhttp.open("GET","contenido.php?seccion="+seccion,true);
xmlhttp.send(null);
}
En definitiva, cada vez que hagamos clic en alguno de los links definidos se llamará a la función “recargaContenido(x)” pasándole un valor “x” para que luego el script del lado del servidor, al que hemos llamado “contenido.php”, lo recoja y pueda seleccionar el contenido que debe devolver. Este script recoge el valor que se le envía y mediante un “switch()” selecciona el contenido y lo imprime. Esta manera de seleccionar el contenido no es más que un ejemplo básico y no debe tomarse como ejemplo de arquitectura web. Imaginaos que en vez de utilizar un switch() para escoger el contenido, hacemos una consulta a una base de datos o recogemos información de otros archivos. Hay un extenso número de posibilidades más allá de este ejemplo básico que solo tiene un fin educativo.
El script “contenido.php” posee el siguiente código:
if(isset($_GET[’seccion’]) && !empty($_GET[’seccion’])){
$seccion = $_GET[’seccion’];
switch($seccion){
case ‘A’:$contenido = ‘Este es el contenido de la sección A. AAAAAAAAAAAAAAAAAAAA’; break;
case ‘B’:$contenido = ‘Este es el contenido de la sección B. BBBBBBBBBBBBBBBBBBBB’; break;
default:$contenido = ”; break;
}
echo $contenido;
}
Qué grande el tutorial maestro!!
Excelente recurso amigo.!