Suchen
Inside Wiki
Nützliche Links




 
phpforum.de bei Facebook
 
phpforum.de bei Twitter
 

Zurück   PHP Forum: phpforum.de > phpforum.de Wiki > phpforum.de Wiki

PHP Wiki Dieses Wiki sammelt Lösungen, zu Problemen, welche immer wieder im Forum auftauchen.

 
 
Artikel-Optionen Ansicht
  #1  

Standard Ajax

 

Inhalte

Was ist Ajax?


Ajax steht für "Asynchronous JavaScript and XML" und ermöglicht das Absenden eines HTTP-Requests ohne das Neuladen der gesamten Seite. Normalerweise (ohne Ajax) findet erst dann eine HTTP-Anfrage statt, wenn der Benutzer eine neue Seite lädt (indem er auf einen Link klickt oder eine neue URL eingibt).

Da der asynchrone HTTP-Request clientseitig angestoßen wird, kann er mit JavaScript realisiert werden. Dafür stellt die Sprache das XMLHttpRequest-Objekt zur Verfügung, welche den asynchronen HTTP-Request anstößt.

Hier kann mit dem Webserver kommuniziert werden, etwa mit einem PHP-Script, dass die Daten des asynchronen HTTP-Requests verarbeiten und eine Antwort zurücksenden kann. Das clientseitige JavaScript kann diese Antwort wiederum empfangen und auswerten. In welcher Form der Webserver (bzw. das PHP-Script) die Antwort verfasst, bleibt dem Entwickler selbst überlassen - dies könnte beispielsweise HTML, XML oder JSON sein. Wichtig ist, dass sich beide Seiten über diese Art der Daten einig sind.

Was ist Ajax nicht?


Ajax ersetzt nicht (oder revolutioniert) die "traditionelle" Kommunikation zwischen Browser und Webserver. Ajax ist auch keine eigene Programmiersprache.

Verbreitung der Ajax-Technologie


Viele bekannte Webanwendungen setzten auf Ajax, zum Beispiel Google Mail oder interaktive Kartensysteme. Moderne Shopsysteme sind in der Lage, Preise "on-the-fly" zu aktualisieren oder einen Artikel in den Warenkorb zu legen, ohne die Seite neu laden zu müssen. Mit Ajax ist auch das sogenannte "Auto-Complete" realisiert, bei dem in einem Suchfeld eine automatische Wortvervollständigung stattfindet. Eine "Lightbox", die ihren Inhalt dynamisch einfügt, benutzt ebenfalls Ajax.

Hintergrundinformationen


Die Möglichkeit, einen HTTP-Request asynchron abzusetzen, wurde bereits dem Internet Explorer 4 Ende des 20. Jahrhunderts mitgegeben, jedoch nicht in der Form, wie es heute üblich ist: Ajax wurde erst 2005 in dem Artikel Ajax: A New Approach to Web Applications beschrieben. Alle modernen Browser können Ajax-Anfragen durchführen, sogar der Internet Explorer 5 ist dazu dank eines sog. ActiveX-Objekt in der Lage.

Vorteile von Ajax

  • Der Browser muss nicht die gesamte Seite neu laden, sondern nur der Inhalt, der tatsächlich benötigt wird. Dies spart Ressourcen und Zeit.
  • Die Benutzerfreundlichkeit steigt, da der Inhalt des Browserfensters bestehen bleibt (in dem z.B. an anderer Stelle Formulareingaben getätigt wurden).
  • Es ist kein Plugin oder Tool eines Drittanbieters nötig, alle modernen Browser liefern das nötige Werkzeug gleich mit.

Wie nutze ich Ajax?


Das Benutzen des XMLHttpRequest-Objektes ist an und für sich recht einfach, problematisch dagegen ist jedoch die Kompatibiltät zu älternen Browsern. Auf Wikipedia steht beschrieben, wie man sich das Objekt beschafft und gleichzeitig eine Abwärtskompatibilität bis zum IE 5 garantiert:

