Ejemplo de AJAX PHP

AJAX se utiliza para crear aplicaciones más interactivas.

Ejemplo de AJAX PHP

A continuación se muestra un ejemplo: cómo la página web se comunica con el servidor web cuando el usuario escribe caracteres en el campo de entrada:

Ejemplo

Escriba las letras A-Z en el campo de entrada siguiente:

Nombre:

Sugerencias de búsqueda:

Explicación del ejemplo

En el ejemplo anterior, cuando el usuario escribe caracteres en el campo de entrada, se ejecuta la función llamada "showHint()".

Esta función se activa por el evento onkeyup.

A continuación se muestra el código HTML:

Ejemplo

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>Por favor, ingrese el nombre en el campo de entrada siguiente:</b></p>
<form> 
Apellido o nombre：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Recomendación:<span id="txtHint"></span></p>
</body>
</html>

Inténtalo tú mismo

Explicación del código:

Primero, verifique si el campo de entrada está vacío (str.length == 0），si es así, vacíe 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, se realiza lo siguiente:

  • Crear un objeto XMLHttpRequest
  • Crear una función que se ejecutará cuando el servidor esté listo para responder
  • Enviar solicitud al archivo PHP (gethint.php) en el servidor
  • Por favor, añada el parámetro q a gethint.php
  • La variable str almacena el contenido del campo de entrada

PHP archivo - "gethint.php"

Este archivo PHP verifica el arreglo de nombres y luego devuelve el nombre correspondiente al navegador:

<?php
// Arreglo de nombres
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";
// Obtener el parámetro q de la URL
$q = $_REQUEST["q"];
$hint = "";
// Ver todos los hint en el array, ¿es $q el mismo que ""?
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            }
                $hint .= ", $name";
            }
         }
    }
}
// Salida "sin sugerencias", si no se encuentra hint o salida el valor correcto
  echo $hint === "" ? "sin sugerencias" : $hint;
?>
c.html" -->