Einführung in AJAX

Für moderne und schnelle Websites mit Interaktion bietet sich Ajax an. Ganz einfach beschrieben: anhand von Ajax können einzelne Bereiche einer Webseite abhängig von einer Nutzeraktion mit Daten und Inhalte ausgetauscht werden, die von einem Server geliefert werden.

Beispiele dafür:

  • Google-Suche mit Suchvorschlägen
  • Kontrolle, ob ein Nutzername bereits vergeben ist
  • Viele Browserspiele nutzen Ajax
  • serverseitige Kontrolle, ob ein Passwort sicher ist (was im folgendem Tutorial gezeigt wird)

Unterschied zur alten Art ohne Ajax: Auf die alte Art wird die komplette Website neu übertragen, was natürlich sich nachteilig auf die Geschwindigkeit auswirkt und zu einer schlechten User-Experience (schönes Wort für genervten Nutzer wegen langer Wartezeit) führen kann.

Unser Beispiel für dieses Ajax-Tutorial

Wir geben dem Besucher die Möglichkeit, ein eigenes Kennwort zu erstellen. Neben dem Formularfeld für das Kennwort erhält der Besucher bereits während des Tippens ein Feedback, wie sicher sein gewähltes Kennwort ist. Es erscheint die Anzeige „unsicher“, „sicher“ oder „sehr sicher“.

Benötigte Vorkenntnisse für das Ajax-Tutorial

Neben HTML und CSS wird JavaScript und PHP benötigt. Dabei wird bei dem vorgestellten PHP-Programm darauf geachtet, dass es einfach zu verstehen ist. Die Kontrollfunktion in PHP würde normalerweise kürzer und effizienter programmiert – allerdings damit auch schwieriger zum Verstehen für Anfänger. Wer bei PHP einstiegen will: unseren kompletten PHP-Kurs gibt es unter https://www.PHP-Kurs.com.

Was passiert bei der Technologie Ajax eigentlich?

Ajax steht für „Asynchronous JavaScript and XML“ – es ist eigentlich nichts Anderes als JavaScript, Serveraufrufe und Eingriff in das DOM wiederum über JavaScript. Hört sich kompliziert an, ist es aber nicht.

Die Website „unterhält“ sich über einen standardisierten Aufruf mit dem Webserver, der dann neue Bereiche (bzw. Inhalte) für die Website zurückliefert, die dann an den entsprechenden Bereich angezeigt bzw. integriert werden.

Wir haben also 3 Teile:

  • einerseits der Teil im HTML-Bereich, der den Aufruf zum Webserver startet
  • Auf dem Webserver eine Anwendung, die je nach Fall Inhalte zurückliefert
  • Wieder im HTML-Bereich ein Teil, der das zurückgelieferte Teil integriert und anzeigt

Schauen wir uns das in dieser Reihenfolge an:

HTML-Datei

Unsere Aufgabe für Ajax ist, dass ein vom Besucher eingegebenes Kennwort auf seine Sicherheit getestet wird. Diese Prüfung erfolgt auf dem Server durch ein PHP-Programm. Neben dem Feld soll eine Ausgabe erscheinen mit „schwach, mittelmäßig bzw. stark“ je nach Sicherheit des Kennworts. Um diesen Bereich anzusprechen bekommt dieser die id „sicherheitshinweis“

<input type="password" size="10" value="">
<span id="sicherheitshinweis">hier kommt dann der AJAX-Inhalt</span>

Ein Aufruf auf einer Website wird gestartet, wenn ein Besucher das Feld für das Kennwort ausfüllt. Dazu muss ein Aufruf erfolgen, in unserem Beispiel als onchange bzw. wenn man nach jedem Tastendruck eine Reaktion möchte onkeyup.

<input type="password" size="10" value="" 
onkeyup="testekennwortqualitaet(this.value)" >
<span id="sicherheitshinweis">hier kommt dann der AJAX-Inhalt</span>

Bei Änderung des Inhaltes des Feldes wird die JavaScript-Funktion testekennwortqualitaet aufgerufen. Diese JavaScript-Funktion wird im HEAD-Bereich der Website integriert.

