So konvertieren Sie XML-Daten in Objekte in Javascript

Bei der Frontend-Entwicklung ist häufig die Dateninteraktion mit dem Server beteiligt. Die vom Server zurückgegebenen Daten werden häufig im XML-Format übertragen. Daher ist es für Frontend-Entwickler sehr wichtig, die Fähigkeiten zum Konvertieren von XML-Daten in Objekte zu beherrschen.

In diesem Artikel wird die Verwendung von JavaScript zum Konvertieren von XML-Daten in Objekte vorgestellt, in der Hoffnung, Front-End-Entwicklern bei der Verarbeitung von XML-Daten zu helfen.

1. Daten im XML-Format

XML (Extensible Markup Language) ist ein häufig verwendetes Datenaustauschformat. Es ist gut lesbar und skalierbar und wird daher häufig in Webanwendungen verwendet. Hier ist ein Beispiel einer einfachen XML-Datei:

<?xml version="1.0" encoding="UTF-8"?>
<books>
  <book>
    <name>JavaScript高级程序设计</name>
    <author>Nicholas C. Zakas</author>
    <price>¥89.90</price>
  </book>
  <book>
    <name>JavaScript权威指南</name>
    <author>David Flanagan</author>
    <price>¥99.00</price>
  </book>
</books>

In der obigen XML-Datei enthält sie Informationen zu zwei Büchern, jedes Buch enthält den Titel, den Autor und den Preis.

2. Grundlegende Schritte zum Konvertieren von XML in Objekte

Die grundlegenden Schritte zum Konvertieren von XML in Objekte sind wie folgt:

1. XML-Daten abrufen
2. XML-Daten analysieren
3. Das analysierte Objekt in einem JavaScript-Objekt speichern

Unten Wir erklären Ihnen Schritt für Schritt, wie Sie diese Schritte umsetzen.

3. XML-Daten abrufen

In diesem Beispiel verwenden wir die Ajax-Methode von jQuery, um XML-Daten abzurufen. Der Code lautet wie folgt:

$.ajax({
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function(xml) {
        console.log(xml);
    }
});

Im obigen Code verwenden wir die Methode $.ajax, um die XML-Daten abzurufen. Diese Methode erfordert die Übergabe eines JavaScript-Objekts, das einige Optionen enthält. Unter diesen gibt das Typattribut den Typ der Anfrage an (hier GET), das URL-Attribut gibt die URL-Adresse der Anfrage an und das dataType-Attribut gibt den Datentyp der Anfrage an.

Wenn die Anfrage erfolgreich ist, wird die Erfolgsfunktion aufgerufen und ein JavaScript-Objekt mit XML-Daten übergeben. In dieser Funktion verwenden wir die Methode console.log, um XML-Daten an die Konsole auszugeben.

4. XML-Daten analysieren

Nachdem wir die XML-Daten erhalten haben, müssen wir sie analysieren. In jQuery können Sie die Methode $.parseXML verwenden, um XML-Daten zu analysieren. Diese Methode akzeptiert einen String als Parameter und gibt ein neues XML-Dokumentobjekt zurück. Der Code lautet wie folgt:

$.ajax({
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function(xml) {
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc);
    }
});

Im obigen Code übergeben wir zunächst die erhaltenen XML-Daten als Parameter an die Methode $.parseXML, um ein neues XML-Dokumentobjekt zu erhalten. Anschließend konvertieren wir das Dokumentobjekt in ein jQuery-Objekt. Dieser Vorgang dient hauptsächlich dazu, uns die Verwendung von jQuery-Methoden zum Bearbeiten von XML-Daten zu erleichtern.

5. Speichern Sie das analysierte Objekt im JavaScript-Objekt.

Abschließend speichern wir das analysierte Objekt im JavaScript-Objekt. Hier definieren wir ein Bücher-Array, um Informationen zu jedem Buch zu speichern. Der Code lautet wie folgt:

$.ajax({
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function(xml) {
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc),
            books = [];

        $xml.find("book").each(function() {
            var book = {
                name: $(this).find("name").text(),
                author: $(this).find("author").text(),
                price: $(this).find("price").text()
            };
            books.push(book);
        });
        console.log(books);
    }
});

Im obigen Code verwenden wir die Methode $xml.find, um jedes Buch im XML zu finden, und verwenden die Methode .each, um jedes Buch zu durchlaufen. Innerhalb der Schleife jedes Buchs verwenden wir die .find-Methode von jQuery, um Titel, Autor und Preis abzurufen und sie in einem Buchobjekt zu speichern. Schließlich fügen wir dieses Buchobjekt zum Bücherarray hinzu.

Nachdem wir das Bücher-Array erhalten haben, können wir es zum Anzeigen von Daten, zum Durchführen nachfolgender Vorgänge usw. verwenden.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit JavaScript XML-Daten in Objekte konvertieren. Diese Fähigkeit ist für Front-End-Entwickler sehr wichtig, da Front-End-Seiten für die Anzeige und den Betrieb häufig XML-Daten vom Server abrufen müssen.

In der tatsächlichen Entwicklung stoßen wir möglicherweise auf komplexe XML-Datenstrukturen oder müssen XML-Daten in komplexere JavaScript-Objekte konvertieren. Zu diesem Zeitpunkt müssen wir die Struktur von XML-Daten detaillierter analysieren und fortschrittlichere Techniken verwenden, um diese Vorgänge abzuschließen.

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie XML-Daten in Objekte in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!