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 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 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.

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.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

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

  • Alternative Portrait von Mereel

    Mereel

    02.05.2012 - 20:31

    Interessant wäre noch gewesen, was der Code jetzt eigentlich im einzelnen macht. So muss ich leider sagen, konnte ich aus diesem Tut eigentlich nicht wirklich viel mitnehmen.

  • Alternative Portrait von mics

    mics

    14.04.2012 - 00:15

    Super tutorial. hab vorher ajax nie so richtig verstanden !!

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

Tutorial empfehlen

 

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


Wie die herkömmliche Kommunikation zwischen Server und Client funktioniert, habt ihr gesehen. Dank Ajax kann der Browser mittels HTTP mit dem Server kommunizieren. Auf diese Weise können HTTP-Requests an Event-Handler gebunden werden. Zusätzlich lassen sich die per HTTP erhaltenen Daten über die DOM-Schnittstelle in die aktuell angezeigte Webseite einbinden. Und genau das ist der riesige Vorteil von Ajax.

Bei "normalem" JavaScript ist es durch das DOM (Document Object Model) möglich, über die sogenannten Event-Handler auf Nutzereingaben zu reagieren und die aktuell angezeigte Webseite zu manipulieren. Typische Event-Handler bzw. Ereignisse können das Anklicken eines Elements (onclick) oder das Überfahren eines Elements mit dem Mauszeiger (mouseover) sein.

Auf diese Weise lassen sich beispielsweise Bilderwechsel realisieren, bei der ein angezeigtes Bild gegen ein anderes ausgetauscht wird, sobald man darüber mit dem Mauszeiger fährt. Realisiert wird das jedoch ausschließlich über die im Browser integrierte Script-Engine. Eine Verbindung zum Server besteht in diesen Fällen nicht. Ganz anders bei Ajax, durch das der Browser eben auch mit dem Webserver kommunizieren kann.


Ajax-Anwendungen entwickeln

Die eigentliche Ajax-Schnittstelle ist ein JavaScript-Objekt. Dieses Objekt kann HTTP-Requests senden und HTTP-Responses empfangen. Das Problem an diesem JavaScript-Objekt ist, dass – und das verwundert sicherlich nur wenig – es nicht alle Browser richtig oder überhaupt interpretieren.

Ursprünglich wurde das Objekt von Microsoft entwickelt. Dieses Objekt ist anfangs eine sogenannte Remote-Scripting-Komponente gewesen und wurde später als XML-HTTP-Objekt in Form einer ActiveX-Komponente implementiert. Seit Version 7 kennt der IE, so wie andere moderne Browser, ein unabhängiges XML-HTTP-Objekt.

 
Um auch den alten IE nicht von AjaxAnwendungen auszuschließen, sollte man immer folgende Browserweiche einsetzen, um die Ajax-Schnittstelle zu initialisieren:

var httpRequest = false;
   if(window.XMLHttpRequest) 
   // Für Mozilla, Safari, Opera, MS IE 7+
       httpRequest = new XMLHttpRequest();
   else if(window.ActiveXObject) { // Für MS IE 5, 6
       try {
           httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
       }
       catch (e) {
           try {
               httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
           }
           catch (e) {}
       }
   }


Innerhalb der Variablen httpRequest wird das XML-HTTP-Objekt gespeichert. Für die modernen Browser greift if(window.XMLHttpRequest). Darüber wird überprüft, ob das XML-HTTP-Objekt im JavaScript-Interpreter verfügbar ist. In diesem Fall wird über httpRequest = new XMLHttpRequest(); eine Instanz dieses Objekts innerhalb der Variablen httpRequest gespeichert.

Für den alten IE greift die else-if-Abfrage. Weitere Unterscheidungen zwischen den verschiedenen Browsern sind dann übrigens nicht mehr notwendig.


 

Eine dynamische Namensliste umsetzen

Ihr wisst nun, was es mit Ajax auf sich hat. Nun geht es an die Umsetzung einer ersten echten Ajax-Anwendung. (Das vorgestellte Hallo-Welt!-Beispiel ist zwar eine funktionierende Ajax-Anwendung gewesen, ihr praktischer Nutzen ist aber gering). Durch die folgenden Schritte wird eine dynamische Namensliste umgesetzt.

Dieses Beispiel lässt sich später beliebig auf andere Anwendungsfälle umstellen. Denkbar ist eine Suchmaschine ebenso wie jede andere Art von dynamischen Listen.

Ajax-Anwendungen zeichnen sich oft durch eine Kombination aus HTML, JavaScript und PHP aus. Diese Kombination wird auch im folgenden Beispiel verwendet. Bevor die Syntax des Beispiels vorgestellt wird, zunächst ein Blick auf das Ergebnis. Ruft man die Seite im Browser auf, ist an der erst einmal nichts Spektakuläres zu erkennen.

