XMLHttp でサーバーデータを取得

静的テキストデータの処理

もっとも簡単な方法ですが、静的データ( HTML 等 ) は、通常ではデータのキャラクタセットをクライアントに
通知できないので、XMLHttp にとってデフォルトのキャラクタセットである utf-8 を使用する必要があります。

しかし、XMLHttp が正常に読み込むと言うことは、クライアントのキャラクタセットはなんでもいいという事です。

sjis.htm

<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

	var dom,bIE;
	var objXMLHttp;

	if ( document.all ) {
		bIE = true;
		dom = new ActiveXObject("Msxml2.DOMDocument.3.0");
		objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
	}
	else {
		bIE = false;
		dom = document.implementation.createDocument("", "", null);
		objXMLHttp = new XMLHttpRequest();
	}


function GetServerData( ) {

	var result;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"utf8_combo.htm"
		, false );
	objXMLHttp.send( "" );
	result = objXMLHttp.responseText;

	document.getElementById("data").innerHTML = result;

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type=button name="send" value="送信" onClick='GetServerData( )'>
<DIV id="data"></DIV>


</BODY>
</HTML>

utf8_combo.htm

<SELECT name="combo">
<OPTION value="1">データ１</OPTION>
<OPTION value="2">データ２</OPTION>
<OPTION value="3">データ３</OPTION>
</SELECT>

静的 XML 入力データ

XML をクライアントで扱うとなると、IE と Mozilla の違いを考慮する事は避けて通れません。
基本的な部分はほぼ同じですが、Microsoft の拡張機能を知る必要もあります

sjis_combo.xml

<?xml version="1.0" encoding="shift_jis" ?>
<combodata>
	<list>
		<![CDATA[
		<SELECT name="combo">
		<OPTION value="1">データ１</OPTION>
		<OPTION value="2">データ２</OPTION>
		<OPTION value="3">データ３</OPTION>
		</SELECT>
		]]>
	</list>
	<list>
		<![CDATA[
		<SELECT name="syozoku">
		<OPTION value="1">総務部</OPTION>
		<OPTION value="2">営業部</OPTION>
		<OPTION value="3">技術部</OPTION>
		</SELECT>
		]]>
	</list>
</combodata>

XML で書くと、静的データであってもキャラクタセットを指定する事ができますが、Microsoft では
responseText で取得する場合は無視するようで、日本語が化けてしまいます。

いずれにせよ、XML として処理すれば問題無いのですが、
受け取った XML データを確かめたい場合のコードを以下に示します。

<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

	var dom,bIE;
	var objXMLHttp;

	if ( document.all ) {
		bIE = true;
		dom = new ActiveXObject("Msxml2.DOMDocument.3.0");
		objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
	}
	else {
		bIE = false;
		dom = document.implementation.createDocument("", "", null);
		objXMLHttp = new XMLHttpRequest();
	}


function GetServerData( ) {

	var result,xml;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"sjis_combo.xml"
		, false );
	objXMLHttp.send( "" );

	if ( document.all ) {
		xml = objXMLHttp.responseXML;
		alert( xml.xml );
	}
	else {
		result = objXMLHttp.responseText;
		alert( result );
	}

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type=button name="send" value="送信" onClick='GetServerData( )'>

</BODY>
</HTML>

以下は、データのルートがどうなっているかを示すものです

<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

	var dom,bIE;
	var objXMLHttp;

	if ( document.all ) {
		bIE = true;
		dom = new ActiveXObject("Msxml2.DOMDocument.3.0");
		objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
	}
	else {
		bIE = false;
		dom = document.implementation.createDocument("", "", null);
		objXMLHttp = new XMLHttpRequest();
	}


function GetServerData( ) {

	var result,xml;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"sjis_combo.xml"
		, false );
	objXMLHttp.send( "" );
	xml = objXMLHttp.responseXML;
	result = "";

	result += xml.nodeName + "<br>";
	result += xml.childNodes.item(0).nodeName + "<br>";
	result += xml.childNodes.item(1).nodeName + "<br>";

	document.getElementById("data").innerHTML = result;

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type=button name="send" value="送信" onClick='GetServerData( )'>
<DIV id="data"></DIV>

</BODY>
</HTML>

IE での結果

#document
xml
combodata

※ xml は、ＸＭＬ宣言のノードです

Netscape での結果

#document
#text
combodata

※ #text は、空ノードです。

目的データの取得

