ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptの記事を備えたサーバー側のXMLを読み取り、表示 - パート1

JavaScriptの記事を備えたサーバー側のXMLを読み取り、表示 - パート1

Christopher Nolan
Christopher Nolanオリジナル
2025-03-10 00:53:09746ブラウズ

XMLは、Webサービスで重要な役割を果たし、複数のクライアント言語とサーバー言語と組み合わせて強力な役割を果たすことができます。この記事では、XMLとクライアントJavaScriptを使用して、XMLファイルコンテンツ、子どもの要素へのアクセス、操作要素などを表示する方法について説明します。

ブラウザの互換性の問題

クライアント言語では、ブラウザの互換性が大きな問題です。 XMLとJavaScriptの組み合わせの場合、問題は主にXMLです。すべてのブラウザがXMLドキュメントの解析をサポートしているわけではありません。

次のコード例は、IE6に基づいています。 XMLをサポートしていないブラウザはこれらのコードを読み取ることができないため、これらのブラウザでXMLファイルを表示すると、ブラウザはすべてのタグを無視します。

xmlファイルの例

以下は、会社の従業員のデータと売り上げを示すサンプルXMLファイルです。

JavaScript
<?xml version="1.0" ?>
<company>
  <employee age="19" sex="M">Premshree Pillai</employee>
  <employee age="24" sex="M">Kumar Singh</employee>
  <employee age="21" sex="M">Ranjit Kapoor</employee>
  <turnover>
    <year>100,000</year>
    <year>140,000</year>
    <year>200,000</year>
  </turnover>
</company>
を使用してxmlファイルデータを操作します
xmlファイルをロード

次のJavaScriptコードを介してXMLファイルをロードできます。

実際、関数の最後の2行はXMLファイルをロードするのに十分です。最初の2行では、その後XMLファイルデータを操作するために使用するJavaScript関数が、非初期化されたオブジェクトの操作を実行しないことを保証します。したがって、verify()function:

を呼び出します
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

function loadXML(xmlFile) {
  xmlDoc.async = "false";
  xmlDoc.onreadystatechange = verify;
  xmlDoc.load(xmlFile);
  xmlObj = xmlDoc.documentElement;
}

XMLファイルをロードできるようになりました:

function verify() {
  // 0 对象未初始化
  // 1 对象正在加载数据
  // 2 对象已加载数据
  // 3 可以处理对象中的数据
  // 4 对象完全初始化
  if (xmlDoc.readyState != 4) {
    return false;
  }
}

XMLファイルのコンテンツを表示loadXML('xml_file.xml');

を使用して、XMLファイルのコンテンツ全体を表示します。 XMLファイル全体が、適切なインデントを備えた警告ボックスにあるように表示されます。

sube Elements and nodes alert(xmlObj.xml);はトップレベルのタグであり、他のすべてのタグはその下にあります。これらのタグは子要素と呼ばれます。このXMLファイルは、フォルダーツリーの形でグラフィカルに表現できます。

上記のXMLファイルでは、トップレベルのタグには4つの子要素があります。

子要素の数(通常はすべての言語で)は0(ゼロ)から始まります。 <company></company>タグの下には3つの子要素があります。

Read and Display Server-Side XML with JavaScript Article - Part 1

属性を使用して、タグが持っている子要素の数を見つけることができます。したがって、<company></company>タグ(ここで4)の子要素の数は

を介して見つけることができます。

<turnover></turnover> タグ(ここに3)の子要素の数は、

を介して見つけることができます。

childNodes.length <company></company> xmlObj.childNodes.lengthはの3番目の子要素であるため、

を使用します。

<turnover></turnover>xmlObj.childNodes(3).childNodes.length

子供の要素をテスト

childNodes(3) <turnover></turnover><company></company>を使用して、特定のノードチャイルド要素に子供の要素があるかどうかをテストできます。 したがって、、

はtrueを返します。

タグには子要素がないため、falseがfalseを返します。

タグ名を取得します

childNodes(i).tagNameを使用して、子要素のラベル名を取得できます。したがって、xmlObj.tagNameは「会社」を返します。 xmlObj.childNodes(0).tagNameは「従業員」を返します。 xmlObj.childNodes(3).childNodes(0).tagNameは「年」を返します。

タグの内容を表示

XMLファイルでは、最初の<employee></employee>タグのコンテンツは「Premshree Pillai」です。この値をxmlObj.childNodes(0).firstChild.textを使用して取得できます。

<?xml version="1.0" ?>
<company>
  <employee age="19" sex="M">Premshree Pillai</employee>
  <employee age="24" sex="M">Kumar Singh</employee>
  <employee age="21" sex="M">Ranjit Kapoor</employee>
  <turnover>
    <year>100,000</year>
    <year>140,000</year>
    <year>200,000</year>
  </turnover>
</company>

プロパティ

xmlファイルでは、<employee></employee>タグには3つのプロパティがあります。プロパティは、childNodes(i).getAttribute("AttributeName")を使用してアクセスできます。したがって、xmlObj.childNodes(0).getAttribute("id")は「001」を返します。 xmlObj.childNodes(1).getAttribute("age")は「24」を返します。 xmlObj.childNodes(2).getAttribute("sex")は「f」を返します。

...(FAQパーツを含む後続のコンテンツは、同じ方法で書き換え、元の意味を維持し、文言と文の構造を調整できます。)

以上がJavaScriptの記事を備えたサーバー側のXMLを読み取り、表示 - パート1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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