Aprendiendo a entender AJAX

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 'contenedor', después creamos un nuevo objeto ajax, luego es cargar el archivo html por el método GET y lo importante aquí es qué hacer cuando se cargue, esto es onreadystatechange.
Readystate 4 significa que ya acabó de cargarlo, 1, 2 y 3 es el progreso y realmente no nos importa.
Finalente el método send es realizar la acción y llamar la función en el window.onload.
Veamos el ejemplo.
Sencillo, no?

Segundo ejemplo; Envío de datos por el método GET
Lo siguiente es enviar pequeñas cantidades de datos, por ejemplo de un input text con límite a 255 caracteres, esto lo haremos por el método GET. Utilizaremos también la función crearAjax y modificaremos un poco cargarContenido.
La idea es meter un formulario, saber los valores de los input que incluye el formulario y enviarla a php. El código modificado de cargarContenido sería:

function cargarContenido(){
var t1, t2, contenedor;
contenedor = document.getElementById('contenedor');
t1 = document.getElementById('texto1').value;
t2 = document.getElementById('texto2').value;
ajax=nuevoAjax();
ajax.open("GET", "ejemploajax2.php?t1="+t1+"&t2="+t2,true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.send(null)
}

El archivo php sólo contiene este código

<?
echo "Datos en GET: <pre>";
print_r($_GET);
echo "</pre>";

echo "Datos en POST: <pre>";
print_r($_POST);
echo "</pre>";
?>

Ahora sí, veamos el ejemplo.

Tercer ejemplo; Envío de datos por el método POST
Por último y para terminar, enviar datos por el método post. Habrá que cambiar algunas cosas en la función cargarContenido:
Debemos agregar una línea adicional: setRequestHeader especifica qué tipo de datos llegarán al servidor.
Asímismo especificamos el método en el método open y ahora sí utilizaremos parámetros para send.
La función quedaría de la siguiente manera

function cargarContenido(){
var t1, t2, contenedor;
contenedor = document.getElementById('contenedor');
t1 = document.getElementById('texto1').value;
t2 = document.getElementById('texto2').value;
ajax=nuevoAjax();
ajax.open("POST", "ejemploajax2.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("t1="+t1+"&t2="+t2)
}

Usaremos el mismo php, veamos el ejemplo funcionando

Notas adicionales

* Por algún extraño motivo, el objeto que es usado una vez ya no se puede usar otra vez. Por eso en la función cargarContenido siempre se llama a la función para crear un nuevo objeto ajax. Si no entienden de qué hablo, creen el objeto fuera de la función y verán cómo sólo funciona una vez
* Enviar y recibir datos con acentos/símbolos extraños es un dolor de cabeza. Básicamente, en php es la utilización de utf8_decode cuando se reciben y de utf8_encode cuando se envían.

Usuarios que han visto este tema también han visto...

- Anatomía de una Página Web
- Tips para el correcto Diseño Web
- Qué conexión a Internet contratar
- Ideas para conseguir enlaces
- Evaluación heurística por expertos

- Versión imprimible de este documento

- Enviar por e-mail este documento