Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

PHP-Workshop-DVD - Basics & Tricks

  • 12 Stunden Video-Training, 480 PDF-Seiten Tutorials
  • Basics, Formulare, Datenbanken, XML und Co.
  • 4 Stunden Bonusmaterial zum Webdesign (mit Photoshop
Jetzt informieren

Kommentare

  • Portrait von Swinq

    Swinq

    15.02.2012 - 15:00

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

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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.
vBulletin 0.047 • ZF-App 0.533 • Total 0.58