Introducción a Ajax (III)

En artículos anteriores vimos cómo crear los métodos genéricos necesarios para crear cualquier aplicación Ajax y comprobamos que funcionaban. También vimos una breve descripción de las propiedades y métodos del objeto XMLHTTP, que es el objeto en el que se basan todas las aplicaciones Ajax.. Sólo con esto ya estamos en disposición de crear casi cualquier cosa que se nos ocurra utilizando esta tecnología.

En este artículo vamos a ver finalmente un ejemplo completo donde enviaremos los datos de un formulario al servidor mediante Ajax y mostraremos el resultado en la misma página.

¿En qué consiste el ejemplo?

Vamos a crear una calculadora en Ajax y para no complicarnos demasiado, la única operación que vamos a implementar de momento es la multiplicación. Enviaremos los datos del formulario por GET y en próximos artículos veremos cómo hacerlo a través de POST.

En el lado del servidor vamos a utilizar PHP para implementar un pequeño script que haga la operación de multiplicación y devuelva los datos.

Pues muy bien ¿y por dónde empezamos?

En primer lugar vamos a crear un documento html "ajax.htm". Entre las etiquetas head vamos a introducir las dos funciones en JavaScript genéricas que habíamos creado anteriormente para hacer llamadas Ajax.

<script type="text/javascript">
  function getXMLHTTP(){
    var obj = null;
    try {
      obj = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        obj = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e2) {
        obj = null;
      }
    }
    if (!obj && typeof XMLHttpRequest != "undefined") {
      obj = new XMLHttpRequest();
    }
    return obj;
  }
  
  function enviaPeticion(url,callback) {
    objAjax = getXMLHTTP();
    objAjax.open("GET",url,true);
    objAjax.onreadystatechange = function() {
      if (objAjax.readyState == 4) {
        callback(objAjax.responseText);
      }
    }
    objAjax.send(null);
  }
</script>

A continuación teneoms que crear el formulario dentro del cuerpo del documento. En principio sólo necesitaremos un par de cajas de texto para introducir los operandos y nos hará falta una etiqueta span a la que vamos a dar un identificador (‘res’) ya que va a ser el lugar donde coloquemos el resultado de la petición Ajax.

<body>
  <form>
    <input name="op1" size="3" /> * <input name="op2" size="3" /> = <span id="res"></span> 
    <div style="margin-top:10px"><a href="#" onclick="enviar()">Multiplicar</a></div>
  </form>  
</body>

Como se puede ver, no necesitamos un botón submit de formulario para enviar la petición. Vamos a usar en su lugar un enlace normal y corriente, para ser más fieles a la mentalidad Ajax, y utilizaremos el evento onclick para llamar a una función JavaScript que envíe la petición.

Ahora vamos a crear entonces la función enviar que habíamos llamado desde el evento onclick del enlace (como se ve en el ejemplo) y el callback que utilizaremos para manejar los resultados cuando los recibamos. Podemos colocar estas dos funciones JavaScript también dentro del bloque script que habíamos colocado entre las etiquetas head del documento.

function enviar() {
  var vop1 = document.forms[0].op1.value;
  var vop2 = document.forms[0].op2.value;
  enviaPeticion("ajaxphp.php?op1="+vop1+"&op2="+vop2,miCallback);
}

function miCallback(respuesta) {
  document.getElementById("res").innerHTML = respuesta;
}

Al recibir la respuesta, la función miCallback colocará el resultado dentro de la etiqueta span con id ‘res’ que habíamos colocado anteriormente en el cuerpo del documento.

Con esto ya tenemos lista la parte del cliente. Como se puede ver en el código de la función enviar, vamos a realizar la petición Ajax a un script PHP llamado "ajaxphp.php", así que vamos a crear dicho script. Es un script muy sencillo porque sólo multiplica los dos operandos que recibe por GET.

<?php
  echo $_GET["op1"] * $_GET["op2"];
?>

Colocamos los dos ficheros en el mismo directorio de nuestro servidor web y ya podemos empezar a multiplicar.

Nuestra puntuación
Twittear
Compartir
Compartir
Pin