AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo web que permite comunicar el navegador del usuario con el servidor en segundo plano, es decir se pueden hacer cambios sobre la misma página sin necesidad de recargarla.
El Objeto XMLHttpRequest
XMLHttpRequest es el objeto primario que nos permitirá la comunicación con el servidor de forma asíncrona, originalmente fue implementada para Internet Explorer y basada en un ActiveX y ahora los otros navegadores también la soportan.
Entonces lo primero es detectar el tipo de navegador y crear una instancia del objeto XMLHttpRequest para poder utilizarlo posteriormente, para ello implementamos la siguiente función en Javascript.
function createXMLHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
Métodos y Propiedades
El objeto XMLHttpRequest dispone de los siguientes métodos:
- send(content): permite enviar datos al servidor.
- abort(): termina o cancela la petición actual.
- getAllResponseHeaders(): devuelve todos los headers de respuesta a la petición HTTP como pares key/valor.
- getResponseHeader(«header»): devuelve una cadena con el valor del header especificado en «header».
- open(«method», «url»): permite realizar llamadas al servidor, el argumento del method puede ser GET, POST, o PUT.
- setRequestHeader(«header», «value»): define un header especifico al valor dado por open().
Además de ello las propiedades disponibles son las siguientes:
- onreadystatechange: detector de eventos para ejecutar una función cada vez que se detecta el cambio en el estado de la petición.
- readyState: es el estado de la petición. Se tienes cinco estados posibles: 0 (sin iniciar), 1 (cargando), 2 (cargado), 3 (interactuando), 4 (completo)
- responseText: respuesta del servidor como un cadena de texto.
- responseXML: respuesta del servidor como un XML.
- status: código de estado HTTP del servidor (200, 404, etc.)
- statusText: código de estado HTTP del servidor como texto (OK, Not Found, etc)
Ejemplo de Interacción
Sea que tenemos un campo de texto en donde un usuario ingresa su email, deseamos que nuestra página valide automáticamente si este email es correcto. Lo primero que hacemos es detectar que el usuario sale del campo de ingreso de email y un boton para llamar a una función Javascript que se encarga de verificar el email.
Validar Email con AJAX: <br> <input type="text" id="email" name="email"><br> <input type="button" id="bt" value="Send" onClick="validMail();">
El siguiente paso es crear la función validMail, el cual tomará en email ingresado lo enviará a un script llamado validate.php que devolverá si es o no valido.
var xmlHttp;
function validMail() {
var email = document.getElementById("email");
var url = "validate.php?email=" + escape(email.value);
xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = onCompleteData;
xmlHttp.send(null);
}
function onCompleteData() {
if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
}
}
Como se puede observar, creamos una instancia del objeto XMLHttpRequest utilizando la función creada anteriormente, luego procedemos a llamar al PHP utilizando el método GET para enviar los datos, luego cuando se detecta el cambio en el estado de la petición ejecutaremos la función onCompleteData, la cual la definimos posteriormente y se encarga de lanzar un alert con la respuesta del servidor.
Uniendo todos el código obtenemos nuestro ejemplo de AJAX funcionando y sin utilizar ninguna librería externa para ello:
<html>
<head>
<title>Ajax Demo - unijimpe</title>
<script language="JavaScript" type="text/javascript">
function createXMLHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
var xmlHttp;
function validMail() {
var email = document.getElementById("email");
var url = "validate.php?email=" + escape(email.value);
xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = onCompleteData;
xmlHttp.send(null);
}
function onCompleteData() {
if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
}
}
</script>
</head>
<body>
Validar Email con AJAX: <br>
<input type="text" id="email" name="email"><br>
<input type="button" id="bt" value="Send" onClick="validMail();">
</body>
</html>
Pueden ver el ejemplo funcionando en ajax-demo.html y como como siempre les dejamos los archivos fuente para que lo descarguen y hagan sus experimentos.
Comentarios Total 3 comentarios
Publicado: 02/01/2008 9:54 pm
buena forma de iniciarse en el ajax =D
me interesa mucho aprender pronto, es muy util para los proyectos que estoy realizando jeje
Publicado: 04/10/2008 6:13 am
El blog esta muy bueno y muy bien explicado este tema.
Publicado: 18/06/2010 10:01 pm
Hola me gustaría saber mas si alguien sabe de un foro o tiene ejemplos basicos de como iniciar en AJAX si me los pudieran mandar, estaría en deuda.
ufo@alien-systems.com.mx
Mil gracias y saludos.