Solicitudes AJAX y PHP

Solicitud AJAX

En el siguiente ejemplo de AJAX, mostraremos cómo la página web se comunica con un servidor web en línea cuando el usuario ingresa datos en un formulario web.

Escriba el nombre en el siguiente cuadro de texto:

Sugerencias:

Este ejemplo incluye tres páginas:

  • Un formulario HTML simple
  • Un fragmento de JavaScript
  • Una página PHP

Formulario HTML

Este es un formulario HTML. Incluye un formulario HTML simple y un enlace a JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Nombre:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Sugerencias: <span id="txtHint"></span></p>
</body>
</html>

Ejemplo de explicación - formulario HTML

Como puede ver, la página HTML superior contiene un formulario HTML simple con un campo de entrada llamado "txt1".

Así funciona este formulario:

  1. Al presionar y soltar una tecla en el campo de entrada, se desencadena un evento
  2. Al activarse este evento, se ejecuta la función llamada showHint()
  3. Bajo el formulario hay un <span> llamado "txtHint" que se utiliza como marcador de posición para los datos devueltos por la función showHint().

JavaScript

JavaScript código se almacena en el archivo "clienthint.js", que se enlaza al documento HTML:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("El navegador no admite solicitudes HTTP")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Ejemplo de explicación:

Función showHint()

Cada vez que se ingrese un carácter en el campo de entrada, la función se ejecutará una vez.

Si hay contenido en el cuadro de texto (str.length > 0), la función se ejecuta de la siguiente manera:

  1. Definir la URL (nombre de archivo) que se enviará al servidor
  2. Agregar los parámetros (q) con el contenido del campo de entrada a esta URL
  3. Agregar un número aleatorio para evitar que el servidor utilice archivos de caché
  4. Llamar a la función GetXmlHttpObject para crear el objeto XMLHTTP y notificarle al objeto que ejecute la función llamada stateChanged cuando se dispara el evento
  5. Abrir este objeto XMLHTTP utilizando la URL proporcionada
  6. Enviar una solicitud HTTP al servidor

Si el campo de entrada está vacío, la función simplemente vacía el contenido del marcador de posición txtHint.

Función stateChanged()

Cada vez que cambia el estado del objeto XMLHTTP, se ejecuta esta función.

Cuando el estado se convierte en 4 (o "complete"), llenar el contenido del marcador de posición txtHint con el texto de respuesta.

Función GetXmlHttpObject()

Las aplicaciones AJAX solo pueden ejecutarse en navegadores web que soporten XML completamente.

El código llama a la función GetXmlHttpObject().

La función de este código es resolver el problema de crear diferentes objetos XMLHTTP para diferentes navegadores.

Esto se explicó en el capítulo anterior.

Página PHP

La página del servidor llamada "gethint.php" es una página de servidor simple que se llama a través de código JavaScript.

"El código en gethint.php verificará el array de nombres y luego devolverá el nombre correspondiente al cliente:",

<?php
//llenar el array con nombres
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//obtener el parámetro q desde la URL
$q=$_GET["q"];
//buscar todos los consejos del array si la longitud de q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
//Set output to "no suggestion" if no hint were found
//or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//Output the response
echo $response;
?>

Si hay texto enviado desde JavaScript (strlen($q) > 0), entonces:

  1. Encuentre nombres que coincidan con los caracteres enviados por JavaScript
  2. Si se encuentran varios nombres, incluya todos los nombres en la cadena de respuesta
  3. Si no se encuentra ningún nombre coincidente, configure la respuesta como "no suggestion"
  4. Si se encuentra uno o más nombres, configure la respuesta con estos nombres
  5. Envíe la respuesta a "txtHint" como marcador de posición