Siguiendo con la publicación del tutorial sobre AJAX, mostraremos ahora un pequeño ejemplo introductorio. Mostraremos el código y luego explicaremos el código.

En resumen lo que haremos es hacer uso del objeto XMLHttpRequest, para consultas asíncronas para cargar contenidos sin refrescar la pagina.

Código

ejemplo1.html

<html>
<head>
<title>Ejemplo1</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function pedirDatos(fuenteDatos, divID){
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", fuenteDatos);
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Mostrando datos con AJAX</H1>
<form>
<input type = "button" value = "Mostrar mensaje" onclick = "pedirDatos('datos.txt','targetDiv')">
</form>
<div id="targetDiv" style="background-color:#99FF66;">
<p>Aquí aparecerá texto</p>
</div>
</body>
</html>

A continuación escribiremos en un archivo de texto la siguiente línea:

datos.txt

Este texto aparecio usando AJAX y sin un refresh a la pagina.

Explicación

En primer lugar creamos el objeto XMLHttpRequestObject para la petición de datos. Este objeto será creado dependiendo del navegador web, la primera parte del if es para la mayoría de navegadores y la parte del if else es para Internet Explorer.

Luego está la creación de una función pedirDatos que tiene como parametros fuenteDatos y divID. Está función, como su mismo nombre lo indica, será la encargada de hacer una petición de datos, a través del parámetro fuenteDatos al servidor. Y el resultado de la petición será mostrada en la variable divID , la cual es una capa de estilos que se mostrará en el html.

Como se aprecia la mayor parte del código interesante se centra en el Javascript. Así que empezaremos el tutorial con un rápido repaso de este lenguaje. Hasta el próximo artículo.

Dudas, preguntas, sugerencias por favor dejar sus comentarios.

Nota: El archivo datos.txt va en la directorio donde va ejemplo1.html.

Puedes ver el ejemplo en la sección ejemplos

Quizá te pueda interesar: CRUD con PHP, MySQL y jQuery.