<head>
<title>AJAX-Beispiel</title>
<script>
function testekennwortqualitaet(inhalt)
{
}
</script>

Bisher macht unsere Funktion noch nichts. Im ersten Schritt überprüfen wir noch mit ganz normalem JavaScript, ob überhaupt eine Eingabe vorliegt, die wir dann später weiterreichen können.

<script>
function testekennwortqualitaet(inhalt)
{
 if (inhalt=="")
 {
  document.getElementById("sicherheitshinweise").innerHTML="keine Eingabe";
  return;
 }
}
</script>

Dies wird erst ausgeführt, wenn das Feld leer „gemacht“ wird. Die JavaScript-Funktion wird erst aufgerufen, wenn ein Inhalt eingetragen wird, also wenn das am Anfang leere Feld gefüllt wird. Wird das Feld aber noch einmal angeklickt und dann vorhandener Inhalt komplett gelöscht, wird die if-Bedingung inhalt == "" wahr sein. Und leeren Inhalt brauchen wir nicht zum Webserver übertragen, daher dann das return; und die function ist somit beendet.

Im zweiten Schritt wird innerhalb der Funktion nun der AJAX-Aufruf vorbereitet. Da es leider alte Browserversionen gibt, müssen diese berücksichtigt werden. Daher die folgenden Aufrufe, damit man auch mit alten Browsern und AJAX Spaß hat.

<script>
function testekennwortqualitaet(inhalt)
{
 if (inhalt=="")
 {
  document.getElementById("sicherheitshinweis").innerHTML="keine Eingabe";
  return;
 }
 if (window.XMLHttpRequest)
 {
  // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
  xmlhttp=new XMLHttpRequest();
 }
 else
 {
  // AJAX mit IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
}
</script> 

Im folgenden Schritt wird definiert, wohin „AJAX“ das vom Server zurückgelieferte Ergebnis „schreiben“ soll, wenn alles geklappt hat. Ob alles geklappt hat, wird über readyState==4 und status==200 überprüft. Danach wird ein Teil des Inhaltes der Einzelseite über document.getElementById ausgetauscht.

<script>
function testekennwortqualitaet(inhalt)
{
 if (inhalt=="")
 {
  document.getElementById("sicherheitshinweis").innerHTML="keine Eingabe";
  return;
 }
 if (window.XMLHttpRequest)
 {
  // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
  xmlhttp=new XMLHttpRequest();
 }
 else
 {
  // AJAX mit IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   document.getElementById("sicherheitshinweis").innerHTML=xmlhttp.responseText;
  }
 }
}
</script>

Von der HTML-Seite haben wir es jetzt fast. Es fehlt noch der Aufruf des PHP-Programms auf dem Webserver.

Dieser Aufruf erfolgt über xmlhttp.open und xmlhttp.send.

Das sieht dann wie folgt aus:

<script>
function testekennwortqualitaet(inhalt)
{
 if (inhalt=="")
 {
  document.getElementById("sicherheitshinweis").innerHTML="keine Eingabe";
  return;
 }
 if (window.XMLHttpRequest)
 {
  // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
  xmlhttp=new XMLHttpRequest();
 }
 else
 {
  // AJAX mit IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   document.getElementById("sicherheitshinweis").innerHTML=xmlhttp.responseText;
  }
 }
 xmlhttp.open("GET","kennworttesten.php?q="+inhalt,true);
 xmlhttp.send();
}
</script>

Und nun der komplette Code für den HTML-Bereich (damit man seine Eingabe sieht, wurde aus dem Passwortfeld type="password" der Typ zum normalen Textfeld geändert type="text").

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>AJAX-Beispiel</title>
<script>
function testekennwortqualitaet(inhalt)
{
 if (inhalt=="")
 {
  document.getElementById("sicherheitshinweis").innerHTML="keine Eingabe";
  return;
 }
 if (window.XMLHttpRequest)
 {
  // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
  xmlhttp=new XMLHttpRequest();
 }
 else
 {
  // AJAX mit IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   document.getElementById("sicherheitshinweis").innerHTML=xmlhttp.responseText;
  }
 }
 xmlhttp.open("GET","kennworttesten.php?q="+inhalt,true);
 xmlhttp.send();
}
</script>