Bilder


 
Interessant wird das Ganze allerdings, wenn man anfängt, einen Namen in das Textfeld einzutragen. Angenommen, ihr wollt auf eurer Webseite eine dynamische Namensliste von Mitarbeitern eines Unternehmens anbieten. Das Besondere an dieser Liste ist deren Dynamik. Tippt man beispielsweise ein A ein, werden alle Mitarbeiter aufgeführt, deren Name mit A beginnt.

Bilder


 
Tippt man nun noch ein n ein, reduziert sich die Liste auf Namen, die mit der Zeichenfolge An beginnen.

Bilder


Eine solche Anwendung ist enorm praktisch, vor allem natürlich auch, weil die Seite vom Anwender nicht permanent neu geladen werden muss.

 
Zunächst muss die HTML-Datei angelegt werden. Diese besteht aus einem Formular und einem JavaScript-Bereich.

<!DOCTYPE HTML>
<html>
 <head>
 <script type="text/javascript">
 function namensAuswahl(str){
 var httpRequest = false;
 if (window.XMLHttpRequest) {
   httpRequest=new XMLHttpRequest();
   }
    else if(window.ActiveXObject) {
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {}
        }
    }
 httpRequest.onreadystatechange=function()
   {
   if (httpRequest.readyState==4 && httpRequest.status==200)
     {
     document.getElementById("feld").innerHTML=httpRequest.responseText;
     }
   }
 httpRequest.open("GET","liste.php?q="+str,true);
 httpRequest.send();
 }
 </script>
 </head>
 <body>
 <h2>Bitte den gewünschten Namen eingeben</h2>
 <form> 
 <input type="text" onkeyup="namensAuswahl(this.value)" />
 </form>
 <p>Übereinstimmungen: <span id="feld"></span></p>
 </body>
 </html>


Interessant ist in diesem Fall der span-Bereich. In dem wird später die dynamische Namensliste angezeigt. Ausgelöst wird die Funktion durch den Event-Handler onkeyup. Dieser Event-Handler tritt ein, wenn der Anwender eine Taste gedrückt und diese wieder losgelassen hat.

 
Der PHP-Code, der im Hintergrund arbeitet, sieht folgendermaßen aus:

<?php
 $a[]="Anja";
 $a[]="Anna";
 $a[]="Amalia";
 $a[]="Bea";
 $a[]="Beate";
 $a[]="Bonny";
 $a[]="Cornelia";
 $a[]="Conny";
 $a[]="Cora";
 $a[]="Dora";
 $a[]="Doris";
 $a[]="Dorothea";
 $a[]="Donna";
 $a[]="Emelie";
 $a[]="Elisabeth";
 $a[]="Franz";
 $a[]="Frieda";
 $a[]="Friedrich";
 $a[]="Florian";
 $a[]="Gerd";
 $a[]="Gerda";
 $a[]="Hans";
 $a[]="Horst";
 $a[]="Unni";
 $a[]="Inses";
 $a[]="Jan";
 $a[]="Jana";
 $a[]="Jens";
 $q=$_GET["q"];
 if (strlen($q) > 0)
   {
   $hint="";
   for($i=0; $i<count($a); $i++)
     {
     if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))){
       if ($hint==""){
         $hint=$a[$i];
         }
       else{
         $hint=$hint." , ".$a[$i];
         }
       }
     }
   }
 if ($hint == ""){
   $response="Keine Übereinstimmung gefunden";
   }
 else{
   $response=$hint;
   }
 echo $response;
 ?>


Innerhalb des Skripts wird zunächst einmal ein Array erzeugt. Dieses Array besteht aus einer Vielzahl an Namen. Anschließend überprüft das Skript, ob die übermittelte Zeichenkette mit einem der im Array vorhandenen Werte übereinstimmt. Ist das nicht der Fall, wird Keine Übereinstimmung gefunden ausgegeben.

Bilder


Werden ein oder mehrere passende Namen gefunden, werden diese als Response geliefert. Dieser Response wird anschließend am span-Platzhalter im HTML-Dokument angezeigt. Mehr ist tatsächlich nicht nötig, um eine voll funktionsfähige Ajax-Anwendung umzusetzen, die durchaus eine ansprechende Funktionalität bietet.

Dieses Beispiel zeigt noch einmal deutlich die möglichen Vorteile, die Ajax gegenüber anderen Technologien bieten kann. Denn bei herkömmlicher Client-Server-Kommunikation müsste das Formular, in das der Name eingetragen wurde, jeweils an den Server gesendet werden.
vBulletin 0.044 • ZF-App 0.448 • Total 0.492