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">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ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">データ1</OPTION>
		<OPTION value="2">データ2</OPTION>
		<OPTION value="3">データ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 は、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 によって、1番目のコンボボックスのデータを取り出します。
( 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 ) {
		// このコメント2行を実行すると、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 では、以下のようにすると(2行を加える)エンティティ参照で表示されます

  
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);
	}

}
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加




SQLの窓  天気  IT用語辞典
Yahoo!ニュース  マルチ辞書
PHP マニュアル  Google URL短縮 


フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