[クラシック]MozillaでXMLとJavaScriptを使う・・・

[クラシック]MozillaでXMLとJavaScriptを使う・・・
この間、不思議な瞬間にランダムな画像をロードするJavaScript効果を作りました.画像情報はXMLファイルに入れる必要があります.Flashでやったことがありますが、actionscriptにXMLファイルをロードするのはまだ慣れていますが、JavaScriptでXMLをロードするのは初めてです.IEでActiveXObjextオブジェクトでできるのは知っていたが、Mozillaの下でjsでXMLをロードする方法が分からず、googleがこの文章に着いたので、とても詳しい!
本文の住所:http://www.sitepoint.com/article/xml-javascript-mozilla
私の記事「JavaScriptでサーバー側のXMLファイルを読み取り表示する」では、マイクロソフトのInternet ExplorerでJavaScriptを使用してXMLファイルを操作することについて議論しました.では、MozillaでJavaScriptを使用してXMLファイルのデータを読み取り、使用する方法を説明します.ラベル(March注意:tag)の値、ラベルの属性値などを表示する方法を示します.
これからは、Netscape 6.xや7.xなど、Mozillaについては特に言及しません(March注:もちろんFirefox、Flockも含まれています).ただし、Internet Explorer(MSIEまたはIE)については特に説明します.
XMLファイルの例
私は前の文章と同じXMLファイルを使います.そうすれば、そのXMLファイルを知っている人が理解しやすいようになります.次のXMLファイルを見てください.

				
						<?xml version="1.0" ?> 
<company>
 <employee id="001" sex="M" age="20">Premshree Pillai</employee>
 <employee id="002" sex="M" age="24">Kumar Singh</employee>
 <employee id="003" sex="M" age="21">Ranjit Kapoor<turnover>
 <year id="2000">100,000</year>
 <year id="2001">140,000</year>
 <year id="2002">200,000</year>
 </turnover>
</company>
				
		

ご覧のように、上記のXMLファイルには、<employee>の値(またはノード値)で従業員名が格納され、その他の従業員番号(id)、性別(sex)、年齢(age)などの情報が同じラベル(<employee>)id、sexおよびage属性に格納されている会社員の詳細が表示されています.ファイルは同時にラベル<turnover>のノード値で会社の売上高(turnover)を格納し、このラベルのyear属性に対応する時間情報を格納する.
次の章では、上のXMLファイルを操作して使用します.
XMLとJavaScript
このXMLファイルの読み取りとより高度な操作を開始する前に、ユーザーがMozillaブラウザを使用しているかどうかを確認することが重要です.
Mozillaの検出
XMLベースのJavaScriptアプリケーションを1つのブラウザだけで作成することはできません.多くのブラウザをサポートするには簡単です.しかし、アプリケーションをどのように作成するかは、ユーザーがどのようなブラウザを使用するかによって異なります.
Mozillaを検出するには、この単純な変数を使用します. var moz = (typeof document.implementation != 'undefined') && (typeof
document.implementation.createDocument != 'undefined');
この変数はブール値として使用できます.

				
						if(moz) {
 //    Mozilla!!
} else {
 //      ...
}
				
		

XMLファイルのロード
ブラウザを特定すると、XMLファイルをロードできます.

				
						var xmlDoc=document.implementation.createDocument("", "doc", null)
xmlDoc.load("someXMLFile.xml");
xmlDoc.onload = someProcessingFunction;
				
		

上記のコードの最初の行は、xmlDocオブジェクトのインスタンスを作成します.2行目は、必要なXMLファイル(この例ではsomeXML File.xml)をロードします.3行目は、先ほどロードしたXMLファイルを処理または操作しました.
XMLファイルを別の関数でロードすることが望ましいようになりました.

				
						var xmlDoc;
function importXML(file) {
 xmlDoc=document.implementation.createDocument("", "doc", null)
 xmlDoc.load(file);
 xmlDoc.onload = readXML;
}
				
		

MozillaとIEにXMLファイルを同時にロード
Mozillaのほとんどの操作はIEで使用できますが、XMLファイルのロードは異なります.IEとMozillaでXMLファイルを同時にロードできる関数を見てみましょう.

				
						var xmlDoc;
function importXML(file) {
 var xmlDoc;
 var moz = (typeof document.implementation != 'undefined') && (typeof
document.implementation.createDocument != 'undefined');
 var ie = (typeof window.ActiveXObject != 'undefined');

 if (moz) {
 xmlDoc = document.implementation.createDocument("", "", null)
 xmlDoc.onload = readXML;
 } else if (ie) {
 xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 xmlDoc.async = false;
 while(xmlDoc.readyState != 4) {};
 }
 xmlDoc.load(file);
}
				
		

上記の関数は、MozillaにXMLファイルをロードすることも、IEにロードすることもできます.この関数を使用してXMLファイルをロードするには、次の呼び出しが必要です. importXML("YourXMLFile.xml");
なお、変数ieは、IEを検出するために使用される.IEは、Microsoft.XMLDOMオブジェクトを使用して解析したXMLファイルをロードするためにActiveX Objectオブジェクトを使用します(March注:この文はよくわかりませんが、添付の英語原文:IE uses an ActiveX Object to load an XML file using the Microsoft.XMLDOM object.).次に、XMLデータの取得および操作に使用できる方法について説明します. getElementsByTagName() //March ：
この方法はXMLDOM(Document Object Model,ドキュメントオブジェクトモデル)オブジェクトで使用できる最も一般的な方法である.このメソッドの名前が示すように、このメソッドは、特定の要素の下にある、与えられた署名と同じすべての要素(要素とも呼ばれる)を返します.基本的には、オブジェクトのセット(object collection)が返されます(March注意:もちろん、セットでは、オブジェクトの個数が1と0になる可能性があります.).例:

				
						var xmlFile = xmlDoc.getElementsByTagName("company");
				
		

