Desde que Gmail apareció, ha cambiado la forma de ver la web. Hoy sabemos que podemos hacer un sitio completo sin la necesidad de recargar la página y sólo cargando las partes que requerimos. La tecnología usada es el XMLHTTPREQUEST, bautizada recientemente con el nombre de AJAX. A manera de ejercicio veremos primero cómo cargar contenido, después cómo interactuar con php y mandar pequeñas porciones de información y finalmente cómo enviar información más grande.

Creando el objeto XMLHTTPREQUEST

Hacer una función genérica es la mejor idea para este modelo. A base de try y catch podemos hacer una función cross-browser:
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;
}

Primer ejemplo; Cargar datos externos.

 La función de cargar contenido la definiremos de la siguiente forma:
function cargarContenido(){
	var contenedor;
	contenedor = document.getElementById('contenedor');
	ajax=nuevoAjax();
	ajax.open("GET", "ejemploajax1.html",true);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			contenedor.innerHTML = ajax.responseText
}
}
	 ajax.send(null)
}
window.onload= function(){cargarContenido()}
Hay varias cosas qué checar aquí, primero obtenemos el elemento que tenga como id