AJAX - Grundlagen

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    Es gibt Neuigkeiten! Ab sofort könnt ihr dem Donators Club auf Lebenszeit beitreten.
    Weitere Infos im Thema Donator's Club ab heute wieder verfügbar!

    • 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

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <title>Hello World</title>
      5. <meta charset="utf-8" />
      6. <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
      7. </head>
      8. <body>
      9. <button>Get Data!</button>
      10. <h1 id="ajaxContent">Irgendwas</h1>
      11. <!-- jQuery -->
      12. <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
      13. <script type="text/javascript">
      14. $(document).ready(function() {
      15. // JavaScript Code
      16. });
      17. </script>
      18. </body>
      19. </html>
      Alles anzeigen


      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:

      JavaScript-Quellcode

      1. $('button').click(function() {
      2. $.ajax({
      3. // Legt die Übertragungsart fest
      4. type: 'GET',
      5. // Die Datei, die die Daten verarbeitet
      6. url: 'ajax.php',
      7. // Die Parameter die übergeben werden
      8. data: {mode: 'getText'},
      9. // Der Datentyp der zurückgeliefert wird
      10. dataType: 'text',
      11. success: function(data) {
      12. // Inhalt mit dem h1 ersetzen
      13. $('h1').html(data);
      14. },
      15. error: function(data) {
      16. alert('Error AJAX Request');
      17. }
      18. });
      19. });
      Alles anzeigen


      Weitere Optionen beim Aufbau einer AJAX-Anfrage findet Ihr in der jQuery Dokumentation (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: 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-Quellcode

      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-Quellcode

      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-Quellcode

      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:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <title>Hello World</title>
      5. <meta charset="utf-8" />
      6. <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
      7. </head>
      8. <body>
      9. <button>Get Data!</button>
      10. <h1 id="ajaxContent">Irgendwas</h1>
      11. <!-- jQuery -->
      12. <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
      13. <script type="text/javascript">
      14. $(document).ready(function() {
      15. // JavaScript Code
      16. $('button').click(function() {
      17. $.ajax({
      18. // Legt die Übertragungsart fest
      19. type: 'GET',
      20. // Die Datei, die die Daten verarbeitet
      21. url: 'ajax.php',
      22. // Die Parameter die übergeben werden
      23. data: {mode: 'getText'},
      24. // Der Datentyp der zurückgeliefert wird
      25. dataType: 'text',
      26. success: function(data) {
      27. // Inhalt mit dem h1 ersetzen
      28. $('h1').html(data);
      29. },
      30. error: function(data) {
      31. alert('Error AJAX Request');
      32. }
      33. });
      34. });
      35. });
      36. </script>
      37. </body>
      38. </html>
      Alles anzeigen


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

      Dieser Beitrag wurde bereits 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.
    • NicoWiss schrieb:

      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. :)
    • Binär schrieb:

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