Ejemplo sencillo de AJAX con PHP

Este es un ejemplo de lo más sencillo del funcionamiento de AJAX en un sitio web, y de como se puede obtener respuesta de parte del servidor sin necesidad de recargar la página. Lo primero que debemos tener en cuenta es que el servidor web PHP ya debe de estar instalado en la máquina, después vamos a dar de alta un sitio que se llame pruebas o algo similar, y ahí vamos a crear los dos archivos que necesitamos para la prueba: Primero, la parte del cliente. cliente.php:

<script>
/* esta función sirve para obtener el objeto de JavaScript que tendrá la 
   interacción con el servidor, intenta varios métodos para crearlo, y si falla
   manda una alerta
*/
function getHTTPObject(){
 if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
 else if (window.XMLHttpRequest) return new XMLHttpRequest();
 else {
 alert("Su navegador no soporta AJAX.");
 return null;
 }
}

/* esta es la función a la que se manda llamar para que haga el trabajo */
function trabaja ( texto_capturado ){

 mi = new Date(); // se crea una fecha
 httpObject = getHTTPObject(); // se obtiene el objeto de conexción
 
 if (httpObject != null ) {

               /* esta es la cadena con la URL a la cual mandaremos la petición
                le mandamos por GET el datos texto, que fue el que recibimos desde el intput en esta función */
  cadena = "respuesta.php?texto="+texto_capturado+"&m="+mi;
  
               /* le indicamos que queremos la petición por el método GET, a la dirección que tiene la variable "cadena" */
  httpObject.open("GET", cadena  , true);
  httpObject.send(null);
                
                 // aquí le indicamos que cuando esté lista la petición al servidor, nos mande el control a la función llamada "funcionSalida"
  httpObject.onreadystatechange = funcionSalida;
 }
}

/* esta es la función a la que se manda llamar desde la función trabaja
function funcionSalida(){

// el readyState == 4 indica que está lista la respuesta del servidor
 if(httpObject.readyState == 4)
 {
// con la función responseText obtenemos la respuesta y la guardamos
  respuesta = httpObject.responseText;
// en le input con id=salida mostramos la respuesta del servidor
// es decir, la cadena original en mayúsculas
  document.getElementById('salida').value = respuesta;
 }
}

var httpObject = null;
</script>

Original:<input type="text" name="texto" id="texto" onkeyup="trabaja(this.value)"/>

En Mayúsculas<input type="text" name="salida" id="salida" />

Y después la parte del servidor. respuesta.php

<?php
/* esta es la parte del servidor, en este ejemplo lo único que haremos será
imprimir la cadena recibida en mayúsculas */
echo strtoupper( $_GET['texto'] );

?>

En este ejemplo hacemos algo muy sencillo como es convertir a mayúsculas la cadena recibida, pero de manera similar se podrían hacer consultas a la base de datos, a archivos, etc.