function GetServerData( ) {

	var result,xml,obj,objList,i,length;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"sjis_combo.xml"
		, false );
	objXMLHttp.send( "" );
	xml = objXMLHttp.responseXML;
	result = "";

	result += xml.nodeName + "<br>";

	// combodata
	obj = xml.childNodes.item(1);
	result += obj.nodeName + "<br>";

	// combodata の 中
	objList = obj.childNodes;
	length = objList.length;
	result += "　子ノードの数:" + length + "<br>";
		
	for( i = 0; i < length; i++ ) {
		obj = objList.item(i)
		result += "　" + i + ":" + obj.nodeName + "<br>";
	}

	document.getElementById("data").innerHTML = result;

}

IE での結果

#document
combodata
　子ノードの数:2
　0:list
　1:list

Netscape での結果

#document
combodata
　子ノードの数:5
　0:#text
　1:list
　2:#text
　3:list
　4:#text

Netscape では必ず空ノードが入ります。

と言っても、IE では有効なデータが無い為に省略されているだけで、
本来タグの前後にはデータを挿入する事ができます。

以下のコードで目的のデータを取得しています ( alert の部分 )

function GetServerData( ) {

	var result,xml,obj,objList,i,length,j,work;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"sjis_combo.xml"
		, false );
	objXMLHttp.send( "" );
	xml = objXMLHttp.responseXML;
	result = "";

	result += xml.nodeName + "<br>";

	// combodata
	obj = xml.childNodes.item(1);
	result += obj.nodeName + "<br>";

	// combodata の 中
	objList = obj.childNodes;
	length = objList.length;
	result += "　子ノードの数:" + length + "<br>";
		
	for( i = 0; i < length; i++ ) {
		obj = objList.item(i)
		result += "　" + i + ":" + obj.nodeName + "<br>";
		for( j = 0; j < obj.childNodes.length; j++ ) {
			result += "　　" + j + ":"
			+ obj.childNodes.item(j).nodeName + "<br>";
			work = obj.childNodes.item(j).nodeName;
			if ( "#cdata-section" == work ) {
				alert(obj.childNodes.item(j).nodeValue);
			}
		}
		
	}

	document.getElementById("data").innerHTML = result;

}

IE での結果

#document
combodata
　子ノードの数:2
　0:list
　　0:#cdata-section
　1:list
　　0:#cdata-section

Netscape での結果

#document
combodata
　子ノードの数:5
　0:#text
　1:list
　　0:#text
　　1:#cdata-section
　　2:#text
　2:#text
　3:list
　　0:#text
　　1:#cdata-section
　　2:#text
　4:#text

list タグより取得する場合は以下のようになります

function GetServerData( ) {

	var result,xml,obj,objList,i,length,j,work;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"sjis_combo.xml"
		, false );
	objXMLHttp.send( "" );
	xml = objXMLHttp.responseXML;
	result = "";

	// 目的の親ノード
	objList = xml.getElementsByTagName("list");
	length = objList.length;
	result += "ノードの数:" + length + "<br>";

	for( i = 0; i < length; i++ ) {
		obj = objList.item(i)
		result += "　" + i + ":" + obj.nodeName + "<br>";
		for( j = 0; j < obj.childNodes.length; j++ ) {
			result += "　　" + j + ":"
			+ obj.childNodes.item(j).nodeName + "<br>";
			work = obj.childNodes.item(j).nodeName;
			if ( "#cdata-section" == work ) {
				alert(obj.childNodes.item(j).nodeValue);
			}
		}
		
	}

	document.getElementById("data").innerHTML = result;

}

IE 限定の selectNodes

function GetServerData( ) {

	var result,xml,obj,objList,i,length,j,work;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"sjis_combo.xml"
		, false );
	objXMLHttp.send( "" );
	xml = objXMLHttp.responseXML;
	result = "";

	// ルートから
	// どのノードからでも指定できますが、xml オブジェクト
	// からのほうが混乱しないと思います
	objList = xml.selectNodes("/combodata/list");
	length = objList.length;
	result += "ノードの数:" + length + "<br>";

	for( i = 0; i < length; i++ ) {
		obj = objList.item(i)
		for( j = 0; j < obj.childNodes.length; j++ ) {
			work = obj.childNodes.item(j).nodeName;
			if ( "#cdata-section" == work ) {
				alert(obj.childNodes.item(j).nodeValue);
			}
		}
		
	}

	// XML 文書中の全ての要素
	// どのノードからでも指定できますが、xml オブジェクト
	// からのほうが混乱しないと思います
	objList = xml.selectNodes("//list");
	length = objList.length;
	result += "ノードの数:" + length + "<br>";

	for( i = 0; i < length; i++ ) {
		obj = objList.item(i)
		for( j = 0; j < obj.childNodes.length; j++ ) {
			work = obj.childNodes.item(j).nodeName;
			if ( "#cdata-section" == work ) {
				alert(obj.childNodes.item(j).nodeValue);
			}
		}
		
	}

	// 上位ノードから (1)
	objList = xml.selectNodes("combodata/list");
	length = objList.length;
	result += "ノードの数:" + length + "<br>";

	for( i = 0; i < length; i++ ) {
		obj = objList.item(i)
		for( j = 0; j < obj.childNodes.length; j++ ) {
			work = obj.childNodes.item(j).nodeName;
			if ( "#cdata-section" == work ) {
				alert(obj.childNodes.item(j).nodeValue);
			}
		}
		
	}

	// 上位ノードから (2)
	obj = xml.getElementsByTagName("combodata").item(0);
	objList = obj.selectNodes("list");
	length = objList.length;
	result += "ノードの数:" + length + "<br>";

	for( i = 0; i < length; i++ ) {
		obj = objList.item(i)
		for( j = 0; j < obj.childNodes.length; j++ ) {
			work = obj.childNodes.item(j).nodeName;
			if ( "#cdata-section" == work ) {
				alert(obj.childNodes.item(j).nodeValue);
			}
		}
		
	}

}