</head>

<body>

<h1>Beispiel Kennwortsicherheit über AJAX</h1>

<input type="text" size="10" value="" 
onkeyup="testekennwortqualitaet(this.value)" >
<span id="sicherheitshinweis">hier kommt dann der AJAX-Inhalt</span>

</body>
</html>

Zum PHP-Script: Das kann hier nicht mehr Offline erfolgen! Also entweder einen Webserver installieren (siehe PHP-Kurs.com) oder das Script Online auf einen Webserver per FTP übertragen.

PHP-Beispiel-Script zum Prüfen der Kennwortstärke

Dieses Script muss mit dem Dateinamen „kennworttesten.php“ gespeichert und auch auf den Server übertragen werden.

<?php
$passwort = '';
if ( isset($_GET['q']) )
{
  $passwort = $_GET['q'];
}
$sicherheitszahl = 0;
$sicherheitszahl = strlen($passwort);
if (preg_match("/[a-z]/", $passwort)) {
    $sicherheitszahl = $sicherheitszahl + 5;
}
if (preg_match("/[A-Z]/", $passwort)) {
    $sicherheitszahl = $sicherheitszahl + 5;
}
if (preg_match("/[0-9]/", $passwort)) {
    $sicherheitszahl = $sicherheitszahl + 5;
}
if (preg_match("/[,.-;:_]/", $passwort)) {
    $sicherheitszahl = $sicherheitszahl + 5;
}
if ($sicherheitszahl <= 18 ) {
    echo 'unsicher ('.$sicherheitszahl.' Punkte)';
}
elseif ($sicherheitszahl <= 25) {
    echo 'sicher ('.$sicherheitszahl.' Punkte)';
}
elseif ($sicherheitszahl > 25) {
    echo 'sehr sicher ('.$sicherheitszahl.' Punkte)';
}
?>

Funktionsweise des PHP-Skriptes

Das Skript nimmt die vom Programm über $_GET['q'] gelieferte Nutzereingabe und speichert diese in der sprechenden Variable $passwort.

In den nächsten Schritten bekommt eine Variable $sicherheitszahl einen Wert dazugezählt, je nachdem ob das Passwort bestimmte Bedingungen erfüllt oder nicht.

Da längere Passwörter besser sind als Kürzere, erhält die Sicherheitszahl die Länge des Passworts. Sprich, besteht ein Passwort aus 7 Zeichen, beträgt die Sicherheitszahl 7.

Im nächsten Schritt wird kontrolliert, ob Kleinbuchstaben vorhanden sind. Weitere 5 Punkte, wenn das der Fall ist.

Dann wird kontrolliert, ob Großbuchstaben vorhanden sind. Auch hier weitere 5 Punkte, wenn Großbuchstaben da sind.

Dann wird kontrolliert, ob Zahlen vorhanden sind. Auch hier weitere 5 Punkte, wenn mindestens eine Zahlen vorhanden ist.

Dann wird auf folgende Sonderzeichen kontrolliert ,.-;:_ – auch dann 5 weitere Punkte. Die Sonderzeichen können noch erweitert werden (allerdings müssen einige davon maskiert werden).

Und als letztes liefert das Programm mittels echo anhand der Sicherheitszahl (Punkte) die Einteilung, ob es „unsicher“, „sicher“ oder „sehr sicher“ ist. Dieses Ergebnis nimmt unser AJAX-Anwendung entgegen und zeigt es an der bestimmten Position an.

Natürlich kann hier noch eine wesentlich ausgefeiltere Methode zur Bestimmung der Passwortstärke in PHP programmiert werden – es soll hier aber primär zum Verständnis dienen. Genauso kann auch eine schönere Ausgabe erstellt werden, z.B. einen Balken der sich von rot (für unsicher) nach grün färbt und länger wird, je sicherer das Passwort ist. Einfach mal probieren.