Wie kann ich AJAX-Aufrufe nur mit Vanilla-JavaScript durchführen?

AJAX-Aufrufe ohne jQuery durchführen: Erkundung des Vanilla-JavaScript-Ansatzes

AJAX-Aufrufe ohne jQuery durchzuführen ist eine häufige Anforderung für Entwickler, die das nutzen möchten Leistungsfähigkeit der asynchronen Kommunikation, ohne auf umfangreiche Bibliotheken von Drittanbietern angewiesen zu sein. Hier finden Sie eine detaillierte Erläuterung, wie Sie dies mit einfachem JavaScript erreichen können:

Vanilla JavaScript . Instanziieren Sie zunächst ein XHR-Objekt mit dem neuen XMLHttpRequest()-Konstruktor.

Ereignisbehandlung und Rückruffunktionen

Als nächstes definieren Sie einen Ereignis-Listener, der den Status des XHR-Objekts überwacht (Bereitschaftszustand). Wenn der Status zu XMLHttpRequest.DONE (normalerweise 4) wechselt, signalisiert dies, dass die Anfrage abgeschlossen ist.

HTTP-Anforderungs- und Antwortverarbeitung

Die open()-Methode wird initialisiert eine HTTP-Anfrage, die die Anfragemethode (z. B. GET, POST), die Ziel-URL und angibt, ob die Anfrage asynchron sein soll (auf „true“ gesetzt für). AJAX). Die send()-Methode sendet die Anfrage.

Bewerten Sie nach Erhalt einer Antwort die Statuseigenschaft des XHR-Objekts. Ein Statuscode von 200 zeigt eine erfolgreiche Anfrage an, während andere Codes (z. B. 400 oder 500) auf Fehler hinweisen. Behandeln Sie diese Szenarien entsprechend.

Beispielcode

Der folgende Codeausschnitt zeigt, wie ein AJAX-Aufruf mit Vanilla-JavaScript erstellt und verarbeitet wird:

Fazit

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

Verstehen, wie man AJAX-Aufrufe ohne jQuery durchführt erweitert Ihren Werkzeugkasten als Entwickler. Durch die Nutzung des Vanilla-JavaScript-XHR-Objekts erhalten Sie die vollständige Kontrolle über den asynchronen Kommunikationsprozess und ermöglichen so eine flexible und effiziente Datenübertragung in Webanwendungen.

Das obige ist der detaillierte Inhalt vonWie kann ich AJAX-Aufrufe nur mit Vanilla-JavaScript durchführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!