Sidr
PSD-Tutorials.de

Lieber Gast,

wir freuen uns, dass du zu den großen Geheimnissen der kreativen Anziehungskraft vorstoßen willst. Der Schlüssel dazu liegt in unserem Mitgliederbereich. Schließ auch du dich uns an und werde Teil einer aufgeschlossenen Community voller Ideen und Illusionen. Wie das geht, ist kein Geheimnis:

Jetzt kostenlos registrieren!

Klipp und klar im Vorteil: Du und wir und viel, viel mehr

So leicht es ist, mitten in unserer Community zu sein, so schnell eröffnet sich dir das gesamte Drumherum. Verschaff dir schon jetzt einen Überblick:

  • Hoher Wirkungsgrad in den Disziplinen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Gestaltung mit Cinema 4D & Co. …
  • Über 3.500 Tutorials – inklusive druckbaren PDF-Dateien, teils mit entsprechenden Arbeitsmaterialien
  • Mehr als 2.700 Video-Trainings – direkt gestreamt und per Download
  • Rund 2.400 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co.
  • Lebendiges Forum mit blitzschnellen Antworten, die ins Schwarze treffen
  • Sicherheit für deine Daten. Alles bleibt unter uns und wird nicht weitergegeben! Deine Mitgliedschaft kannst du jederzeit problemlos löschen.
  • Hol dir zusammen mit unserem Newsletter gratis das neue Selection-Training – ein digitales und umfangreiches Menü mit nahrhaftem Kraftfutter zu all unseren Lernprogrammen.

Schnupperkurse für Gäste

Du willst uns schon gern mal besuchen, deine Jacke aber noch anbehalten? Teste uns ruhig. Wir zeigen dir in ausgesuchten Tutorials und Video-Trainings, dass es sich lohnt, dein Stirnrunzeln – und deine Jacke – abzulegen.

Jetzt kostenlos registrieren!

Passend zum Inhalt empfehlen wir:

HTML5- & CSS3-Video-Training

Du willst umhauen? Nichts einfacher als das! Schaffe klare Seitenverhältnisse – mit einer Box wie ein Sparringspartner. Dein schlagkräftiger Video-Trainer zeigt dir in 8 Stunden, wo der Hammer für deine stärkste Website hängt. Lerne Webdesign und Webentwicklung anhand von HTML5 & CSS3.

  • Alle wesentlichen Grundelemente von HTML5 & CSS3 erklärt.
  • Optimaler Praxisbezug: Die Umsetzung von drei modernen Weblayouts in HTML5 & CSS3 von A-Z.
  • Praxis-Tipps & hilfreiche Tools zur Webentwicklung.

Für perfekte Webeffekte das richtige Know-how: Mit dem Wissen der Profis erstellst du selbst ansprechende Webseiten und setzt diese in den neuen Webstandards um.

Jetzt informieren

Kommentare

  • Portrait von KowalewskajA

    KowalewskajA

    18.08.2014 - 08:11

    Vielen Dank ;), perfekt zum Auffrischen.

  • Portrait von dmtw2107

    dmtw2107

    16.11.2013 - 09:50

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

  • Portrait von Basark

    Basark

    03.10.2013 - 23:17

    Ganz nett. Vielen Dank.

  • 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.

  • 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.

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.
xenforo 0.005 ZF-App 0.192 Total 0.197