AJAX PHP


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


AJAX wird verwendet, um interaktivere Anwendungen zu erstellen.


AJAX PHP-Beispiel

Das folgende Beispiel zeigt, wie eine Webseite mit a kommunizieren kann Webserver, während ein Benutzer Zeichen in ein Eingabefeld eingibt:

Beispiel

Beginnen Sie mit der Eingabe eines Namens in das Eingabefeld unten:

Suggestions:

First name:


Beispiel erklärt

Wenn ein Benutzer im obigen Beispiel ein Zeichen in das Eingabefeld eingibt, wird eine Funktion ausgeführt namens showHint() wird ausgeführt.

Die Funktion wird durch das Ereignis onkeyup ausgelöst.

Hier ist der Code:

Beispiel

<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>

<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>

<script>
function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  xmlhttp.open("GET", "gethint.php?q=" + str);
  xmlhttp.send();
  }
}
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<h3>Start typing a name in the input field below:</h3>

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

<script>
function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "gethint.php?q="+str);
  xhttp.send();   
}
</script>

</body>
</html>

Code-Erklärung:

Überprüfen Sie zunächst, ob das Eingabefeld leer ist (str.length == 0). Wenn ja, löschen Sie das Inhalt des txtHint-Platzhalters und beenden Sie die Funktion.

Wenn das Eingabefeld jedoch nicht leer ist, gehen Sie wie folgt vor:

  • Erstellen Sie ein XMLHttpRequest-Objekt

  • Erstellen Sie die Funktion, die ausgeführt werden soll, wenn die Serverantwort bereit ist

  • Senden Sie die Anfrage an eine PHP-Datei (gethint.php) auf dem Server

  • Beachten Sie, dass der q-Parameter gethint.php?q="+str hinzugefügt wurde

  • Die str-Variable enthält den Inhalt des Eingabefelds



Die PHP-Datei - „gethint.php“

Die PHP-Datei überprüft ein Array von Namen und gibt die entsprechenden Namen an die Datei zurück Browser:

<?php 
header("Expires: ".gmdate("D, d M Y H:i:s",time()+(-1*60))." GMT");
$a = array();
//Fill up array with names
$a[1]="Anna";
$a[2]="Brittany";
$a[3]="Cinderella";
$a[4]="Diana";
$a[5]="Eva";
$a[6]="Fiona";
$a[7]="Gunda";
$a[8]="Hege";
$a[9]="Inga";
$a[10]="Johanna";
$a[11]="Kitty";
$a[12]="Linda";
$a[13]="Nina";
$a[14]="Ophelia";
$a[15]="Petunia";
$a[16]="Amanda";
$a[17]="Raquel";
$a[18]="Cindy";
$a[19]="Doris";
$a[20]="Eve";
$a[21]="Evita";
$a[22]="Sunniva";
$a[23]="Tove";
$a[24]="Unni";
$a[25]="Violet";
$a[26]="Liza";
$a[27]="Elizabeth";
$a[28]="Ellen";
$a[29]="Wenche";
$a[30]="Vicky";
//get the q parameter from URL
if (isset($_GET["q"]))
{
	$q = strtoupper($_GET["q"]);
}
else
{
	$q = '';
}
//lookup all hints from array if length of q>0
if (strlen($q) > 0) 
{
	$hint="";
	for ($i=1; $i<=30; $i++) 
	{
		if ($q == strtoupper(substr($a[$i],0,strlen($q)))) 
		{
			if ($hint == "") 
			{
				$hint=$a[$i];
			}
			else 
			{
				$hint.=" , ".$a[$i];
			}
		}
	}
}
else
{
	$hint = "";
}
//Output "no suggestion" if no hint were found or output the correct values
if ($hint == "") 
{
	echo "no suggestion";
}
else 
{
	echo $hint;
}