Derniers tutoriels de développement web
 

PHP - AJAX et PHP


AJAX est utilisé pour créer des applications plus interactives.


AJAX PHP Exemple

L'exemple suivant démontrera comment une page Web peut communiquer avec un serveur Web tandis qu'un caractère de type utilisateur dans un champ de saisie:

Exemple

Start typing a name in the input field below:

First name:

Suggestions:


exemple Explained

Dans l'exemple ci - dessus, lorsqu'un utilisateur tape un caractère dans le champ de saisie, une fonction appelée " showHint() " est exécutée.

La fonction est déclenchée par l'événement onkeyup.

Voici le code HTML:

Exemple

<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>
»Exécuter exemple

explication Code:

Tout d' abord, vérifier si le champ d'entrée est vide (str.length == 0) . Le cas échéant, effacer le contenu de l'espace réservé txtHint et quitter la fonction.

Cependant, si le champ d'entrée est vide, procédez comme suit:

  • Créer un objet XMLHttpRequest
  • Créer la fonction à exécuter lorsque la réponse du serveur est prêt
  • Envoyer la demande à un large fichier PHP (gethint.php) sur le serveur
  • Notez que le paramètre q est ajouté gethint.php? Q = "+ str
  • La variable str détient le contenu du champ d'entrée

Le fichier PHP - "gethint.php"

Le fichier PHP vérifie un tableau de noms, et renvoie le correspondant name(s) du navigateur:

<?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;
?>