suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  Greifen Sie mit JavaScript auf XML-Daten zu

Greifen Sie mit JavaScript auf XML-Daten zu

黄舟
黄舟Original
2017-03-03 17:11:581535Durchsuche

Unter den Webbrowsern ist der Internet Explorer (IE) mittlerweile eine Standardsoftware. Wie Sie sehen, verwendet fast jeder Computer, auf dem eine andere Version des Windows-Betriebssystems (und vieler anderer Betriebssysteme) ausgeführt wird, den IE. Microsoft hat die Funktionalität des IE in die Implementierung ausgereifter XML-Verarbeitungstechnologie über ActiveX-Steuerelemente einbezogen.

In diesem Artikel beschreiben wir, wie man die ActiveX-Funktionalität im IE verwendet, um auf XML-Dokumente zuzugreifen und diese zu analysieren, sodass Web-Surfer sie manipulieren können.

Surfen im Internet
Wir beginnen mit einem standardmäßigen sequentiellen Dokument, wie in Tabelle A gezeigt. Dieses Dokument enthält einfache sequentielle Daten zum Surfen durch Websurfer. Um diese Daten nicht nur anzuzeigen, stellen wir auch eine einfache Benutzeroberfläche bereit, mit der jeder, der im Internet surft, XML-Dokumente durchsuchen kann.

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

Wir verwenden ein Webformular, um auf dieses XML-Dokument zuzugreifen. In diesem Formular werden die SKU, der Preis, die Menge und der Preis angezeigt Teil. Eine Zwischensumme und eine Beschreibung jeder Option in der Sequenz. Unser Formular enthält auch Schaltflächen für Vorwärts- und Rückwärtsblättern.

Aufbau einer Webseite
Der wichtige Teil einer Webseite ist das Formular. Wir werden eine Tabelle verwenden, um sie auf dem Bildschirm gut lesbar darzustellen. Das Folgende ist ein Codeausschnitt zum Anzeigen einer HTML-Tabelle: 

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

Bitte beachten Sie, dass wir unterhalb der Tabelle zwei Schaltflächen eingefügt haben, die zum Durchsuchen der vorherigen und nächsten Schaltflächen über getDataNext() und getDataPrev( ) Datensätze, das ist auch das Thema, das wir diskutieren wollen.

Skript
Tatsächlich ist der wesentliche Teil unserer Webseite nicht das Formular, sondern das Skript, das das Formular steuert. In unserem Skript sind vier Teile enthalten. Zuerst initialisieren wir die Webseite, indem wir ein XML-Dokument laden. Der zweite Teil besteht darin, zum nächsten Datensatz zu navigieren. Der dritte Schritt besteht darin, zum vorherigen Datensatz zu navigieren. Der vierte Teil besteht darin, einen einzelnen Wert aus dem XML-Dokument zu extrahieren. Tabelle B zeigt den gesamten Inhalt unserer Webseite.

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

Ausführen
Diese Webseite übergibt die Initialisierung und führt das Skript aus. Sie müssen sicherstellen, dass sich das Dokument order.xml im selben Pfad wie jsxml.html befindet.

Der Initialisierungsteil instanziiert ein neues ActiveX-Objekt als Objekttyp MSXML2.DOMDocument.3.0, und dann übergibt das Skript das order.xml-Dokument in den Speicher und wählt alle /Order/Item-Knoten aus. Wir verwenden den Knoten /Order/Item, um die Optionen zu identifizieren, die das Dokument bereits enthält.

Der 6c04bd5ca3fcae76e30b72ad730ca86d-Standard im Dokument verfügt über ein onLoad-Attribut, das die Initialisierung der Webseite durch den Aufruf von getDataNext() ermöglicht. Mit dieser Funktion kann der nächste Wert aus einem XML-Dokument abgerufen und in einem Formular angezeigt werden. Wir verwenden einen einfachen Index, um auf bestimmte Optionen zuzugreifen.

Sowohl die Vorwärts- (>>) als auch die Rückwärtstaste (<<) verwenden denselben Mechanismus. Rufen Sie zunächst getDataNext() oder getDataPrev() als Reaktion auf das onClick-Ereignis auf. Diese beiden Funktionen verwenden logische Methoden, um den Zugriff auf unsere Datensätze außerhalb des Dokumentbereichs zu vermeiden.

Das Obige ist der Inhalt der Verwendung von JavaScript für den Zugriff auf XML-Daten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Anwendung von XML in der SprachsyntheseNächster Artikel：Anwendung von XML in der Sprachsynthese

In Verbindung stehende Artikel

Mehr sehen