AJAX se utiliza para crear aplicaciones más interactivas.
AJAX PHP Ejemplo
El siguiente ejemplo demostrará cómo una página web puede comunicarse con un servidor web, mientras que unos caracteres de tipo de usuario en un campo de entrada:
Ejemplo
Start typing a name in the input field below:
Suggestions:
ejemplo Explicación
En el ejemplo anterior, cuando un usuario escribe un carácter en el campo de entrada, una función llamada " showHint() " se ejecuta.
La función se activa por el evento onkeyup.
Aquí está el código HTML:
Ejemplo
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html> Ejecutar ejemplo » Código explicación:
En primer lugar, comprobar si el campo de entrada está vacía (str.length == 0) . Si es así, borrar el contenido del marcador de posición txtHint y salir de la función.
Sin embargo, si el campo de entrada no está vacía, haga lo siguiente:
- Crear un objeto XMLHttpRequest
- Cree la función a ejecutar cuando la respuesta del servidor está listo
- Enviar la solicitud fuera a un archivo PHP (gethint.php) en el servidor
- Observe que se agrega gethint.php parámetro q? Q = "+ str
- La variable str mantiene el contenido del campo de entrada
El PHP Archivo - "gethint.php"
El archivo PHP comprueba una serie de nombres, y devuelve el correspondiente name(s) en el navegador:
<?php
// Array with names
$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";
// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
//
lookup all hints from array if $q is different from ""
if ($q !== "")
{
$q = strtolower($q);
$len=strlen($q);
foreach($a as
$name) {
if (stristr($q, substr($name, 0, $len)))
{
if ($hint === "") {
$hint = $name;
} else
{
$hint .= ", $name";
}
}
}
}
// Output "no suggestion" if no hint was found
or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>