Ajax basico

Este ejemplo sencillo muestra como utilizar ajax para visualizar contenido desde otros archivos html o php. El archivo js ocupa tan solo 1 Kb.

JAVASCRIPT code

function objetoAjax(){
	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;
}

function sendDatos(datos, resultado,borrar){	
	divResultado = document.getElementById(resultado);			
	if(divResultado.innerHTML=='' || borrar){
		ajax = objetoAjax();
		if(datos!=""){
			divResultado.innerHTML = "<span class='loading'>Loading...</span>";		
			ajax.open("GET", datos);
			ajax.onreadystatechange=function() {
				if (ajax.readyState==4) {
					divResultado.innerHTML = ajax.responseText
				}
			}
			ajax.send(null);
		}else divResultado.innerHTML ="";
	}
}

Analizando el js

La primera función devuelve un objeto para ajax soporta tanto IE como la familia Mozilla, Safari, Opera, etc.

La segunda función abre y carga los datos del archivo pasado por parametro ("datos") y los inserta en el elemento html indicado por parámetro ("resultado"). El tercer parámetro de la función solo sirve para recargar los datos.

HTML code

<a href="javascript:sendDatos('archivo.html','resultado1',true);">ver ejemplo</a>
<div id="resultado1" ></div>

Analizando el html

En la primera linea llama a la función sendDatos() con los siguientes parámetros:

1- El nombre del archivo html/php o ruta completa o relativa de donde se encuentra, recordar que los archivos externos como imágenes no funcionaran si se colocan en directorios diferentes

2- nombre del identificador del elemento html (div o span)

3- El último valor es un booleano que indica si se debe refrescar la información más de una vez

Ejemplo

ver ejemplo