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
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<body>
<button>Get Data!</button>
<h1 id="ajaxContent">Irgendwas</h1>
<!-- jQuery -->
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// JavaScript Code
});
</script>
</body>
</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:
$('button').click(function() {
$.ajax({
// Legt die Übertragungsart fest
type: 'GET',
// Die Datei, die die Daten verarbeitet
url: 'ajax.php',
// Die Parameter die übergeben werden
data: {mode: 'getText'},
// Der Datentyp der zurückgeliefert wird
dataType: 'text',
success: function(data) {
// Inhalt mit dem h1 ersetzen
$('h1').html(data);
},
error: function(data) {
alert('Error AJAX Request');
}
});
});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:
// Inhalt mit dem h1 ersetzen
$('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:
// Inhalt mit dem h1 ersetzen
$('#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
// Wenn der Paramet getText vorhanden ist soll er Hello World ausgeben
if(!empty($_GET['mode']) && $_GET['mode'] == 'getText') {
echo "Hello World";
}
?>Unsere HTML-Datei sollte nun so aussehen:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<body>
<button>Get Data!</button>
<h1 id="ajaxContent">Irgendwas</h1>
<!-- jQuery -->
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// JavaScript Code
$('button').click(function() {
$.ajax({
// Legt die Übertragungsart fest
type: 'GET',
// Die Datei, die die Daten verarbeitet
url: 'ajax.php',
// Die Parameter die übergeben werden
data: {mode: 'getText'},
// Der Datentyp der zurückgeliefert wird
dataType: 'text',
success: function(data) {
// Inhalt mit dem h1 ersetzen
$('h1').html(data);
},
error: function(data) {
alert('Error AJAX Request');
}
});
});
});
</script>
</body>
</html>Wenn wir dies nun ausführen sollte nun folgendes passieren:
Wenn alles funktioniert, haben wir unseren ersten AJAX-Request erfolgreich ausgeführt! 
Im Anhang findet Ihr die Dateien nochmal gepackt.
Bei Fragen oder Fehlern, schreibt mir einfach eine PN 
Gruß, Binär!
