AJAX-Operationen
AJAX-Operationen
AJAX-Operationen ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Einführung
Hallo,
in dieser Lektion lernen Sie, mithilfe der jQuery-AJAX-Methoden mit einem entfernten Server zu interagieren.
AJAX (Asynchronous JavaScript And XML) ist eine Technologie, die Daten asynchron mit dem Server austauscht, ohne die Webseite zu aktualisieren.
Die Benutzererfahrung wird dadurch verbessert, insbesondere weil Daten übertragen werden können, ohne die Seite zu aktualisieren.
AJAX-Beispiel
Insbesondere die weltweit beliebtesten Webanwendungen wie Facebook, Gmail und YouTube verwenden die AJAX-Technologie häufig.
Statt AJAX als eine neue Technologie zu betrachten, können Sie es sich als eine Methode vorstellen, die mithilfe von JavaScript eine asynchrone Datenübertragung zwischen Server und Client ermöglicht.
Sehen wir uns nun ein Beispiel für eine Funktion mit AJAX an.
Sie haben beispielsweise ein Video auf youtube.com angesehen und auf den Gefällt-mir-Button geklickt. In diesem Fall wird unser Like-Ereignis im Hintergrund an die YouTube-Server übertragen, bevor die YouTube-Seite aktualisiert wird.
Dies ist ein Vorgang, der mithilfe einer AJAX-Anfrage ausgeführt wird.
AJAX-Beispiel
Sehen wir uns ein Beispiel für AJAX-Anfragen an.
Unten sehen Sie den Code für eine mit AJAX erstellte GET-Anfrage an https://api.coddykit.com/api/coddy-test.
Dieser Code verwendet Vanilla JavaScript und ist, wie Sie sehen können, syntaktisch etwas anspruchsvoll.
<div id="result"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
//we are writing the AJAX request response
//to div element that has result id
var result = document.getElementById('result');
result.innerHTML = JSON.stringify(this.responseText);
}
};
xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
xhttp.send();
</script>Warnung
Wie bereits erwähnt, ist jQuery eine Bibliothek zur DOM-Manipulation und stellt außerdem Methoden bereit, die AJAX-Operationen erleichtern.
AJAX-Methode
Mit jQuery steht uns eine recht einfache Methode zur Verwaltung unserer AJAX-Anfragen zur Verfügung.
Mithilfe der ajax()-Methode können wir im Web häufig verwendete HTTP-Methoden wie get, post oder put problemlos einsetzen.
Die Syntax der AJAX-Methode lautet wie folgt:
$.ajax ({
url: 'remote URL'.
data: 'Data that we will send',
method: 'HTTP Method - Default GET',
success: 'Here, we should define function that work when Ajax get success result',
dataType: 'Interaction data type'
});
Sehen wir uns ein Beispiel an
<div id="result"></div>
<script>
$.ajax ({
url: 'https://api.coddykit.com/api/coddy-test',
success: function(data){
$('#result').text(JSON.stringify(data));
}
});
</script>Ajax-GET-Anfrage
Ajax-GET-Anfrage
Verbessern wir nun unser Beispiel.
Im folgenden Beispiel wurde eine Ajax-Anfrage an die URL (https://api.coddykit.com/api/coddy-test) gesendet.
Wenn keine HTTP-Methode angegeben ist, wird standardmäßig eine GET-Anfrage ausgeführt.
const https = require('https');
function ajax(url) {
const callbacks = { success: [], fail: [], always: [] };
const req = https.get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
callbacks.success.forEach(cb => cb(data));
callbacks.always.forEach(cb => cb());
});
});
req.on('error', (err) => {
callbacks.fail.forEach(cb => cb(err));
callbacks.always.forEach(cb => cb());
});
return {
done: function(cb) { callbacks.success.push(cb); return this; },
fail: function(cb) { callbacks.fail.push(cb); return this; },
always: function(cb) { callbacks.always.push(cb); return this; }
};
}
var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
.done(function() {
//success callback
/*
If our get request is sent to
the server with success (HTTP 2xx),
this function is called.
*/
})
.fail(function() {
/* This function works
if the AJAX request fails.
*/
})
.always(function() {
/*
This function works in all cases when
the AJAX request is
successful or unsuccessful.
*/
});get-Methode
$.get()-Methode und GET-Anfrage
Mit der Methode $.get() können wir eine HTTP-GET-Anfrage an unsere Server senden.
Diese Methode wird von jQuery bereitgestellt und ermöglicht es uns, eine GET-Anfrage mit kürzerem und einfacherem Code als mit Vanilla JavaScript zu senden.
Sehen wir uns ein Beispiel an und beachten Sie, wie viel kürzer der Code ist.
<div id="result"></div>
<script>
$.get("https://api.coddykit.com/api/coddy-test",
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Post-Methode
$.post()-Methode und POST-Anfrage
Mit der $.post()-Methode können wir eine HTTP-POST-Anfrage an unsere Server senden.
Erstellen wir ein Beispiel und sehen uns an, wie kurz der Code dadurch wird.
POST-Anfragen werden wir häufig verwenden, insbesondere beim Übermitteln von Webformularen an den Server.
<div id="result"></div>
<script>
$.post("https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Put-Methode
PUT-Anfrage
Mit der Methode $.put() können wir eine HTTP-PUT-Anfrage an unsere Server senden.
Sehen wir uns ein Beispiel an.
<div id="result"></div>
<script>
$.ajax({
method:'PUT',
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Löschmethode
DELETE-Anfrage
Mit der Methode $.delete() können wir eine HTTP-DELETE-Anfrage an unsere Server senden.
Sehen wir uns ein Beispiel an
<div id="result"></div>
<script>
$.ajax({
method:'DELETE',
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Link
Beispiele und ausführliche Informationen zu AJAX-Methoden finden Sie über den unten stehenden Link.
Herzlichen Glückwunsch
Herzlichen Glückwunsch 🎉
In diesem Abschnitt haben wir AJAX mit jQuery kennengelernt.
Vielen Dank, dass Sie am Kurs „jQuery für Anfänger“ teilgenommen haben 🎉🎉🎉
Sie können nun die Prüfung ablegen und ein Zertifikat für den Kurs „jQuery-Tutorial für Anfänger“ erhalten 🚀🚀🚀
Häufig gestellte Fragen
Ist die Lektion „AJAX-Operationen“ kostenlos?
Ja — der vollständige Text von „AJAX-Operationen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „AJAX-Operationen“?
AJAX-Operationen Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „AJAX-Operationen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.