Anzeige
Tutorialbeschreibung

PHP - Teil 41 - Ajax (Teil 1): Ajax mit jQuery und PHP

PHP - Teil 41 - Ajax (Teil 1): Ajax mit jQuery und PHP

Ajax steht für Asynchronous JavaScript and XML und ist aus vielen Webseiten und Anwendungen heute eigentlich kaum noch wegzudenken. Kein Wunder, schließlich ist die Technik, die sich dahinter verbirgt, so einfach wie genial. Mit jenem Ajax lassen sich Daten zwischen Server und Browser austauschen, ohne dass die Seite dabei neu geladen werden muss. Dieses Video-Training liefert einen kurzen Einstieg in die Ajax-Programmierung und zeigt, wie sich eine Ajax-Anwendung mit jQuery und PHP umsetzen lässt.

... übrigens findest du die komplette Serie hier: PHP-Workshop-DVD - Basics & Tricks - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Ajax ist – auch wenn das vielleicht oft angenommen wird – keine Neuerfindung. Vielmehr handelt es sich dabei um eine Kombination verschiedener Techniken, mit der eine neue Kommunikationsart zwischen Server und Client realisiert wird. Ajax ist ein Kunstwort, das im Jahr 2005 von James Garetti in dem Assay A New Approach to Web Applications erstmals verwendet wurde. Das Ajax-Prinzip gibt es deutlich länger, es lief allerdings unter dem etwas sperrigen Namen XMLHttpRequest.

Um zu verstehen, warum Ajax die Web-Entwicklerwelt revolutioniert hat, braucht man sich nur die Funktionsweise normaler Web-Anwendungen anzusehen. Dort werden die Eingaben des Nutzers an den Server gesendet, der daraufhin eine neue Seite generiert und diese zurück an den Browser sendet.

Bilder



 
Eine der ersten populären Anwendungen, die Ajax eingesetzt hat, ist Google Suggest gewesen, eine Erweiterung der bekannten Google-Suche. Die Suchbegriffe werden in Echtzeit in einem Auswahlfeld-Feld angezeigt.

Bilder



 
Das ermöglicht ein schnelleres Suchen und bietet dem Suchenden alternative Suchbegriffe, auf die er selbst vielleicht nicht gekommen wäre. Heute ist Google Suggest fester Bestandteil von Google. (Und übrigens auch vieler anderer Suchmaschinen und Anwendungen).

Bilder



Eine vergleichbare Anwendung wird übrigens in dieser Ajax-Reihe vorgestellt.


 

Vor- und Nachteile

Bei all den Vorteilen dürfen die Nachteile nicht vergessen werden, die Ajax-Anwendungen unzweifelhaft mitbringen und die man sich vor Augen führen muss. Zunächst der Klassiker schlechthin: Ajax-basierte Webseiten funktionieren nur, wenn JavaScript im Browser verfügbar ist. Das ist ein Risiko, das aber nicht dramatisiert werden sollte, da die Zahl der Anwender, die JavaScript tatsächlich deaktiviert haben, gering ist. Hier hilft es übrigens nicht, wenn man sich allgemeine Statistiken über die JavaScript-Verfügbarkeit ansieht.

Besser ist es immer, das Nutzerverhalten auf der eigenen Seite bzw. auf der des Kunden zu analysieren. Dennoch muss eines klar sein: Ihr müsst jeweils abwägen, ob es sich lohnt, für den Fall, dass in einem Browser JavaScript deaktiviert ist, eine Ajax-freie Alternative anzubieten. So etwas ist prinzipiell meistens machbar, ist aber mit einem vergleichsweise hohen Aufwand verbunden. Wer seine Webseiten möglichst barrierearm erstellen will, kommt um eine solche Alternative aber eh nicht herum.

Ein weiterer Aspekt, der gerne übersehen wird, ist die erhöhte Serverbelastung. Denn durch jede Aktion wie z.B. einen Mausklick innerhalb einer Ajax-Anwendung kann zusätzliche HTTP-Kommunikation verursacht werden. Bei nur wenig frequentierten Seiten ist dieser Aspekt zu vernachlässigen. Nutzen allerdings sehr viele Anwender parallel die Ajax-Funktionalitäten einer Seite, kann das durchaus zu Problemen bei der Serverperformance führen.

Nicht zu vergessen ist außerdem der Aspekt der Webseiten-URLs. Bekanntermaßen zeichnen sich Webseiten durch feste Adressen aus. Wird auf einer Webseite sehr viel Ajax eingesetzt, kann es allerdings passieren, dass dort lange Zeit die wechselnden Inhalte unter demselben URL angezeigt werden. Problematisch ist das vor allem, wenn man Favoriten/Bookmarks auf die Seite setzen will. Auch die Vor- und Zurück-Schaltflächen der Browser bleiben in diesem Fall wirkungslos.


 

Ein erstes Beispiel

Wie es in der Programmierung gute Sitte ist, soll auch an dieser Stelle der Einstieg in eine neue Technik/Sprache über ein klassisches Hallo-Welt-Beispiel erfolgen. Bevor die Syntax vorgestellt wird, zunächst das Ergebnis. Ruft man die Seite auf, wird eine einfache HTML-Seite angezeigt.

Bilder



 
Auf dieser Seite ist eine Schaltfläche zu sehen. Klickt man diese an, wird mittels Ajax Inhalt aus einer externen Datei nachgeladen.

