Maison > Article > développement back-end > Accéder aux données XML à l'aide de JavaScript
Accéder aux données XML à l'aide de JavaScript
- 黄舟original
- 2017-03-03 17:11:581532parcourir
Parmi les logiciels de navigation Web, Internet Explorer (IE) est désormais un logiciel standard. Comme vous pouvez le constater, presque toutes les machines exécutant une version différente du système d'exploitation Windows (et de nombreux autres systèmes d'exploitation) utilisent IE. Microsoft a inclus la fonctionnalité d'IE dans la mise en œuvre d'une technologie de traitement XML mature via des contrôles ActiveX.
Dans cet article, nous décrirons comment utiliser la fonctionnalité ActiveX dans IE pour accéder et analyser des documents XML, permettant ainsi aux internautes de les manipuler.
Surfer sur Internet
Nous commençons par un document séquentiel standard, comme indiqué dans le tableau A. Ce document contient des données séquentielles simples destinées à la navigation des internautes. Non seulement pour afficher ces données, nous fournissons également une interface utilisateur simple que toute personne surfant sur Internet peut utiliser pour parcourir des documents XML.
Tableau A : order.xml
<?xml version="1.0" ?>
<Order>
<Account>9900234</Account>
<Item id="1">
<SKU>1234</SKU>
<PRicePer>5.95</PricePer>
<Quantity>100</Quantity>
<Subtotal>595.00</Subtotal>
<Description>Super Widget Clamp</Description>
</Item>
<Item id="2">
<SKU>6234</SKU>
<PricePer>22.00</PricePer>
<Quantity>10</Quantity>
<Subtotal>220.00</Subtotal>
<Description>Mighty Foobar Flange</Description>
</Item>
<Item id="3">
<SKU>9982</SKU>
<PricePer>2.50</PricePer>
<Quantity>1000</Quantity>
<Subtotal>2500.00</Subtotal>
<Description>Deluxe Doohickie</Description>
</Item>
<Item id="4">
<SKU>3256</SKU>
<PricePer>389.00</PricePer>
<Quantity>1</Quantity>
<Subtotal>389.00</Subtotal>
<Description>Muckalucket Bucket</Description>
</Item>
<NumberItems>1111</NumberItems>
<Total>3704.00</Total>
<OrderDate>07/07/2002</OrderDate>
<OrderNumber>8876</OrderNumber>
</Order>Nous utilisons un formulaire Web pour accéder à ce document XML. Ce formulaire affichera le SKU, le prix, la quantité et le prix de chacun. partie. Un sous-total et une description de chaque option de la séquence. Notre formulaire contient également des boutons pour les options de navigation avant et arrière.
Composition d'une page Web
La partie importante d'une page Web est le formulaire Nous utiliserons un tableau pour l'afficher à l'écran de manière facile à lire. Ce qui suit est un extrait de code pour afficher un tableau HTML :
<form>
<table border="0">
<tr><td>SKU</td><td><input type="text" name="SKU"></td></tr>
<tr><td>Price</td><td><input type="text" name="Price"></td></tr>
<tr><td>Quantity</td><td><input type="text" name="Quantity"></td></tr>
<tr><td>Total</td><td><input type="text" name="Total"></td></tr>
<tr><td>Description</td><td><input type="text"
name="Description"></td></tr>
</table>
<input type="button" value=" << " onClick="getDataPrev();"> <input
type="button" value=" >> " onClick="getDataNext();">
</form>Veuillez noter que nous avons inclus deux boutons sous le tableau, qui permettent de parcourir les boutons précédent et suivant via getDataNext() et getDataPrev( ) fonctions d'enregistrement, c'est aussi la question que nous souhaitons aborder.
Script
En fait, la partie essentielle de notre page Web n'est pas le formulaire, mais le script qui contrôle le formulaire. Notre script comprend quatre parties. Tout d'abord, nous initialisons la page Web en chargeant un document XML. La deuxième partie consiste à accéder à l'enregistrement suivant. La troisième étape consiste à accéder à l'enregistrement précédent. La quatrième partie consiste à extraire une valeur unique du document XML. Le tableau B montre l'intégralité du contenu de notre page Web.
Tableau B : jsxml.html
<html>
<head>
<script language="javaScript">
<!--
vari = -1;
varorderDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
orderDoc.load("order.xml");
var items = orderDoc.selectNodes("/Order/Item");
function getNode(doc, xpath) {
varretval = "";
var value = doc.selectSingleNode(xpath);
if (value) retval = value.text;
return retval;
}
function getDataNext() {
i++;
if (i > items.length - 1) i = 0;
document.forms[0].SKU.value = getNode(orderDoc, "/Order/Item[" +
i + "]/SKU");
document.forms[0].Price.value = getNode(orderDoc, "/Order/Item["
+ i + "]/PricePer");
document.forms[0].Quantity.value = getNode(orderDoc,
"/Order/Item[" + i + "]/Quantity");
document.forms[0].Total.value = getNode(orderDoc, "/Order/Item["
+ i + "]/Subtotal");
document.forms[0].Description.value = getNode(orderDoc,
"/Order/Item[" + i + "]/Description");
}
function getDataPrev() {
i--;
if (i < 0) i = items.length - 1;
document.forms[0].SKU.value = getNode(orderDoc, "/Order/Item[" +
i + "]/SKU");
document.forms[0].Price.value = getNode(orderDoc, "/Order/Item["
+ i + "]/PricePer");
document.forms[0].Quantity.value = getNode(orderDoc,
"/Order/Item[" + i + "]/Quantity");
document.forms[0].Total.value = getNode(orderDoc, "/Order/Item["
+ i + "]/Subtotal");
document.forms[0].Description.value = getNode(orderDoc,
"/Order/Item[" + i + "]/Description");
}
// -->
</script>
</head>
<body onload="getDataNext()">
<h2>XML Order Database</h2>
<form>
<table border="0">
<tr><td>SKU</td><td><input type="text" name="SKU"></td></tr>
<tr><td>Price</td><td><input type="text" name="Price"></td></tr>
<tr><td>Quantity</td><td><input type="text"
name="Quantity"></td></tr>
<tr><td>Total</td><td><input type="text" name="Total"></td></tr>
<tr><td>Description</td><td><input type="text"
name="Description"></td></tr>
</table>
<input type="button" value=" << " onClick="getDataPrev();"> <input
type="button" value=" >> " onClick="getDataNext();">
</form>
</body>
</html>Exécuter
Cette page Web passera l'initialisation et exécutera le script. Vous devez vous assurer que le document order.xml se trouve dans le même chemin que jsxml.html.
La partie initialisation instancie un nouvel objet ActiveX en tant que type d'objet MSXML2.DOMDocument.3.0, puis le script transmet le document order.xml en mémoire et sélectionne tous les nœuds /Order/Item. Nous utilisons le nœud /Order/Item pour identifier les options que le document contient déjà.
La norme 6c04bd5ca3fcae76e30b72ad730ca86d dans le document a un attribut onLoad, qui permet à la page Web de s'initialiser en appelant getDataNext(). Cette fonctionnalité peut être utilisée pour obtenir la valeur suivante d'un document XML et l'afficher sous un formulaire. Nous utilisons un simple index pour accéder à des options spécifiques.
Les boutons avant (>>) et arrière (<<) utilisent le même mécanisme. Tout d'abord, appelez getDataNext() ou getDataPrev() en réponse à l'événement onClick. Ces deux fonctions utilisent des méthodes logiques pour éviter d'accéder à nos enregistrements en dehors de la portée du document.
Ce qui précède est le contenu de l'utilisation de JavaScript pour accéder aux données XML. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !