AJAX con xmlhttp

Una de las formas de utilizar AJAX es con xmlhttp que sirve para realizar peticiones http o https.

AJAX sirve para pintar en tu web sin tener que hacer la petición al servidor, de esta forma te ira más rapida la web.

La explicación sencilla de que es lo que hace AJAX es simplemente poner datos en una determinada parte de la web sin recargarla.

Para ello el boton, link etc... que quieres que sea para que al pincharle cambie la parte deseada de tu web llamara a la función AJAX, la cual ara la petición para meter los datos dichos en la función en la parte de tu web que le has dicho.

Vamos a verlo que seguro que lo entendereis mejor

Primeramente debeis tener la función AJAX de xmlhttp la cual es esta y no se debe modificar:

function nuevoAjax()
{
var xmlhttp=false;
try
{
xmlhttp=new ActiveXObject"Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
xmlhttp=false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{
xmlhttp=new XMLHttpRequest();
}
return xmlhttp;
}

Ahora necesitamos 3 objetos:

1. El lugar de la web donde se pondran los datos pedidos por AJAX.
2. La función que ara que se pongan en el.
3. El link, boton etc... que llamara a la función anteriormente.

1. Por ejemplo en un div o un span etc...
<div id="contenido"></div>
2. En esta función hace que el contenido del archivo "principal.html" se pone en el elemento "contenido". Aquí se explicará todo su contenido y diversas formas de formarla:
http://dudasweb.blogspot.com/2009/06/funcion-ajax-con-xmlhttp-consciencia.html
function seccion(){
var capa=document.getElementById("contenido");
var ajax=nuevoAjax();
ajax.open("GET", "principal.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(null);
ajax.onreadystatechange=
function() {
if (ajax.readyState==4) {
capa.innerHTML=ajax.responseText;
}else{
capa.innerHTML="Cargando...";
}
}
}

3. Por ejemplo en un boton, span,link etc...
<span onclick="seccion()">Meter datos nuevos</span></