AJAX - Grundlagen

  • Hallo Leute,


    ich erkläre euch im folgende ein bisschen was zum Thema AJAX.


    Was ist AJAX?


    AJAX steht für: Asyncronous JavaScript and XML. Diese Technologie bezeichnet eine asynchrone Datenübertragung im Hintergrund, dass bedeutet das die
    Webseite zum Beispiel Inhalte nachträglich hinzufügen kann, ohne das die komplette Seite neu geladen werden muss.


    Visuell dargestellt würde das ganze nun so aussehen


    Durch AJAX werden Webseiten dynamischer und die meisten Besucher empfinden dies als angenehmer und schneller als eine normale Webseite, da kein neuladen erforderlich ist.
    Dadurch reduziert sich auch der Traffic, der entsteht wenn eine komplett neu Seite geladen wird.


    Welche Kenntnisse benötigt man?


    AJAX bietet verscheidenste möglichkeiten um mit dem Server zu kommunizieren.
    Durch die JavaScript-Bibliothek "jQuery" wird das arbeiten mit AJAX natürlich extrem vereinfacht, dennoch sollten gewisse Basis-Kenntnisse in folgende Sprachen haben

    • HTML
    • JavaScript


    Für die Anwendung mit der AJAX in diesem Beispiel kommuniziert kann man frei wählen zwischen folgende Sprachen (natürlich sind eine Vielzahl weiterer Sprachen möglich)

    • PHP
    • Python
    • Ruby
    • Java


    Letztere sind Sprachen die für die Verarbeitung auf der Server-Seite sehr wichtig. Diese Steuern nämlich die Anfragen die übertragen werden und liefern dementsprechend auch Daten zurück.


    Hello World mit AJAX


    Zunächst benötigen wir einen Webserver (für lokale Entwicklung sollte jedem XAMPP ja ein Begriff sein)


    Anschließend benötigen wir ein Grundgerüst basierend auf HTML



    Nun wollen wir, wenn jemand auf den Button drückt, den Text im h1 mithilfe von AJAX ersetzen.


    Dafür fügen wir nach Zeile 15 folgenden Code ein:



    Weitere Optionen beim Aufbau einer AJAX-Anfrage findet Ihr in der jQuery Dokumentation (http://api.jquery.com/jquery.ajax/)


    Mit $('button').click(function() - lösen wir die AJAX-Anfrage erst aus wenn der Button gedrückt wird.


    Anschließend gehe ich auf die einzelnen Einstellungen dieses Codes ein:

    • type: 'GET',
      • Legt die Art der Anfrage fest. Standardmäßig wird GET verwendet, es ist aber auch POST möglich. Weitere Arten wären z.B PUT oder DELETE, welche aber nicht von allen Browsern unterstützt werden.


    • url: 'ajax.php',
      • URL oder Datei, an die die Anfrage gesendet werden soll


    • data:{mode: getText},
      • Das sind die Daten die übertragen werden. In unserem Beispiel würde der AJAX Aufruf so aussehen: http://domain.tld/ajax?mode=getText wenn wir diesen im Browser aufrufen würden


    • dataType: 'text',
      • Setzt den Datentyp fest, den wir von unserer Anfrage zurückgeliefert bekommen. Mögliche Datentypen sind: XML, JSON, SCRIPT, HTML oder auch Text



    Nun folgt ein kommt der Punkt an dem die Daten versendet werden, sollte alles okay sein landen wir in dem "success"-Block und können dort die Variable "data" weiterverarbeiten.
    Dafür fügen wir nun im "success"-Block folgende Code ein:


    JavaScript
    1. // Inhalt mit dem h1 ersetzen
    2. $('h1').html(data);


    Man könnte auch das h1 über die ID direkt ansprechen (darauf hab ich aber bewusst verzichtet, da wir ja hier nur ein h1 haben), dass würde nun so aussehen:

    JavaScript
    1. // Inhalt mit dem h1 ersetzen
    2. $('#ajaxContent').html(data);


    Sollte ein Fehler auftreten wird eine Alert-Meldung erscheinen. Das passiert z.B wenn die URL nicht erreichbar ist oder ein Fehler im Skript vorliegt.


    Nun kommen wir zum Inhalt der ajax.php

    PHP
    1. <?php
    2. // Wenn der Paramet getText vorhanden ist soll er Hello World ausgeben
    3. if(!empty($_GET['mode']) && $_GET['mode'] == 'getText') {
    4. echo "Hello World";
    5. }
    6. ?>


    Unsere HTML-Datei sollte nun so aussehen:



    Wenn wir dies nun ausführen sollte nun folgendes passieren:



    Wenn alles funktioniert, haben wir unseren ersten AJAX-Request erfolgreich ausgeführt! 8)


    Im Anhang findet Ihr die Dateien nochmal gepackt.


    Bei Fragen oder Fehlern, schreibt mir einfach eine PN :thumbup:


    Gruß, Binär!

    Dateien

    • helloWorld.zip

      (30,67 kB, 38 Mal heruntergeladen, zuletzt: )

    2 Mal editiert, zuletzt von Binär () aus folgendem Grund: Ergänzungen

  • Sehr schön erklärt.


    Evtl solltest du darauf zurückkommen, das wenn man nicht so die Ahnung hat ziemliche Sicherheitslücken entstehen können.
    Was ist wenn ich die Post Variablen und die Url zum Script habe?


    Mit einem selbst gebastelten Script könnte ich Beispielsweise ziemlichen Schaden anrichten falls, ein Datenbankaustausch stattfindet.


    Evtl. kannst du ja noch erklären wie man sich dagegen schützen kann. Bzw. falls du willst kann ich da auch ein paar Möglichkeiten preisgeben.


  • Ich denke, ich werde darauf nochmal explizit in einem weiteren Teil eingehen, da es da ja eine doch schon eine Menge zu beachten gibt. :)

  • Ich denke, ich werde darauf nochmal explizit in einem weiteren Teil eingehen, da es da ja eine doch schon eine Menge zu beachten gibt.


    Sehr gut, habe mich in den letzen Wochen persönlich in Ajaxreqest ziemlich eingearbeitet, finde gut das ich nocheinmal eine Bestätigung bekomme das alles richtig ist ;)


    Vlt kannst dum im 3. Teil ja mal auf Fileuploads mittels Ajax usw eingehen, intressiert sicher viele Leute hier :)