Bien para este primer ejemplo he contado con la ayuda de este tutorial ‘Aprendiendo a entender AJAX’ y en cierto modo ha sido un ‘look and write’.

Lo primero que debemos de hacer es crear el objeto XMLHTTPREQUEST con JavaScript:

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;
}

El código creo que se explica solo. Solo reseñar los try & catch para el control de excepciones. Se intenta crear un objeto ActiveX ‘Msxml2.XMLHTTP’, si no lo consigue intenta crear otro objeto ActiveX, pero esta vez ‘Microsoft.XMLHTTP’ y si tampoco lo logra devuelve un valor falso. [No se pudo crear el objeto].

Lo segundo sería crear una función que se encargue de recoger los datos del formulario, crear una instancia del objeto XMLHTTPREQUEST, pasarle los datos, que este se los envie al PHP para que procese la información y devuelva al HTML de nuevo el resultado emitido por el PHP. [Funcionamiento basico del AJAX]

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", "ejemploAjax.php",true);
   ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   ajax.send("t1="+t1+"&t2="+t2);
   ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
         contenedor.innerHTML = ajax.responseText
      }
   }
}

Se han definido 3 variables que van a hacer referencia al ‘div’ contenedor de nuestro HTML y a los valores de los cuadros de texto del formulario.

Se crea la nueva instancia del objeto ‘nuevoAjax();’. Utilizamos el método open para indicarle el método por el que se le pasan los datos (POST),la url a la que se mandan los datos (ejemploAjax.php), y si se cargan los datos de forma asíncrona (TRUE).

Enviamos los datos, usando para ello el método send. Lo que le enviamos es una cadena concatenada. Para hacernos una idea, es lo mismo que le mandaríamos si usaramos GET como método de envío y le pasaramos los parámetros al PHP por la URL.

Tras esto comprobamos si el estado del objeto es igual a 4 (que corresponde a que se ha enviado) y si se cumple que es cierto, vuelca en el ‘div’ contenedor los datos recibidos por el objeto ajax.

Bien, ya hemos visto como se comporta el JavaScript, nos queda ver qué tenemos en nuestro archivo php.

$t1 = $_REQUEST['t1'];
$t2 = $_REQUEST['t2'];

echo 'Los datos recibidos son:‘;
echo $t1.’-’.$t2;

Comentamos brevemente, en las variables $t1, $t2 se guardan los valores de las variables t1, t2 recibidas. [Hemos optado por $_REQUEST ya que nos va a leer los datos independientemente si éstos han sido enviados por GET o por POST].
Hacemos un echo para printear los valores recibidos. [Esto es la salida del PHP, que en este caso muestra un mensaje y los valores recibidos; pero perfectamente podía devolver el resultado de una query a una BBDD o lo que nosotros queramos.]

Por último nos quedaría por ver el codigo del archivo HTML, donde se encuentran el ‘div’ contenedor y el formulario de envio.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script language="javascript" type="text/javascript" src="ajax.js"></script>
  <title>:: AJAX :: Ejemplo 1 de envío de datos</title>
  </head>

<body onload="noVisible();">
  <form onsubmit="cargarContenido(); return false">
  Inserta aqui el valor 1:
  <input name="texto1" type="text" id="texto1" />
  <br />
  Inserta aqui el valor 2: 
  <input name="texto2" type="text" id="texto2" />
  <br />
  <input type="button" name="Submit" value="Enviar Datos" onclick="cargarContenido();"/>
  </form>
  <div id="contenedor">Cargando…</div>
  </body>
  </html>