上記のコードでは、変数xmlFileに、すべての<company>要素がセットされたオブジェクトのセットが格納されます.たとえば、getElementsByTagName()とgetElementsByTagName("company")の戻り値が異なるなど、getElementsByTagName("ComPanY")メソッドに渡されるパラメータは大文字と小文字に敏感であることに注意してください.
同じラベルを持つ要素の数を検索
冒頭のXMLファイルでは、<company>ラベルが1つしか見えませんでした.getElementsByTagName()によって返されるオブジェクトのセットには、現在のオブジェクトのセット内の要素の数を与える保存長の方法があります.たとえば、<company>ラベルの数を表示するには、次のコードを使用します. var noOfCompanyTags = xmlDoc.getElementsByTagName("company").length; document.write()メソッドで変数noOfCompanyTagsを表示すると、1が表示されます.
ラベルの内容を表示
冒頭のXMLファイルに戻り、今回最初の従業員の名前を表示したいとします.現在、ラベル<employee>はラベル<company>に含まれているので、まず<company>ラベルのセットを取得し、このセットを通じてすべての<employee>ラベルを取得する必要があります.最初の従業員の名前を一歩一歩表示する方法を見てみましょう. var companies = xmlDoc.getElementsByTagName("company");
上記のコードは、変数<company>に格納されたcompaniesラベルのオブジェクトセットを返します.なお、companiesは配列である(March注:オブジェクトの集合が格納されているため、配列の各要素は&company>とラベルされた要素オブジェクトであり、この例では配列には&company>とラベルされた要素が1つしかないため、配列は1つの要素しか存在しない). var employees = companies[0].getElementsByTagName("employee");
上記のコードは、変数employeesに<employee>ラベルのオブジェクトセットを返し、同様に配列で返します.注意companies変数のインデックス番号(0)は、配列の最初の要素だけが必要であり、配列には1つの要素しかないため、インデックス数0でこの要素を得ることができます.
最初の従業員の名前を表示するには、次のコードが必要です. document.write(employees[0].firstChild.nodeValue);
上のコードにはPremshree Pillaiが表示されます.変数employeesは3つの要素を持つ配列であることは明らかです.したがって、2番目の従業員の名前を表示するには、次のコードを使用します. document.write(employees[1].firstChild.nodeValue);
上のコードにはKumar Singhが表示されます.従業員名(Premshree Pillai)を表示するために使用されるすべてのコードは、次のコードに簡略化できます. document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0]
.firstChild.nodeValue);
アクセスラベルのプロパティ
XMLファイルに属性として情報を格納するのが一般的です.そのため、XMLファイルのプロパティにアクセスできることが重要です.XMLの例では、id、sexおよびageなど、多くの従業員の情報を格納しています.いずれも<employee>ラベルに含まれています.最初の従業員の年齢を参照するには、次のコードを使用します. document.write(employees[0].getAttribute("age"));
上のコードは20を出力します.このコードは対象employees[0]に対して方法getAttribute()を用いており、以下のコードを用いて同じ結果を得ることができる. document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0]
.getAttribute("age"));
次に、すべての従業員の詳細(番号id、性別sex、年齢age)をテーブルに表示したいとします.この作業を完了するには、すべての<employee>ラベルを巡回する必要があります.以下はすべてのコードです(XMLファイルをロードするコードは含まれません):

				
						var companies=xmlDoc.getElementsByTagName("company");
var employees=companies[0].getElementsByTagName("employee");
document.write('<table border="1">');
document.write('<tr><th>id</th><th>Sex</th><th>Age</th></tr>');
for(var i=0; i<employees.length; i++) {
 document.write('<tr>');
 document.write('<td>' + employees[i].getAttribute("id") + '</td>');
 document.write('<td>' + employees[i].getAttribute("sex") + '</td>');
 document.write('<td>' + employees[i].getAttribute("age") + '</td>');
 document.write('</tr>');
}
document.write('<table>');
				
		

上のコードはMozillaで次の効果を生成します.
XMLファイルを変更できますか?
いいえ、クライアントJavaScriptではXMLファイルを変更できません.クライアントJavaScriptが作成したアプリケーションで、外部XMLファイルの内容を任意に操作して、希望する内容を表示できますが、ユーザーの入力を使用してXMLファイルを変更することはできません.
まとめ
Mozillaブラウザの検出、JavaScriptでのXMLドキュメントのロード、およびMozillaでのJavaScriptの使用によるXMLの内容の操作がわかりました.XMLとクライアントJavaScriptを使用すると、いくつかの簡単なアプリケーションを作成できます.

XMLファイルで情報を保存し、JavaScriptで必要な情報を取得できます

ニューステープ機のようなものを作成し、ニュースを保存し、JavaScriptでニュース項目を読み取ることができます.

これらはXMLとクライアントJavaScriptの一部のアプリケーションを示す.この記事では、MozillaでXMLとクライアントJavaScriptを運用するための指導的なアイデアをお伝えしたいと思います.