Hi,
in diesem kleinen Tutorial geht's darum, wie man eine Anfrage an den Server schickt, ohne die Seite neuzuladen. Praktische Sache, weil es vor allem Zeit spart und dem Benutzer bei ranzigen Seiten die ohnehin schon ewig brauchen bis sie geladen sind Nerven sparen.
Vorbereitung Einige Voraussetzungen sollten erfüllt sein, um ab hier weiter zu machen - keine Sorge, nix schlimmes:
<ul> <li>Ich gehe davon aus, dass du bereits soviel Erfahrung hast, um eine Grund-HTML-Seite zu basteln (html, head, body)</li> <li>Einbinden von jQuery Zum Beispiel so: <span class="lang:php decode:true crayon-inline "><script src='https://code.jquery.com/jquery-3.1.0.min.js'></script></span> (Die aktuelle Version gibt's hier: <a href="https://jquery.com/download/">https://jquery.com/download/</a>)</li> </ul>
Wie ich schon sagte, AjAX ist dazu da, um Daten asynchron vom Browser zum Server zu übertragen. Wenn du z.B. ein HTML-Formular ausfüllst und die Daten über den Submit-Button absendest, wird ja normalerweise eine Seite aufgerufen (<form method="POST" action="ziel_datei.php">...</form> ). Auf dieser Seite wartet dann auch schon ein PHP-Code, der die mit POST übergebenen Daten entgegennimmt, verarbeitet / validiert und dann was auch immer damit macht. Soweit der Vorgang, den du ja bereits kennst.
Bei AjAX hingegen erfolgt das alles ohne Neuladen der Seite - via JavaScript wird die Anfrage im Hintergrund ausgeführt. Die Ausgabe (sofern es eine gibt) kann dann in einem beliebigen HTML-Container (<div class="zB_hier_ajax_ausgabe"></div> ) ausgegeben werden.
Jetzt aber genug mit dem theoretischen Geplauder. Du willst Code sehen. Im Folgenden habe ich einen kleinen Einzeiler vorbereitet - es gibt hier 2 Dateien, eine index.php und eine ajax.php Datei. In der index.php baust du kurzerhand ein HTML-Grundgerüst und bindest jQuery ein. Dann erstellen wir einen Hyperlink und quetschen in das OnClick-Event unseren Code für die AjAX-Anfrage:
index.php
<pre class="lang:php decode:true" title="index.php"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AjAX Praxisbeispiel</title> <script type='text/javascript' src='https://code.jquery.com/jquery-3.1.0.min.js'></script> <style> *{ font-family: "courier new"; } .ausgabe{ margin: 8px; padding: 8px; } </style> </head> <body> <main> <a class='btn btn-default btn-sm' href='javascript:;' onCLick="$.ajax({url: './ajax.php', type: 'GET', success: function(data){$('.ausgabe').html(data);}});">AjAX-Request ausführen</a> <div class='ausgabe'> Hier steht was, nachdem du auf den Button klickst </div> </main> </body> </html></pre>
Interessant hier ist nund eben Zeile 23 - da wird im onClick der Code ausgeführt, um via AjAX eine Datei (ajax.php) aufzurufen und die Ausgabe der Datei (also alles was mit echo, print, var_dump usw. ausgegeben wird) in einem div mit der Klasse "ausgabe" darzustellen.
Zuerst wird wie du siehst die URL angegeben, die aufgerufen werden soll, sowie die Übertragungsmethode - hier GET, also per URL. Außerdem wird noch festgelegt, was passieren soll, wenn die Anfrage erfolgreich war - in dem Fall also die Ausgabe im Container darstellen. (Weiterführende Details und Einzelheiten zu $.ajax findest du in der jQuery-Dokumentation. Da ist genau dokumentiert was für Funktionen es noch gibt.)
Und in die ajax.php kommt jetzt erstmal nur irgendwas das ausgegeben wird. Und zwar erfolgt die Ausgabe im in der index.php in Zeile 24 erstellten div-Container.
ajax.php
<pre class="lang:php decode:true " title="ajax.php"><?php echo date("d.m.Y H:i:s") . ": AjAX-Request wurde erfolgreich ausgeführt :)"; ?></pre>
Mit diesen 2 Dateien hast du jetzt ein super Beispiel, wie so ein AjAX-Request funktioniert. Ohne AjAX würde man quasi auf das onClick verzichten und im href-Attribut auf die ajax.php verlinken - geht auch, sieht aber hässlich aus und ist weniger komfortabel und flexibel.
Das war's auch schon. Hast du Fragen dazu? Dann hinterlasse mir einen Kommentar, ich antworte auch bestimmt ;)
Grüße Marius
Kommentare
Kommentar schreiben