So ehe wir dir hier weiterhin erzählen wie simpel solche Anfragen sind, hier ein paar Worte
HTTP ist ein Protokol um Daten zu übertragen.
Wikipedia gibt dir einen Umfanreichen Einblick.
Für dich ist folgendes wichtig: Es gibt sogenannte HTTP-Methoden, diese beschreiben im groben den Zweck der Anfrage.
Für dich sollten die Methoden GET und POST interessant sein. In der Theorie kannst du auch nur mit GET arbeiten, aber wir wollen das hier ja gleich richtig machen, oder?!
Stark vereinfacht kann man sagen, dass du GET benutzt um Daten zu erhalten und POST um den Server gewisse Daten zu geben.
Als drittes solltes etwas über
HTTP Status Codes wissen.
Wichtig sind
- 200: Alles ist okay
- 401: Unauthentifiziert, der Server weiß nicht wer du bist
- 403: Unauthorisiert, der Server weiß wer du bist, verbietet dir aber was zu machen
- 404: Angefragte URL nicht gefunden/gibt es nicht
- 500: Beim Server ist etwas fehlgeschlagen, z. B. fehler im Code
So mit dem Wissen sollten AJAX-Anfragen kein Problem mehr sein.
Damit es einfach für dich wird, nehmen ich jQuery für die Anfragen. Natürlich ist das ganze auch ohne jQuery möglich, aber um einiges Umständlicher. Außerdem solltest du dann nach XHR (xmlHttpRequest) und nicht mehr nach AJAX suchen, da findet man mehr. Ich benutze dafür nicht direkt die AJAX-Funktion von jQuery, sondern benutzerfreundlichere Methoden, die intern auf die AJAX-Funktion zurück greift.
Fangen wir mit GET an. Hier wird letztendlich einfach eine URL aufgerufen.
Javascript:
$.get("http://link-zur-seite.de/die/angefragte/resource", function (data, status) {
// some fancy shit :)
})
In der Funktion verarbeitest du die Antwort und reagierst auf sie. In dem data-Object findest du das, was der Server zurück gegeben hat und im status-Object erhälst du den HTTP-Status.
Und weiter mit Post, hier sieht die Anfrage etwas anders aus. Neben der URL werden ebenfalls Daten im JSON-Format mitgegeben.
Javascript:
var content = {
foo: "bar"
}
$.post("http://link-zur-seite.de/die/angefragte/resource", content, function (data, status) {
// some fancy shit
})
In der Funktion verarbeitest du, genauso wie bei GET die Antwort.
Die Funktionen die du in diesem Beispiel siehst haben zwei Besonderheiten.
Zum einen handelt es sich um sogenannte
anonyme Funktionen, dass sind Funktionen, die keinen Namen haben und somit nicht referenziert werden können. Sie werden nur durchgereicht und in anderen Funktionen ausgeführt, in denen sie bekannt sind.
Die zweite Besonderheit ist, dass diese Funktionen einen weiteren Namen haben, der die Bedeutung und Funktionalität beschreibt:
Callback-Function. Das sind Funktionen die übergeben werden und immer ausgeführt werden, wenn ein bestimmtes Event zutrifft, in unserem Fall die Antwort des Servers.
Sooo, aber das Problem ist, dass das nur die Lösung für den Client ist... Zu einem Client gehört immer auch ein Server.
Hier hast du jetzt mehrere Möglichkeiten, dir einen zu schreiben.
Du könntest z. B. mit einem Apache und PHP eine Lösung bauen, oder mit NodeJS.
Ebenso kannst du mit Java und Spring Boot da sehr schnell etwas aufsetzen.
Aber da stellt sich nunmal die Frage, was bzw ob du schon was verwendest.
Diese kurze Anleitung sollte dir nur zeigen, wie simpel solche Anfragen im Client gelöst werden können. Daher gibt es noch viele Punkte die unvollständig und offen sind.
Bei weiteren Fragen findest du hier genug Leute die dir gerne helfen
