0

AJAX a pelo

A veces necesito usar AJAX para actualizar el contenido de un elemento pero no quiero usar ninguna de las bibliotecas en Javascript disponibles (como JQuery, Mootools, Prototype…). ¿Cómo hacerlo?

Primero tenemos que preparar el objeto que realizará la petición AJAX, que será diferente según el navegador que utilicemos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function preparaAjax() {
	var ajaxRequest; 
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				alert("Algo no salió bien...");
				return false;
			}
		}
	}	
	return ajaxRequest;
}

Ahora cada vez que necesitemos que una función use AJAX, podemos llamar a la función anterior para preparar el AJAX. Por ejemplo, vamos a actualizar el contenido de un div con id “contenedor” con el resultado de una llamada asíncrona a un archivo PHP.

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function updateElem (elemName) {
	var ajaxRequest = preparaAjax(); // llamada a la funcion anterior ;)
 
	// aqui preparamos una funcion que se ejecutara cuando la peticion se haya
	// completado (readyState == 4)
	ajaxRequest.onreadystatechange = function() {
		if (ajaxRequest.readyState == 4) {
			// solicitud completada, hacemos lo que queramos, por ejemplo:
			myElem = document.getElementById(divname);
			myElem.innerHTML = ajaxRequest.responseText;
		}
	}
 
	// y ahora enviamos la solicitud asincrona al PHP
	ajaxRequest.open("GET", "ejemplo.php", true);
	ajaxRequest.send(null);
}

Ahora en nuestro código podemos llamar a esta función con parámetro el id del elemento a modificar –en nuestro ejemplo, <div id=”contenedor”>, haríamos la llamada como updateElem(“contenedor”)–, y su contenido cambiará con lo que nos devuelva la llamada asíncrona al archivo “ejemplo.php”.

Está bien saber cómo funcionan las cosas, aunque ahora con la potencia y comodidad que nos da jQuery, Mootools o Prototype, podemos hacer todo lo anterior en una sóla línea.

Más información sobre el objeto XMLHttpRequest y sobre el método open en la web de la W3C.