XSLT を用いたデータの取り出し

XPath を用いたデータの取り出しは、XSLT を用いる事によって、より簡単に実現できます。
Mozilla では、selectNodes が使用できませんでしたが、同様の結果を得る事ができます

以下は、XSLT によって、１番目のコンボボックスのデータを取り出します。
( list[position()=1] )

sjis_combo.xsl

<?xml version="1.0" encoding="shift_jis" ?>
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text" />

<xsl:template match="/">

	<xsl:value-of select="combodata/list[position()=1]" />

</xsl:template>

</xsl:stylesheet>

※ xsl:output は、IE の場合必要です

<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

	var dom,bIE;
	var objXMLHttp;

	if ( document.all ) {
		bIE = true;
		dom = new ActiveXObject("Msxml2.DOMDocument.3.0");
		objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
	}
	else {
		bIE = false;
		dom = document.implementation.createDocument("", "", null);
		objXMLHttp = new XMLHttpRequest();
	}


function GetServerData( ) {

	var xml,xsl;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"sjis_combo.xml"
		, false );
	objXMLHttp.send( "" );
	xml = objXMLHttp.responseXML;

	objXMLHttp.open(
		"GET",
		"sjis_combo.xsl"
		, false );
	objXMLHttp.send( "" );
	xsl = objXMLHttp.responseXML;

	if ( document.all ) {
		document.getElementById("data").innerHTML
		= xml.transformNode( xsl.documentElement );
	}
	else {
		processor = new XSLTProcessor();
		processor.importStylesheet(xsl);

		newFragment = processor.transformToFragment(xml,document);
		document.getElementById("data").innerHTML
		= newFragment.childNodes.item(0).nodeValue;
	}

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type=button name="send" value="送信" onClick='GetServerData( )'>
<DIV id="data"></DIV>

</BODY>
</HTML>

上記処理では、HTML としてコンボボックスが実装されますが、
これをテキストとして表示したい場合は以下のようにします

function GetServerData( ) {

	var xml,xsl,objNode;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"sjis_combo.xml"
		, false );
	objXMLHttp.send( "" );
	xml = objXMLHttp.responseXML;

	objXMLHttp.open(
		"GET",
		"sjis_combo.xsl"
		, false );
	objXMLHttp.send( "" );
	xsl = objXMLHttp.responseXML;

	if ( document.all ) {
		// このコメント２行を実行すると、HTML エンティティで表示されます
		document.getElementById("data").innerText
		= xml.transformNode( xsl.documentElement );
	}
	else {
		processor = new XSLTProcessor();
		processor.importStylesheet(xsl);

		newFragment = processor.transformToFragment(xml,document);
		document.getElementById("data").appendChild(newFragment);
	}

}

さらに IE　では、以下のようにすると(２行を加える)エンティティ参照で表示されます

function GetServerData( ) {

	var xml,xsl,objNode;

	// 最後のパラメータの false は、同期実行を意味します
	objXMLHttp.open(
		"GET",
		"sjis_combo.xml"
		, false );
	objXMLHttp.send( "" );
	xml = objXMLHttp.responseXML;

	objXMLHttp.open(
		"GET",
		"sjis_combo.xsl"
		, false );
	objXMLHttp.send( "" );
	xsl = objXMLHttp.responseXML;

	if ( document.all ) {
		objNode = xsl.getElementsByTagName("xsl:output").item(0);
		objNode.attributes.getNamedItem("method").nodeValue = "html";
		document.getElementById("data").innerText
		= xml.transformNode( xsl.documentElement );
	}
	else {
		processor = new XSLTProcessor();
		processor.importStylesheet(xsl);

		newFragment = processor.transformToFragment(xml,document);
		document.getElementById("data").appendChild(newFragment);
	}

}