Aquí comenzamos con nuestra primera aplicación usando las tecnologías PHP y Ajax. Este primer proyecto posee el siguiente proceso y los siguientes pasos:

• Crearemos una simple aplicación con un " input " ó casilla de ingreso en formularios, en la que se le solicita al usuario que escriba su nombre y el servidor devuelve este nombre mientras el usuario vá escribiendo.
• Mientras el usuario está escribiendo y el servidor esta siendo llamado asincrónicamente a intervalos regulares de una vez por segundo, para ver si reconoce el nombre actual; lo cual explica por qué no necesitamos un botón (como un botón 'Enviar') para notificar cuando estamos tipeando (Este método puede no ser apropiado para mecanismos reales de inicio de sesión pero es muy bueno para demostrar alguna funcionalidad de AJAX.)

Demo

Descargar Explicación del Código

• Paso 1: Tenemos que saber que la aplicación consiste en estos 3 archivos :
• index.html, que es el archivo inicial que el usuario solicita cuando ingresa al aplicativo web creado.
• InicioRapido.js, es el archivo que contiene código JavaScript que se carga en el lado del cliente junto con index.html. Este archivo se encargará de realizar las solicitudes asíncronas al servidor, cuando estas sean necesaria para el uso del aplicativo.
• InicioRapido.php, Este archivo contiene un script PHP que reside en el servidor, el cual es llamado mediante el código del archivo inicioRapido.js desde el lado del cliente.

• Paso 2: Comencemos por la creación del archivo index.html:
• Para la creación de este archivo hemos realizado la inclusión de los códigos de cabecera(Head) y cuerpo(Body) del HTML que son básicos y no voy a tocar en este capítulo.
• Hemos adicionado un evento HTML dentro del cuerpo " body " de nuestro código del archivo index.html,
• Este evento llamará a la función JavaScript llamada proceso que realizará la acción requerida de nuestro aplicativo web.
• El input será de tipo text y tendrá un id llamado "minombre" el cual es un identificador que nos proporciona administración en nuestro aplicativo, ya veremos más adelante!
• Para finalizar utilizamos la tag div la cual nos ofrece la posibilidad de posicionar objetos y el objeto aquí posicionado será justamente el ingresado en el input, que será nuestro nombre o el nombre que el usuario ingrese en el input!
• Colocaremos un id llamado "divmensaje" que será el identificador del lugar donde posicionaremos a nuestro objeto que será el nombre ingresado en el input.

 <!<span > DOCTYPE  html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >
 <<span >html   xmlns = "http://www.w3.org/1999/xhtml" >
   <<span >head >
     <<span >title >AJAX con PHP: Inicio Rápido </<span >title >
    <<span >script  type = "text/javascript"   src = "quickstart.js" ></<span >script>
   </<span >head >
   <<span >body   onload = 'process()' >
    El Servidor desea saber su nombre: 
     <<span >input   type = "text"   id = "myName"  />
     <<span >div   id = "divMessage"  />
   </<span >body >
 </<span >html >

• Paso 3: Creamos nuestro archivo "quickstart.js",
• En este archivo vamos a crear una variable la cual almacenará la referencia al objeto " XMLHttpRequest " el cual es un objeto el cual nos ofrece una manera fácil de recuperar datos en una URL y puede ser usado para recuperar cualquier tipo de datos,
• Para mayores informaciones te dejo este link donde podrás aprender más sobre este objeto muy importante dentro de la tecnologia Ajax! ¿Qué es XMLHttpRequest?

 var  xmlHttp  =  crearObjetoXMLHttpRequest();

