Zurück

[Ajax] Tutorial – Bastubhecnsalat

28.08.2013 21:36 von Samuel

Heute werde ich erklären, wie man ganz einfach mit Ajax eien HTTP Request an ein PHP Script sendet um eine Antwort zu bekommen, ohne den Browser neu zu laden.

Was ist Ajax?

Wikipedia meint:

Ajax [ˈeidʒæks] (Apronym von engl. Asynchronous JavaScript and XML) bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Browser und dem Server. Dieses ermöglicht es, HTTP-Anfragen durchzuführen, während eine HTML-Seite angezeigt wird, und die Seite zu verändern, ohne sie komplett neu zu laden.

Wobei man auch einfach sagen könnte: “Mit Ajax ist es möglich, Daten, ohne Browser Reload zu übertragen.”

Idee

Damit wir auch in PHP etwas zu verarbeiten haben, werde ich als Beispiel einen “Buchstabensalat” programmieren. Das hört sich zuerst recht langweilig an. Das ist es aber keinesfalls. Das Ziel ist nicht irgendein Buchstabensalat zu erzeugen, sondern nur die Buchstaben zwischen dem ersten und dem letzten zu ändern. Graham Rawlinson stellte 1976 fest, dass die Reihenfolge der Buchstaben innerhalb von Wörtern – sofern ein oder mehrere Anfangs- und Endbuchstaben korrekt blieben – das Leseverstehen nur begrenzt beeinflusste.

Der PHP-Teil

Zuerst programmieren wir den PHP-Teil. Unser Script sollte also den Satz durchgehen und aus jedem Wort die Buchstaben zwischen dem ersten und letzten Buchstabe, mischen. Wir erzeugen eine Variable mit unserem gewünschten Text, werden mit “explode()” den String splitten und dannach ein leeres Array erstellen.

<?php

  $text = 'Hallo das ist eine Eisenbahn.';

  $words = explode(' ', $text);
  $newWords = array();

 

Die hier verwendete Funktion “explode()” splittet ein Array anhand der eingegebenen Zeichenkette. Bei uns ein Leerzeichen, damit wir jedes Wort erfassen können. Da “explode()” ein Array zurückgibt, können wir mit “foreach” nun alle Elemente durchgehen.

 

foreach ($words as $word) {
        $chars = str_split(entferneSonderzeichen($word));

    $first = array_shift($chars);
    $last = array_pop($chars);

    shuffle($chars);

    array_push($newWords, $first.implode('', $chars).$last);
  }

 

In der Variable “$chars” wird nun jeder Treffer mit “str_split()” in ein Array konvertiert. Mit “array_shift()” wird das erste Element des Array – also der erste Buchstabe für uns – ermittelt und mit “array_pop” der letzte Buchstabe. Anschliessend werden mit “shuffle()” die Elemente des Array gemischt. Zu guter Letzt werden mit “array_push()” der erste Buchstabe, die gemischten Buchstaben und der letzte Buchstabe an das vorher definierte Array hinzugefügt. Da die vorher erstellte Variable “$newWords” ein Array ist, müssem wir mit “implode()” das Array wieder in einen String umwandeln damit man es mit “array_push()” benutzen kann. Das sieht dann so aus:

 

$text = implode(' ', $newWords);
echo $text;

 

Die Funktion “entferneSonderzeichen()” habe ich verwendet, um die Sonderzeichen vor dem mischen der Buchstaben zu entfernen. Ansonsten wären Punkt, Komma und andere Zeichen in den gemischten Zeichen. Die Funktion ist einfach gehalten:

 

function entferneSonderzeichen($value) {
    return preg_replace('/[^a-zA-Z0-9_äöüÄÖÜ]/' , '' , $value);
}

Ajax / Javascript – Teil

Jetzt kommen wir zum eigentlichen Tutorial. Wir möchten nun den Text eingeben können und dannach eine Antwort des PHP Scripts erhalten ohne die Seite neu zu laden. Zuerst legen wir eine “ajax.js” und eine “index.html” im gleichen Verzeichnis an, in welchem das PHP Script liegt.

Es gibt zwei Arten die uns interessieren um den Inhalt über Ajax an das PHP Script zu senden. GET und/oder POST. Da es sich bei diesem Beispiel um Text handelt, würde ich POST bevorzugen, da GET nur eine Begrenzte Anzahl an Zeichen erlaubt.

Zuerst erzeugen wir eine Variable “xmlhttp”.

var xmlhttp;

Da der Internet Explorer das “XMLHttpRequest” Objekt bis Version 7 nicht kennt, müssen wir ein ActiveX Objekt erzeugen.

if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }

 

Jetzt kommen wir zum “OnReadyStateChange” Event-Handler, welche dann aufgerufen wird, wenn sich der Status ändert. Dieser kann folgende Werte enthalten:

  • 0 = uninitiElized
  • 1 = loading
  • 2 = loaded
  • 3 = interactiv
  • 4 = complete

Wir überprüfen also, ob dieser “==4″ ist. Mit dem Event-Handler “Status” können wir die HTTP-Statuscode Antwort auslesen.

  • 404 = “Nicht gefunden”
  • 200 = “OK”

usw..

Da gibt es eine ganze Liste davon. Uns interessiert also nur den Status “200″ da dieser “OK” bedeutet. Falls wir also den Status “200″ bekommen, kann unsere Antwort mit “responseText” ausgeben.

 

 xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById('results').innerHTML = xmlhttp.responseText;
    }
  }

 

Da dieser Code gar nicht ausgeführt wird, ohne einen Request überhaupt zu erzeugen um eine Antwort zu erhalten, müssen wir natürlich noch die Daten an das PHP-Script senden.

 

xmlhttp.open('POST', 'script.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send('text=' + text);

 

Wir öffnen einen Request und setzen “POST” als Methode ein. Im zweiten Parameter wird das Ziel angegeben – unser PHP-Script – und im letzten Parameter wird angegeben ob die Anfrage asynchron laufen. (true ist standard) In der letzten Zeile senden wir nun den Request ab und geben als POST-Parameter “text” mit mit dem Text der in der Funktion übertragen wird.

Die ganze “ajax.js” sieht dann so aus:

 

function sendAjaxRequest(text) {
  var xmlhttp;

  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById('results').innerHTML = xmlhttp.responseText
    }
  }

  xmlhttp.open('POST', 'script.php', true);
  xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xmlhttp.send('text=' + text);
}

HTML-Teil

Im letzten – dem HTML-Teil – werden wir nur noch eine Textarea erzeugen und mit einem Button die Javascript Funktion aufrufen. Damit wir die Antwort des PHP Scripts empfangen können, müssen wir noch ein DIV erzeugen welches mit der “ajax.js” angesprochen wird.

Ein Beispiel:

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script language="javascript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
  <textarea id="text" rows="5" cols="25"></textarea>
  <button onclick="sendAjaxRequest(document.getElementById('text').value)">OK</button>

  <div id="results">
    <!-- Ajax Antwort -->
  </div>
</body>
</html>

 

Damit man nun auch eine Antwort bekommt, muss im PHP-Script noch die Variable

$text = 'Hallo das ist eine Eisenbahn.';

in

$text = htmlentities($_POST['text']);

umgeändert werden.

Ergebnis

Viel Spass beim Ausprobieren :-)

Zurück

Einen Kommentar schreiben