Definieren Sie Ihre eigene Ajax-Funktion mit JavaScript

Da die von nativen JS initiierten Netzwerkanforderungen in Form von Abfragesträgern an den Server übermittelt werden, ist es für Benutzer bequemer, Parameter in Form von Objekten einzureichen, so Um jedes Array zu teilen und die formale Parameter zu empfangen, um die vom Benutzer übergebenen Konfigurationsobjekt -Parameter zu erhalten, erstellen Sie die übergebenen Parameter an die Funktionen, die die Parameter verarbeiten, und geben Sie die Parameter. Kleinbuchstaben werden durch die Touppercase-Methode in Großbuchstaben konvertiert, wenn die Bedingung erfüllt ist, die offene Methode aufrufen, die entsprechenden Werte eingeben und die Sendungsfunktion aufrufen. Rufen Sie abschließend das Abhörereignis auf.

Funktion Daten auflösen(Daten) {
    var arr = [];
    für (var k in Daten) {
        var str = k + "=" + Daten[k];
        arr.push(str)
    }
    returniere arr.join("&")
}
Funktion itheima(Optionen) {
    var xhr = neue XMLHttpRequest();
    var qs = resolveData(Optionen.Daten);
    wenn (Optionen.Methode.toUpperCase() === "GET") {
        xhr.open(Optionen.Methode, Optionen.URL + "?" + qs);
        xhr.senden();
    } sonst wenn(options.method.toUpperCase() === "POST"){
        xhr.open(Optionen.Methode, Optionen.URL)
        xhr.setRequestHeader("Inhaltstyp", "Anwendung/x-www-form-urlencoded")
        xhr.senden(qs)
    }
    xhr.onreadystatechange = Funktion () {
        wenn (xhr.readyState === 4 && xhr.status === 200) {
            var Ergebnis = JSON.parse(xhr.responseText)
            Optionen.Erfolg(Ergebnis);
        }
    }
}

Testen Sie abschließend, ob es erfolgreich ist ~

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Testschnittstelle</title>
<script src="itheima.js"></script>
</Kopf>
<Text>
    <Skript>
        itheima({
            Methode:"GET",
            URL: „http://www.liulongbin.top:3006/api/getbooks“,
            Daten:{
                Ich würde: 1
            },
            Erfolg:Funktion(res){
                konsole.log(res);
            }
        });
    </Skript>
</body>
</html>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:

Zusammenfassung der Verwendung von Ajax zum Festlegen und Abrufen benutzerdefinierter Header-Informationen in js
So implementieren Sie die auf JavaScript basierende Methode zur Hintergrunddefinition von Ajax-Aufrufen
ASP.NET MVC verwendet AJAX, um die JsonResult-Methode aufzurufen und benutzerdefinierte Fehlerinformationen zurückzugeben
Detaillierte Erklärung der benutzerdefinierten JavaScript-Funktionen
Definition der rekursiven Funktion in JavaScript und Analyse von Anwendungsbeispielen
Zusammenfassung einiger gängiger Methoden zum Definieren von Funktionen in JS
Detailliertes Beispiel einer JavaScript-Funktionsdefinitionsmethode

<<: Flex-Layout ermöglicht adaptive Seiten (Syntax und Beispiele)

>>: Der Unterschied zwischen HTML, XHTML und XML

So verbinden Sie eine virtuelle Linux-Maschine mit WLAN

Definieren Sie Ihre eigene Ajax-Funktion mit JavaScript

Zusammenfassen

So verbinden Sie eine virtuelle Linux-Maschine mit WLAN

Eine kurze Diskussion über die richtige Haltung der Tomcat-Speicherkonfiguration

Lösung für das Problem, dass beim Hinzufügen eines Tomcat-Containers zu Docker kein Zugriff auf die Homepage möglich ist

CSS3 erzielt einen unendlichen Scroll-/Karusselleffekt der Liste

SQL-Anweisungen in MySQL verwenden keine Indizes

Lösen Sie das Problem, dass der Container nach dem Docker-Lauf „Beendet (0)“ anzeigt.

JS implementiert einen einfachen TodoList-Effekt (Notizblock)

So geben Sie Flash-Seiten über Überprüfungsmethoden in Website-Standards frei

Einführung in die Verwendung der unbestimmten Eigenschaft des Kontrollkästchens

CSS3-Randeffekte

Artikel empfehlen

Detaillierte Erläuterung des Kapselungsbeispiels für Netzwerkanforderungen

Die Elementbaumsteuerung integriert ein Dropdown-Menü mit Symbolen (Baum+Dropdown+Eingabe)

Das WeChat-Applet erkennt den Effekt des Wischens nach links zum Löschen von Listenelementen

Deutsch: Ein Link-Tag vervollständigt href im IE automatisch

Detaillierte Schritte zum Einrichten des Hosts Nginx + Docker WordPress Mysql

Beispiele für dl-, dt- und dd-Listenbezeichnungen

Vue realisiert die Palastgitterrotationslotterie

So entwerfen und optimieren Sie MySQL-Indizes

calc(), um einen Vollbild-Hintergrundinhalt mit fester Breite zu erreichen

So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst

Die MySQL-Partitionstabelle ist nach Monaten klassifiziert

So leiten Sie eine PC-Adresse in Vue an eine Mobiladresse um

Javascript-Countdown-Eingabeaufforderungsfeld

Analyse der Prinzipien von Docker-Containern

Detaillierte Erklärung der Docker-Datenspeichervolumes