Banner The Way of Art in Photoshop

Tutorialbeschreibung

PHP - Teil 42 - Ajax (Teil 2): Eine dynamische Namensliste nach dem Vorbild von Google Suggest

PHP - Teil 42 - Ajax (Teil 2): Eine dynamische Namensliste nach dem Vorbild von Google Suggest

Im ersten Video-Training dieser Ajax-Reihe wurde anhand eines Beispiels gezeigt, wie Ajax prinzipiell funktioniert. Dabei habt ihr auch gesehen, wie die klassische Server-Client-Kommunikation aussieht. Jetzt geht es darum, auf welche Art sich diese Kommunikation bei Ajax darstellt. Anschließend wird gezeigt, wie sich eine Anwendung umsetzen lässt, die von ihrer Funktionalität an das bekannte Google Suggest erinnert. Konkret geht es dabei um eine dynamische Namensliste, in der die Anzeige der Namen automatisch angepasst wird, je nachdem, welche Buchstaben gerade in ein Textfeld eingetragen werden.


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.
 


 
 
 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();
 }
 
 
 
 

Bitte den gewünschten Namen eingeben

Übereinstimmungen:



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:
 
 0)
   {
   $hint="";
   for($i=0; $i


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.

DVD-Werbung

Passend zum Inhalt empfehlen wir: HTML & CSS für Einsteiger

Die unendlichen Weiten des Internets – endlich auf einen Klick. Wir bringen dir bei, wie du im Netz den doppelten Bogen rauskriegst. Starte zu einem 9-stündigen Entdeckungskurs mit besonders zielführendem Basis-Know-how und reife zum sicheren Webentwickler im digitalen Überall. Der Einstieg in die Welt von HTML & CSS kann so einfach sein und dieses Training rüstet dich mit dem nötigen Handwerkszeug:

  • Alle wesentlichen Grundlagen zu HTML & CSS erklärt
  • Lerne Webentwicklung von der Pike auf und baue deine Kenntnisse zielsicher aus
  • Optimaler Praxisbezug: Die Umsetzung eines Layouts für einen Steuerberater

Wenn die digitale World weit weg ist: Erforsche sie! Wenn du zum Ende dieses Trainings deine erste eigene Website codest, wirst du ordentlich stolz auf dich sein!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare

Portrait von KowalewskajA
  • 18.08.2014 - 08:11

Vielen Dank ;), perfekt zum Auffrischen.

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:17

Ganz nett. Vielen Dank.

Portrait von 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
  • 14.04.2012 - 00:15

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


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
© 2002 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×