Bilder



 
Das Besondere an einer solchen Anwendung ist nun aber freilich, dass diese Inhalte angezeigt werden, ohne dass die Seite neu geladen werden muss. Und genau das sind das Grundprinzip und der riesige Vorteil solcher Ajax-Anwendungen.

<!DOCTYPE HTML> 
<html> 
    <head>
        <title>Hallo Welt</title>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
    </head>
     <body>
     <h1>Hallo, Welt!</h1>
     <button>Zeige das Datum und die Uhrzeit</button>
     <p></p>
    </body>
</html>


Im aktuellen Beispiel wird jQuery verwendet. Was es damit auf sich hat und wie man dieses Framework nutzt, wurde in einer Tutorialreihe hier auf psd-tutorials.de gezeigt. Innerhalb der Datei wird ein p-Bereich definiert. Dieser Bereich ist es auch, in dem später die nachzuladenden Inhalte angezeigt werden sollen. Der Skriptbereich, der für das Nachladen verantwortlich ist, sieht folgendermaßen aus:

<script>
   $(function(){
        $("button").click(function(e){
            e.preventDefault()
            $.get('ajax.php', function(data){
                $("p").html(data);
            });
        });
    })
</script>


Hier wird festgelegt, dass nach dem Anklicken des Elements button der Inhalt der Datei ajax.php innerhalb des Elements p zu sehen sein wird.

Innerhalb der externen PHP-Datei wird einfach ein Skript definiert, welches das aktuelle Datum und die aktuelle Uhrzeit anzeigt.

<?php
echo 'Es ist '.date('H:i').' Uhr und '.date('s').' Sekunden';
?>


Mehr ist tatsächlich nicht nötig, um eine Ajax-Anwendung unter Zuhilfenahme von jQuery und PHP zu erstellen.


So funktioniert Ajax

Bevor man mit Ajax arbeitet, ist es wichtig zu verstehen, wie diese Technik denn eigentlich genau funktioniert. Seht euch dazu an, was eigentlich passiert, wenn eine Webseite zum Browser gesendet wird. Wird z. B. ein Hyperlink angeklickt, löst das einen HTTP-Request aus. Ein solcher Request könnte folgendermaßen aussehen:

GET /seiten HTTP/1.1
Host: content.medienwerke.de
Connection: close
User-Agent: Medienwerke/1.1.3 (+http://medienwerke.de/)
Accept-Encoding: gzip
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
Cache-Control: no
Accept-Language: de,en;q=0.7,en-us;q=0.3
Referer: http://medienwerke.de/


Anhand eines solchen Requests kann man zunächst einmal sehr schön die exakte Adresse der aufgerufenen Seite ermitteln. Die Domain lautet im aktuellen Beispiel content.medienwerke.de. Das Unterverzeichnis, auf das zugegriffen werden soll, ist seiten. Somit ergibt sich folgende Adresse:

http://content.medienwerke.de/seiten

In einem Request werden noch weitere Informationen mitgesendet. Das sind u. a. die akzeptierten Sprachen und der Client. Die aufgerufene Seite antwortet mit einem Response-Kommando. Dieses Kommando setzt sich aus zwei Elementen zusammen:

• HTTP-Statuscode
• HTTP-Header

 
Der HTTP-Header setzt sich wiederum aus mehreren Feldern zusammen. Eine Antwort der aufgerufenen Webseite könnte folgendermaßen aussehen:

RESPONSE HTTP/1.1 200 OK
X-Powered-By: PHP/5.3
Content-Type: text/html; charset=UTF-8
Last-Modified: Thu, 02 Jun 2007 13:27:46 GMT
Cache-Control: max-age=0 private
Content-Encoding: gzip
Date: Tue, 08 Jun 2011 20:12:48 GMT
Server: lighttpd/1.4.3


Eine solche Antwort setzt sich üblicherweise aus einem Statuscode, dem Inhaltstyp und der letzten Aktualisierung zusammen.

Offensichtlich gibt es also eine Kommunikation zwischen Browser und Server, wenn eine neue Adresse angefordert wird. Das ist die klassische Variante. Ajax geht hier einen anderen Weg. Welcher das ist, wird im nächsten Teil dieser Ajax-Reihe gezeigt.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von franzg
  • 14.05.2017 - 02:15

Super! Vielen Dank!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.10.2016 - 13:06

Danke tolles Video !

Portrait von tobias12
  • 23.06.2015 - 20:54

Herzlichen Dank für die super Erklärung!!!!

Portrait von KowalewskajA
  • 18.08.2014 - 08:12

Vielen Dank ;), zur Auffrischung perfekt geeignet.

Portrait von dmtw2107
  • 16.11.2013 - 09:50

verständlich und toll erklärt danke für das tutorial

Portrait von Basark
  • 03.10.2013 - 23:19

Am besten hat mir HTTP-Request und Response gefallen.

Portrait von Tornin
  • 12.06.2012 - 02:02

Sehr gut und auch für Nichtprogrammierer erklärt. Besonderen Dank für die Hinweise auf Vor-und Nachteile.

Portrait von Swinq
  • 15.02.2012 - 15:00

Hättest meiner Meinung nach die Funktion erweitert erklären sollen und auch die Behandlungstypen gezeigt. (Success, etc..)

Portrait von wahke
  • 22.01.2012 - 15:31

vielen dank für dieses Tutorial

x
×
×