PHP Quellcode:
try {
    // Moderne Browser und > IE6
    xmlHttp = new XMLHttpRequest();
} catch(e) {
    try {
        // IE 6
        xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        try {
            // IE 5
            xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            xmlHttp  = null;
        }
    }
}


Um es zusammenfassend zu sagen, könnten wir nun mit dem Objekt xmlHttp einen Request starten und die Antwort des Webservers auswerten. Im Internet gibt es viele Beispiele dafür, Google hilft sicher gerne.

Ajax ohne Sorgen mit JavaScript-Frameworks


Da viele Browser JavaScript unterschiedlich stark unterstützen, bietet es sich an, eines der vielen JavaScript Frameworks zu nutzen, welches die Arbeit der Kompatibiltätsanpassung bereits mit einer durchdachte nAPI übernimmt. Ein bekanntes JavaScript-Framework ist jQuery, eine Implementation könnte so aussehen:

PHP Quellcode:
$.ajax({
    // Das Anfrageziel
    url: "formular_verarbeitung.php",

    // Übertragungsmethode (POST, GET, PUT etc)
    type: "GET",

    // die zu übertragenden Daten
    data: $("form").serialize(),

    // Das PHP-Script antwortet
    success: function (response) {
        // hat formular_verarbeitung.php die Antwort "1" gesendet?
        if (response == 1) {
            alert("Daten erfolgreich übertragen");

        // formular_verarbeitung.php gab etwas anderes zurück
        } else {
            alert("Die Daten konnten vom PHP-Skript nicht verarbeitet werden");
        }
    }
});


jQuery liefert viele Methoden mit, die bereits auf unterschiedliche Ajax-Anfragen spezialisiert sind.

Nachteile und Gefahren von Ajax



Abhängigkeit von JavaScript


Da ein Ajax-Request mit JavaScript angestoßen wird, muss der Programmierer darauf achten, dass die Seite auch noch dann benutzbar ist, wenn der Besucher JavaScript deaktiviert hat. Wie diese Barrierefreiheit realisiert werden kann, lest ihr in diesem sehr guten Artikel von Smashing Magazine.

Fehlende Information für den Besucher


Der Ajax-Request läuft im Hintergrund ab, ohne Zutun des Entwicklers bemerkt der Besucher nichts. Er könnte bei längeren Antworten auch davon ausgehen, dass sein Klick wirkungslos blieb und geht somit von einer Fehlfunktion aus.

Das Benutzen der "Zurück"-Schaltfläche


Auf den obigen Punkt baut auch das Problem auf, dass der Besucher fälschlicherweise nach einer Ajax-Anfrage den "Zurück"-Button des Browsers nutzt. Das führt dazu, dass die vorherige Seite geladen wird, was nicht dem Stand der vorherigen Ajax-Ausgabe entsprechen muss. Für diese Problematik gibt es aber Plugings für JavaScript-Frameworks.


Mitwirkende: dsentker
Erstellt von dsentker, 18.07.2011 am 11:42
Zuletzt bearbeitet von dsentker, 18.07.2011 am 11:42
0 Kommentare , 5020 Betrachtungen

Dieser Text steht unter der GNU-Lizenz für freie Dokumentation


 

Lesezeichen

Artikel-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.

Gehe zu
Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
ajax, kein ajax oder doch ganz anders? mohazzab JavaScript 3 13.06.2011 13:30
Div refresh/reload - Ajax in Ajax ChhrisMunich JavaScript 1 10.07.2010 15:11
AJAX-enthaltendes Formular auch nur mit AJAX abschickbar? UnkiDUnki JavaScript 2 11.08.2009 12:23
Ist es ein AJAX? mcqueen JavaScript 2 14.12.2008 15:26
ajax hamid JavaScript 6 16.05.2006 22:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:09 Uhr.


Powered by vBulletin® Version 3.8.8 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Powered by NuWiki v1.3 RC1 Copyright ©2006-2007, NuHit, LLC