JavaScript を使用して XML データにアクセスする-XML/RSS チュートリアル-php.cn

ホームページ

バックエンド開発

XML/RSS チュートリアル

JavaScript を使用して XML データにアクセスする

黄舟

Mar 03, 2017 pm 05:11 PM

Webブラウザソフトの中で、Internet Explorer（IE）は今や定番のソフトです。ご覧のとおり、さまざまなバージョンの Windows オペレーティングシステム (および他の多くのオペレーティングシステム) を実行しているほぼすべてのマシンが IE を使用しています。 Microsoft は、ActiveX コントロールを介した成熟した XML 処理テクノロジの実装に IE の機能を組み込みました。

この記事では、IE の ActiveX 機能を使用して XML ドキュメントにアクセスして解析し、Web サーファーが XML ドキュメントを操作できるようにする方法について説明します。

ウェブサーフィン
表 A に示すように、標準的な順次ドキュメントから始めます。このドキュメントには、Web サーファーが閲覧するための単純な連続データが含まれています。このデータを表示するだけでなく、インターネットをサーフィンする誰もが XML ドキュメントを参照するために使用できるシンプルなユーザーインターフェイスも提供します。

テーブル 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>

Web フォームを使用してこの XML ドキュメントにアクセスすると、SKU、価格、数量、各部品の小計、および注文の各オプションの説明が表示されます。私たちのフォームには、前方および後方の閲覧オプション用のボタンも含まれています。

Webページの構成
Webページの重要な部分は表を使って画面上に見やすく表示します。以下は、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>

テーブルの下に 2 つのボタンが含まれていることにご注意ください。これらのボタンは、getDataNext() 関数と getDataPrev() 関数を通じて前後のレコードを参照します。私たちは議論すべき問題を抱えています。

スクリプト
実際、Web ページの重要な部分はフォームではなく、フォームを制御するスクリプトです。スクリプトには 4 つの部分が含まれています。まず、XML ドキュメントをロードして Web ページを初期化します。 2 番目の部分は、次のレコードに移動することです。 3 番目のステップは、前のレコードに移動することです。 4 番目の部分は、XML ドキュメントから単一の値を抽出することです。表 B は、Web ページのコンテンツ全体を示しています。

テーブル 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 id="XML-nbsp-Order-nbsp-Database">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>

Run
この Web ページが渡され、スクリプトの初期化が実行されます。 order.xml ドキュメントが jsxml.html と同じパスにあることを確認する必要があります。

初期化部分は、新しい ActiveX オブジェクトを MSXML2.DOMDocument.3.0 オブジェクトタイプとしてインスタンス化し、スクリプトは order.xml ドキュメントをメモリに渡し、すべての /Order/Item ノードを選択します。 /Order/Item ノードを使用して、ドキュメントに既に含まれているオプションを識別します。

ドキュメント内の

標準には onLoad 属性があり、getDataNext() を呼び出して Web ページを初期化できるようになります。この機能を使用すると、XML ドキュメントから次の値を取得し、それをフォームに表示できます。特定のオプションにアクセスするには、単純なインデックスを使用します。

進む (>>) ボタンと戻る (

上記は、JavaScript を使用して XML データにアクセスする内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

RSSのデコード：コンテンツフィードのXML構造Apr 17, 2025 am 12:09 AM

RSSのXML構造には、1。XML宣言とRSSバージョン、2。チャネル（チャネル）、3。アイテムが含まれます。これらの部品はRSSファイルの基礎を形成し、XMLデータを解析することにより、ユーザーがコンテンツ情報を取得および処理できるようにします。

XMLベースのRSSフィードを解析して利用する方法Apr 16, 2025 am 12:05 AM

rssfeedsusexmltosyndicatecontent; parsingtheminvolvesloadingxml、navigating structure、and extractingdata.applicationsincludebuildingnewsaggretationsandtrackingpodcastepisodes。

RSSドキュメント：お気に入りのコンテンツをどのように配信するかApr 15, 2025 am 12:01 AM

RSSドキュメントは、XMLファイルを介してコンテンツの更新を公開することで機能し、ユーザーはRSSリーダーを介して通知をサブスクライブして受信します。 1。コンテンツパブリッシャーは、RSSドキュメントを作成および更新します。 2。RSSリーダーは、XMLファイルに定期的にアクセスして解析します。 3.ユーザーは、更新されたコンテンツを閲覧および読み取ります。使用例：TechCrunchのRSSフィードを購読するには、RSSリーダーへのリンクをコピーするだけです。

XMLを使用したフィードの構築：RSSの実践ガイドApr 14, 2025 am 12:17 AM

XMLを使用してRSSFeedを構築する手順は次のとおりです。1。ルート要素を作成してバージョンを設定します。 2.チャネル要素とその基本情報を追加します。 3.タイトル、リンク、説明を含むエントリ要素を追加します。 4. XML構造を文字列に変換して出力します。これらの手順を使用すると、有効なRSSFeedをゼロから作成し、リリース日や著者情報などの追加要素を追加することにより、機能を強化できます。

RSSドキュメントの作成：ステップバイステップのチュートリアルApr 13, 2025 am 12:10 AM

RSSドキュメントを作成する手順は次のとおりです。1。要素を含むルート要素を使用して、XML形式で書き込みます。 2。チャネル情報を説明する要素など。 3.要素を追加します。それぞれがコンテンツエントリを表します。 4.オプションで、コンテンツを濃縮するための要素を追加します。 5. XML形式が正しいことを確認し、オンラインツールを使用してパフォーマンスを最適化し、コンテンツを更新します。

RSSにおけるXMLの役割：シンジケートコンテンツの基礎Apr 12, 2025 am 12:17 AM

RSSにおけるXMLの中心的な役割は、標準化された柔軟なデータ形式を提供することです。 1. XMLの構造とマークアップ言語の特性により、データ交換とストレージに適しています。 2。RSSはXMLを使用して標準化された形式を作成して、コンテンツの共有を容易にします。 3. RSSでのXMLの適用には、タイトルやリリース日などのフィードコンテンツを定義する要素が含まれます。 4.利点には標準化とスケーラビリティが含まれ、課題にはドキュメントの冗長および厳密な構文要件が含まれます。 5.ベストプラクティスには、XMLの有効性の検証、シンプルな状態を維持し、CDATAの使用、定期的に更新されます。

XMLから読み取り可能なコンテンツまで：RSSフィードを分類しますApr 11, 2025 am 12:03 AM

rssfeedsarexmldocumentsusedforcontentaggregationanddistribution.totransformthemintoreadablecontent：1）parsethexmlusinglibrarieslibrarieslibrarieslibrarieslibrarieslibrarieslibrarieslibraries.2）heandlederentrssiversions andpotentialparsingerrors.3）変換された拡張型拡張型のfienderidederidrederidederidederidedionderiondiontiontiontiontiontiontiontiontional

JSONに基づいたRSSの代替品はありますか？Apr 10, 2025 am 09:31 AM

JSonFeedは、JSONベースのRSSの代替品であり、その利点のシンプルさと使いやすさがあります。 1）JSonFeedはJSON形式を使用しますが、これは簡単に生成して解析できます。 2）動的生成をサポートし、最新のWeb開発に適しています。 3）JSonFeedを使用すると、コンテンツ管理の効率とユーザーエクスペリエンスが向上する可能性があります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。