PHP und AJAX-Anfragen

AJAX-Anfrage

In diesem AJAX-Beispiel zeigen wir, wie eine Webseite mit einem Online-Webserver kommuniziert, wenn der Benutzer Daten in ein Webformular eingibt.

Geben Sie Ihren Namen im folgenden Textfeld ein:

Vorschläge:

Dieser Beispiel umfasst drei Seiten:

  • Ein einfaches HTML-Formular
  • Ein Abschnitt JavaScript
  • Eine PHP-Seite

HTML-Formular

Dies ist ein HTML-Formular. Es enthält ein einfaches HTML-Formular und einen Link zum JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Vorname:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Vorschläge: <span id="txtHint"></span></p>
</body>
</html>

Beispiel Erklärung - HTML-Formular

Wie Sie sehen können, enthält die obere HTML-Seite ein einfaches HTML-Formular mit einem Eingabefeld namens "txt1".

So funktioniert das Formular:

  1. Ein Ereignis wird ausgelöst, wenn der Benutzer eine Taste im Eingabefeld drückt und loslässt
  2. Wenn dieses Ereignis ausgelöst wird, wird die Funktion showHint() ausgeführt
  3. Unter dem Formular befindet sich ein <span> mit dem Namen "txtHint"., das als Platzhalter für die von der Funktion showHint() zurückgegebenen Daten dient.

JavaScript

JavaScript-Code wird im "clienthint.js"-Datei gespeichert und wird in das HTML-Dokument eingebunden:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Example explanation:

showHint() function

The function is executed once every time a character is entered in the input field.

If there is content in the text box (str.length > 0), the function executes as follows:

  1. Define the URL (filename) to be sent to the server
  2. Add the parameter (q) with the content of the input field to this URL
  3. Add a random number to prevent the server from using a cached file
  4. Call the GetXmlHttpObject function to create an XMLHTTP object and inform the object to execute the function named stateChanged when the event is triggered
  5. Open this XMLHTTP object using the given URL
  6. Send an HTTP request to the server

Wenn das Eingabefeld leer ist, wird der Inhalt des txtHint-Pufferplatzhalters einfach geleert.

stateChanged() Funktion

Wenn der Status des XMLHTTP-Objekts geändert wird, wird diese Funktion ausgeführt.

Wenn der Status auf 4 (oder "complete") wechselt, wird der Text der txtHint-Pufferstelle txtHint mit dem Antworttext gefüllt.

GetXmlHttpObject() Funktion

AJAX-Anwendungen können nur in vollumfänglich XML unterstützennden Webbrowsern ausgeführt werden.

Das obige Code ruft die Funktion GetXmlHttpObject() auf.

Die Funktion dient dazu, das Problem zu lösen, dass für verschiedene Browser unterschiedliche XMLHTTP-Objekte erstellt werden müssen.

Dies wurde im vorherigen Abschnitt bereits erläutert.

PHP-Seite

Die Serverseite, die von JavaScript-Code aufgerufen wird, ist eine einfache Serverseite mit dem Namen "gethint.php".

"gethint.php"-Code überprüft das Namensarray und gibt entsprechend den Namen an den Client zurück:

<?php
// Array mit Namen füllen
$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";
// das q-Parameter aus der URL abrufen
$q=$_GET["q"];
// alle Hinweise aus dem Array abrufen, wenn die Länge von q > 0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
//Setzen Sie die Ausgabe auf "keine Vorschläge", wenn kein Hinweis gefunden wurde
//Oder auf die richtigen Werte setzen
if ($hint == "")
{
$response="keine Vorschläge";
}
else
{
$response=$hint;
}
//Geben Sie die response aus
echo $response;
?>

Wenn vom JavaScript gesendeter Text existiert (strlen($q) > 0), dann:

  1. Finden Sie Namen, die mit den von JavaScript übertragenen Zeichen übereinstimmen
  2. Wenn mehrere Namen gefunden werden, fügen Sie alle Namen in der response-Zeichenkette ein
  3. Wenn keine passenden Namen gefunden werden, setzen Sie die response auf "keine Vorschläge"
  4. Wenn ein oder mehrere Namen gefunden werden, setzen Sie die response auf diese Namen
  5. Senden Sie die response an den "txtHint" Platzhalter