Anteriormente les mostraba cómo crear un objeto de AJAX válido para diferentes navegadores. Ahora veremos la implementación con dos ejemplos básicos. Para realizar esto debemos contar con los siguientes tres archivos.
scriptAJAX.js:
function crearAjax(){
var objetoAjax=false;
if(navigator.appName=="Microsoft Internet Explorer")
objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
else
objetoAjax = new XMLHttpRequest();
return(objetoAjax);
}
}
function llamadaAJAX(metodo){
//Creamos nuestro objeto
var ajax=crearAjax();
//Preguntamos si es válido
if(ajax){
//Preguntamos si el método es POST
if(metodo == "post"){
//Llamada al archivo mediante POST
ajax.open("POST","archivo.php");
//Se cambian las cabeceras de nuestro objeto AJAX para poder enviar datos
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
/* Enviamos datos, si se quiere agregar más se debe colocar el símbolo ‘&’
al comienzo de cada nuevo dato */
ajax.send("valor='post'");
}
//Preguntamos si el método es GET
if(metodo == "get"){
/* Llamada al archivo mediante GET, en esta ocasión los datos son
enviados atraves de la URL, por lo que ya no es necesario cambiar
cabeceras ni enviar nada en el método ‘send()’ */
ajax.open("GET","archivo.php?valor=get");
ajax.send(null);
}
/* Con esta función controlamos los estados de nuestro objeto AJAX,
pueden ser estados 1,2,3,4,200,etc.. */
ajax.onreadystatechange = function(){
//Preguntamos si nuestro objeto se encuentra en el estado 4 (Cargado)
if(ajax.readyState==4){
// Dejamos la respuesta en una variable, de tipo nodo texto (DOM)
var respuesta = document.createTextNode(ajax.responseText);
//Obtenemos una referencia al div respuesta
var div = document.getElementById("resultado");
//Agregamos el nodo de texto al div
div.appendChild(respuesta);
}
}
}
}
}
index.html:
<html>
<head>
<title>Hola mundo AJAX!</title>
<!– Incorporamos el script a nuestra página –>
<script type="text/javascript" language="javascript" src="scriptAJAX.js"></script>
</head>
<body>
<input type="button" value="Llamada GET" onclick="llamadaAjax('get');" />
<br />
<input type="button" value="LLamada POST" onclick="llamadaAjax('post');" />
<br />
<div id="resultado" name="resultado"></div>
</body>
</html>
archivo.php:
<?php
// Preguntamos si llego una variable llamada ‘valor’ mediante POST
if(isset($_POST["valor"])){
// Enviamos mensaje para POST
echo "Hola mundo! por POST";
}
// Preguntamos si llego una variable llamada ‘valor’ mediante GET
if(isset($_GET["valor"])){
// Enviamos mensaje GET
echo "Hola mundo! por GET";
}
?>
?>
Espero haya quedado claro cómo utilizar los métodos POST y GET con AJAX.
Esteban Olate
eFunctions 