AJAX mit JavaScript, PHP und MySQL

Quelle für den Code und die zugrundeliegenden Screenshots: https://www.w3schools.com/php/php_ajax_php.asp

Im HEAD der HTMLDatei

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

Im BODY der HTML Datei

<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>

In der aufgerufenen PHP-Datei

// get the q parameter from URL
$q = $_REQUEST["q"];

Hier kann jetzt eine MySQL Abfrage eingefügt werden, deren Ergebnis in eine neue Variable geschrieben wird.

echo "Output: ".$MySQLresult;

Alle "echo"s werden dann in der HTMLDatei im BODY Teil live angezeigt!