Führen Sie Ajax-Anrufe ohne jQuery durch
-
So tätigen Sie einen Ajax-Anruf mit
XMLHttpRequestin JavaScript -
So tätigen Sie einen Ajax-Anruf mit der
Fetch-API in JavaScript
In diesem Tutorial erfahren Sie, wie Sie einen AJAX-Aufruf in JavaScript durchführen, ohne dass eine externe Bibliothek erforderlich ist. Deshalb werden wir Ihnen Folgendes beibringen.
- So tätigen Sie einen AJAX-Aufruf mit
XMLHttpRequest - Wie man einen AJAX-Aufruf mit der
Fetch-API durchführt
So tätigen Sie einen Ajax-Anruf mit XMLHttpRequest in JavaScript
Der XMLHttpRequest ist ein Objekt in JavaScript, mit dem Sie einen AJAX-Aufruf tätigen können. Möglich wird dies durch eine Reihe von Methoden.
Zu diesen Methoden gehören:
XMLHTTPRequest.onreadystatechange()XMLHTTPRequest.readyStateXMLHTTPRequest.status()XMLHTTPRequest.open()XMLHTTPRequest.send()
Wenn diese Methoden richtig kombiniert werden, können Sie einen AJAX-Aufruf tätigen. Außerdem geben Ihnen die Objektnamen eine Vorstellung davon, was sie tun.
Zum Beispiel sendet XMLHTTPRequest.send() den AJAX-Aufruf, wenn Sie bereit sind. Das Folgende ist ein typischer Algorithmus für die Verwendung von XMLHttpRequest für einen AJAX-Aufruf.
-
Erstellen Sie ein neues
XMLHTTPRequest-Objekt -
Hängen Sie eine Funktion an
XMLHTTPRequest.onreadystatechange()an2.1 Die Funktion prüft, ob
XMLHTTPRequest.readyStateDONEzurückgibt
2.2 Prüfen SieXMLHTTPRequest.status()und handeln Sie entsprechend -
Öffnen Sie die AJAX-Verbindung
3.1 In diesem Teil geben Sie an, ob die Verbindung eine
GET- oderPOST-Anfrage sein soll. -
Senden Sie den AJAX-Aufruf
Je nachdem, was Sie erreichen möchten, haben Sie möglicherweise einen längeren Algorithmus. Für unser als nächstes beschriebenes Beispiel erfüllt der Algorithmus jedoch unseren Zweck.
Der Benutzer kann einen AJAX-Aufruf initiieren, indem er im Beispiel auf die HTML-Schaltfläche klickt. Der Aufruf ersetzt den Inhalt des Elements <main>.
<head>
<meta charset="utf-8">
<title>Plain AJAX Request</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #1a1a1a;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="button_container">
<button type="button" onclick="load_ajax_button()">CLICK ME</button>
</main>
<script>
function load_ajax_button() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
let button_container = document.getElementById("button_container")
button_container.innerHTML = this.responseText;
}
xhttp.open("GET", "ajax-button.html", true);
xhttp.send();
}
</script>
</body>
Ausgang:
So tätigen Sie einen Ajax-Anruf mit der Fetch-API in JavaScript
Die Fetch-API ist eine integrierte Funktion moderner Webbrowser, mit der Sie AJAX-Aufrufe tätigen können. Darüber hinaus können Sie die Fetch-API als moderne Version von XMLHttpRequest betrachten.
In unserem Code unten rufen wir beispielsweise jedes Mal, wenn Sie auf die Schaltfläche HTML klicken, ein zufälliges Bild von der API Picsum ab. In der Zwischenzeit funktioniert der Prozess wie folgt.
- Klicken Sie auf die Schaltfläche
HTML, um dieFetch-Anforderung an diePicsum-API zu initiieren. - Wir holen uns die
url-Eigenschaft aus derPicsum-API-Antwort. Das liegt daran, dass dieurldie Adresse des Zufallsbildes enthält. - Verwenden Sie als Bildquelle die Adresse aus der
Picsum-API. - Daher erhalten Sie jedes Mal, wenn Sie auf die Schaltfläche
HTMLklicken, ein neues zufälliges Bild.
<head>
<meta charset="utf-8">
<title>Fetch API</title>
<style>
main {
text-align: center;
margin: 0 auto;
max-width: 800px;
}
img {
max-width: 100%;
display: inline-block;
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<main>
<h2>A Simple Fetch API Example</h2>
<div class="img-container">
<img src="" id="random_image" width="300" height="300">
</div>
<button>Click Me for a Random Image</button>
</main>
<script>
let button = document.querySelector('button');
button.addEventListener('click', function () {
fetch('https://picsum.photos/200/300')
.then((response) => {
return response;
})
.then((image_source) => {
random_image.src = image_source['url'];
});
}, false);
</script>
</body>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn