PHP - AJAX și PHP. Exemplu AJAX PHP. Funcția showHint(). Evenimentul onkeyup. Explicarea codului.

PHP - AJAX și PHP

AJAX este utilizat pentru a crea mai multe aplicații interactive.

Exemplu AJAX PHP

Următorul exemplu va demonstra modul în care o pagină web poate comunica cu un server web în timp ce un utilizator tastează într-un câmp de intrare (input field):

Exemplu explicat

Când un utilizator introduce un caracter în câmpul de intrare (input field), se execută o funcție numită "showHint()".

Funcția este declanșată de evenimentul onkeyup.

Iată codul HTML:

Exemplu:

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        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>Începeți să tastați un prenume în câmpul de introducere (input field) de mai jos:</b></p>
<form>
Prenume: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Sugestii: <span id="txtHint"></span></p>
</body>
</html>

Explicarea codului:

În primul rând, verificați dacă câmpul de intrare (input field) este gol (str.length == 0). Dacă este, ștergeți conținutul marcajului de substituție txtHint și ieșiți din funcție.

Cu toate acestea, dacă câmpul de intrare nu este gol, faceți următoarele:

Creați un obiect XMLHttpRequest
Creați funcția care trebuie executată atunci când răspunsul serverului este gata
Trimiteți cererea la un fișier PHP (gethint.php) de pe server
Observați că parametrul q este adăugat la url (gethint.php?q="+str)
Și variabila str conține conținutul câmpului de intrare (input field)