Comment convertir des données XML en objets en javascript

Dans le développement front-end, l'interaction des données avec le serveur est souvent impliquée. Les données renvoyées par le serveur sont souvent transmises au format XML. Par conséquent, il est très important que les développeurs front-end maîtrisent les compétences nécessaires pour convertir des données XML en objets.

Cet article expliquera comment utiliser JavaScript pour convertir des données XML en objets, dans l'espoir de fournir une aide aux développeurs front-end lors du traitement des données XML.

1. Données au format XML

XML (Extensible Markup Language) est un format d'échange de données couramment utilisé. Il a une bonne lisibilité et évolutivité, il est donc largement utilisé dans les applications Web. Voici un exemple de fichier XML simple :

<?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>

Dans le fichier XML ci-dessus, il contient des informations sur deux livres, chaque livre comprend le titre, l'auteur et le prix.

2. Étapes de base pour convertir du XML en objets

Les étapes de base pour convertir du XML en objets sont les suivantes :

1. Obtenir des données XML
2. Analyser les données XML
3. Enregistrer l'objet analysé dans un objet JavaScript

Ci-dessous Nous vous expliquerons comment mettre en œuvre ces étapes étape par étape.

3. Obtenir des données XML

Dans cet exemple, nous utilisons la méthode ajax de jQuery pour obtenir des données XML. Le code est le suivant :

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

Dans le code ci-dessus, nous utilisons la méthode $.ajax pour obtenir les données XML. Cette méthode nécessite de passer un objet JavaScript contenant quelques options. Parmi eux, l'attribut type spécifie le type de requête (ici, GET), l'attribut url spécifie l'adresse URL de la requête et l'attribut dataType spécifie le type de données de la requête.

Lorsque la requête réussit, la fonction de réussite sera appelée et transmettra un objet JavaScript contenant des données XML. Dans cette fonction, nous utilisons la méthode console.log pour afficher des données XML sur la console.

4. Analyser les données XML

Après avoir obtenu les données XML, nous devons les analyser. Dans jQuery, vous pouvez utiliser la méthode $.parseXML pour analyser les données XML. Cette méthode accepte une chaîne comme paramètre et renvoie un nouvel objet document XML. Le code est le suivant :

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

Dans le code ci-dessus, nous transmettons d'abord les données XML obtenues en tant que paramètre dans la méthode $.parseXML pour obtenir un nouvel objet document XML. Ensuite, nous convertissons l'objet document en objet jQuery. Cette opération vise principalement à nous faciliter l'utilisation des méthodes jQuery pour manipuler les données XML.

5. Enregistrez l'objet analysé dans l'objet JavaScript

Enfin, nous enregistrons l'objet analysé dans l'objet JavaScript. Ici, nous définissons un tableau books pour stocker des informations sur chaque livre. Le code est le suivant :

$.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);
    }
});

Dans le code ci-dessus, nous utilisons la méthode $xml.find pour rechercher chaque livre dans le XML et utilisons la méthode .each pour parcourir chaque livre. Dans la boucle de chaque livre, nous utilisons la méthode .find de jQuery pour obtenir le titre, l'auteur et le prix et les enregistrer dans un objet livre. Enfin, nous ajoutons cet objet book au tableau books.

Après avoir obtenu le tableau books, nous pouvons l'utiliser pour afficher des données, effectuer des opérations ultérieures, etc.

Résumé

Cet article explique comment utiliser JavaScript pour convertir des données XML en objets. Cette compétence est très importante pour les développeurs front-end, car les pages front-end doivent souvent obtenir des données XML du serveur pour être affichées et exploitées.

Dans le développement réel, nous pouvons rencontrer des structures de données XML complexes ou devoir convertir des données XML en objets JavaScript plus complexes. À l’heure actuelle, nous devons analyser la structure des données XML plus en détail et utiliser des techniques plus avancées pour réaliser ces opérations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!