AJAX se utiliza para crear aplicaciones más interactivas.
El siguiente ejemplo demuestra cómo una página web puede comunicarse con un servidor web mientras un usuario escribe caracteres en un campo de entrada:
Empiece a escribir un nombre en el campo de entrada siguiente:
Suggestions:
First name:
En el ejemplo anterior, cuando un usuario escribe un carácter en el campo de entrada, una función llamado showHint() se ejecuta.
La función se activa mediante el evento onkeyup.
Aquí está el código:
<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xmlhttp.open("GET", "gethint.php?q=" + str);
xmlhttp.send();
}
}
</script>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<h3>Start typing a name in the input field below:</h3>
<p>Suggestions: <span id="txtHint"></span></p>
<p>First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
xhttp.open("GET", "gethint.php?q="+str);
xhttp.send();
}
</script>
</body>
</html>
Explicación del código:
Primero, verifique si el campo de entrada está vacío (str.length == 0). Si es así, borre el contenido del marcador de posición txtHint y salga de la función.
Sin embargo, si el campo de entrada no está vacío, haga lo siguiente:
Crear un objeto XMLHttpRequest
Cree la función que se ejecutará cuando la respuesta del servidor esté lista
Envíe la solicitud a un archivo PHP (gethint.php) en el servidor
Observe que se agrega el parámetro q gethint.php?q="+str
La variable str contiene el contenido del campo de entrada.
El archivo PHP comprueba una serie de nombres y devuelve los nombres correspondientes al navegador:
<?php
header("Expires: ".gmdate("D, d M Y H:i:s",time()+(-1*60))." GMT");
$a = array();
//Fill up array with names
$a[1]="Anna";
$a[2]="Brittany";
$a[3]="Cinderella";
$a[4]="Diana";
$a[5]="Eva";
$a[6]="Fiona";
$a[7]="Gunda";
$a[8]="Hege";
$a[9]="Inga";
$a[10]="Johanna";
$a[11]="Kitty";
$a[12]="Linda";
$a[13]="Nina";
$a[14]="Ophelia";
$a[15]="Petunia";
$a[16]="Amanda";
$a[17]="Raquel";
$a[18]="Cindy";
$a[19]="Doris";
$a[20]="Eve";
$a[21]="Evita";
$a[22]="Sunniva";
$a[23]="Tove";
$a[24]="Unni";
$a[25]="Violet";
$a[26]="Liza";
$a[27]="Elizabeth";
$a[28]="Ellen";
$a[29]="Wenche";
$a[30]="Vicky";
//get the q parameter from URL
if (isset($_GET["q"]))
{
$q = strtoupper($_GET["q"]);
}
else
{
$q = '';
}
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for ($i=1; $i<=30; $i++)
{
if ($q == strtoupper(substr($a[$i],0,strlen($q))))
{
if ($hint == "")
{
$hint=$a[$i];
}
else
{
$hint.=" , ".$a[$i];
}
}
}
}
else
{
$hint = "";
}
//Output "no suggestion" if no hint were found or output the correct values
if ($hint == "")
{
echo "no suggestion";
}
else
{
echo $hint;
}