Bryan Albrecht

AJAX

In diesem Tutorial möchte ich erklären, was AJAX ist und wie man es benutzt.

Nutzen

Heutzutage gibt es viele Webseiten, welche auf dem "single page website" Prinzip aufgebaut sind.

Das bedeutet, dass die ganze Webseite funktioniert ohne, dass eine neue Seite geladen werden muss. Das heisst, dass sich die URL beim Navigieren nicht verändert.

Auch möglich ist es, das eine Seite dauerhaft abfragen muss, ob auf einem Server neue Inhalte verfügbar sind. Wenn neue Inhalte verfügbar sind, sollen diese automatisch, ohne die Seite neu zu laden, in die Webseite eingebunden werden.

Funktion

AJAX basiert auf jQuery, darum muss die jQuery Bibliothek in die Webseite eingebunden werden.

Um den ganzen Vorgang zu starten, muss man eine Aktion festlegen, nach welcher die AJAX Abfrage gestartet wird. Diese Aktion ruft eine JavaScript Funktion auf, welche die AJAX Abfrage bearbeitet.

Wenn die Antwort vom Server kommt, fügt die genannte JavaScript Funktion die Erhaltenen Daten in die Webseite ein.

Code

Einbinden der jQuery Bibliothek:

  1. <script src="http://code.jquery.com/jquery-1.11.2.js"></script>

Einbinden der Funktion für die AJAX Abfrage:

Die JavaScript Datei befindet sich im js Ordner und heisst global.js.

  1. <script src="js/global.js"></script>

Aufrufen der Funktion:

In diesem Beispiel wird die Funktion beim öffnen der Seite aufgerufen.

  1. <body onload="start()">

JavaScript Funktion:

In dieser Funktion wird mit AJAX ein PHP File aufgerufen, welches eine Funktion ausführt.

Die zurückgegebenen Daten werden in ein DIV mit der ID "maincontent" eingetragen.

  1. function start (){
  2. $.post('ajax/get.php', {}, function(data) {
  4. document.getElementById('maincontent').innerHTML = data;
  6. });
  7. }

PHP Funktion:

Ein "echo" in dieser PHP Funktion, wird über AJAX an die JavaScriptFunktion zurückgegeben.

  1. <?php
  2. Echo '<img src="pictures/test.png">';
  3. ?>