• Como podemos ver en el código hemos creado una variable xmlhttp que va a ser igual a "crearObjetoXMLHttpRequest()", lo cual quiere decir que la referencia a XMLHttpRequest es la función crearObjetoXMLHttpRequest.
• Ahora vamos a recuperar el objeto XMLHttpRequest con esta función, veamos:

 // Almacenando la referencia al Objecto XMLHttpRequest 
 var  xmlHttp  =  crearObjetoXmlHttpRequest(); 
 // Recuperando el objeto XMLHttpRequest 
 function   crearObjetoXmlHttpRequest () 
{   
   var  xmlHttp;
   // Si está ejecutando Internet Explorer 
   if (window.ActiveXObject)
  {
     try 
    {
      xmlHttp  =   new  ActiveXObject( "Microsoft.XMLHTTP" );
    }
     catch  (e) 
    {
      xmlHttp  =   false ;
    }
  }
   // Si está ejecutando Mozilla o otros navegadores 
   else 
  {
     try  
    {
      xmlHttp  =   new  XMLHttpRequest();
    }
     catch  (e) 
    {
      xmlHttp  =   false ;
    }
  }
   // Devolver el objeto creado o mostrar un mensaje de error 
   if  ( ! xmlHttp)
 
    alert( "Error al crear el Objeto XMLHttpRequest." );
   else  
     return  xmlHttp;
}
 // Hacer la solicitud HTTP asincrónica utilizando el objeto XMLHttpRequest mediante la función "process"  
 function   process ()
{
   // Proceda sólo si el objeto xmlHttp no está ocupado 
   if  (xmlHttp.readyState  =  =   4  || xmlHttp.readyState  =  =   0 )
  {
     // Recuperar el name escrito por el usuario en el "input" 
     name   =  encodeURIComponent(document.getElementById( "myName" ). value );
     // Ejecutar la página inicioRapido.php desde el servidor 
    xmlHttp. open ( "GET" ,  "quickstart.php?name="   +   name ,  true );  
Más sobre
Internet Explorer
     // Definiendo el método para manejar las respuestas del servidor 
    xmlHttp.onreadystatechange  =  handleServerResponse;
     // Hacer que el servidor solicite las respuestas 
    xmlHttp. send ( null );
  }
   else 
     // Si la conexión está ocupada, vuelva a intentarlo después de un segundo   
     setTimeout ( 'process()' ,  1000 );
}
 // Ejecutando automáticamente cuando se recibe un mensaje desde el servidor 
 function   handleServerResponse () 
{
   // Avanzar sólo si la transacción ha finalizado 
   if  (xmlHttp.readyState  =  =   4 ) 
  {
     // Estado de 200 indica que la transacción se ha completado correctamente 
     if  (xmlHttp. status   =  =   200 ) 
    {
       // Extraer el XML recuperado del servidor 
      xmlResponse  =  xmlHttp.responseXML;
       // Obtener el elemento del documento (el elemento raíz) de la estructura XML 
      xmlDocumentElement  =  xmlResponse.documentElement;
       // Obtener el mensaje de texto, que está en el primer hijo de 
        // el elemento del documento 
      helloMessage  =  xmlDocumentElement. FirstChild . data ;
       // Actualizar la pantalla del cliente utilizando los datos recibidos desde el servidor 
      document.getElementById( "divMessage" ).innerHTML  =  
                                             ' '    +  helloMessage  +   '' ;
       // Reiniciar Secuencia 
       setTimeout ( 'process()' ,  1000 );
    } 
     // Un estado HTTP diferente de 200 señala un error! 
     else  
    {
      alert( "Ocurrió un problema al accesar al servidor: "   +  xmlHttp.statusText);
    }
  }
}

• Además coloco pues 5 nombres de administradores que son Cristian, Miguel, Felipe, Gaspar y Elena;
• entonces si usted coloca alguno de estos nombres el sistema devolverá lo siguiente:
• Hola, Administrador y el nombre que hayamos elegido enter estos 5 nombres de administrador!

• Bien ahora veamos nuestro código:

<?php<br /> // Generando una salida XML 
 header ( 'Content-Type: text/xml' );
 // Generando una salida Header 
 echo   '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' ;
 // creando el elemento  
 echo   '' ;
 // Devolviendo el nombre de usuario 
 $name   =   $_GET [ 'name' ];
 // generando salida dependiendo del usuario administrador o usuario visitante 
 $userNames   =   array ( 'CRISTIAN' ,  'MIGUEL' ,  'FELIPE' ,  'GASPAR' ,  'ELENA' );
 if  ( in_array ( strtoupper ( $name ),  $userNames ))
     echo   'Hola, Administrador '   .   htmlentities ( $name )  .   '!' ;
     else   if  ( trim ( $name )  ==   '' )
         echo   'Visitante, por favor ingrese su nombre!' ;
         else 
             echo   htmlspecialchars ( $name )  .   ', Yo no te conozco!' ;
             // Cerrando el elemento  
             echo   '' ;
            ?>

• Hagan sus preguntas y claro tambien no dejen de hacer sus críticas por favor!