【ＪａｖａＳｃｒｉｐｔ・Ａｊａｘ・ＸＭＬ】ＪａｖａＳｃｒｉｐｔから、XMLHttpRequestを使用して外部のＸＭＬファイルを読み込む
【本日の内容】
掲題ににあるように、今回は、
「ＪａｖａＳｃｒｉｐｔから、XMLHttpRequestを使用して外部のＸＭＬファイルを読み込む」
をやっていきたいと思います。
【テキストで読み込むこととの違い】
前回はテキストファイルを読み込むことを行いましたが、
今回はＸＭＬファイルを読み込みます。
テキストの読み込みと比較して、ＸＭＬファイルを読み込むことについて
以下のような利便性があると思います。
・XMLHttpRequestはＤＯＭ（ツリー構造）でファイルの中身を受け取るため、
データの加工がしやすい。
例）〇〇のタグのテキストだけ抜き出すとか〇〇のタグと〇〇のタグのテキスト の両方を抜き出すなど
以下の氏名タグのテキスト部分（田中一郎・田中二郎）のみとか。
<?xml version="1.0" encoding="Shift_JIS"?>
<従業員>
<住所録>
<氏名>田中一郎</氏名>
<住所>千葉県</住所>
</住所録>
<住所録>
<氏名>田中二郎</氏名>
<住所>神奈川</住所>
</住所録>
<住所録>
<氏名>田中三郎</氏名>
<住所>栃木</住所>
</住所録>
</従業員>
【処理の流れ】
１、xmlhttprequestオブジェクトの取得
→function createHttpRequest（）により取得します。
このfunctionブラウザごとに条件を分けて記述してあります。
定型文なので、外出すべきかも。
２、xmlhttprequestオブジェクトのopenメソッドでfileNameをパラメータとして渡し、
xmlファイルの場所を指定
３、指定した要素タグのオブジェクトを配列で取得
→ＤＯＭのツリー構造で返ってきたものに対して、getElementsByTagName
タグのオブジェクトを取得
httpobj.responseXML.getElementsByTagName("住所")
４、取得したタグの配列からテキストノードをfor文で取り出す。
outputText=outputText+nodelist[i].childNodes[0].nodeValue+"\n";
【補足】
「グーグルクロームの設定について」
ショートカットを設定し、参照先に以下起動オプションを追加しています。
-allow-file-access-from-files
「ＤＯＭについて」
ＤＯＭはニ種類ある。
ＨＴＭＬＤＯＭとＸＭＬＤＯＭ。
今回の記事は、ＸＭＬＤＯＭなので、ブログの序盤の方で紹介していた
テーブルの動的追加や動的なリスト追加のＤＯＭとはすこし記載が違う点に注意。
ＸＭＬＤＯＭについては、それぞれのノードにどうアクセスしていくを今後整理する予定。
【参考ソース】
「ｘｍｌファイル」
<?xml version="1.0" encoding="Shift_JIS"?>
<従業員>
<住所録>
<氏名>田中一郎</氏名>
<住所>千葉県</住所>
</住所録>
<住所録>
<氏名>田中二郎</氏名>
<住所>神奈川</住所>
</住所録>
<住所録>
<氏名>田中三郎</氏名>
<住所>栃木</住所>
</住所録>
</従業員>
「ｈｔｍｌファイル」
<html>
<head><meta http-equiv="Content-Type" content="text/html" charset="Shift_JIS">
</head>
<body>
<h2>XMLでテキストを読み込む</h2>
<body>
<input type="button" onclick="viewText('sample.xml');" value="追加"></input>
<textarea id="text" rows="4" cols="40" readonly></textarea>
<script
Language="JavaScript" type="text/javascript">
function viewText(fileName){
var httpobj =createHttpRequest();
httpobj.open("GET",fileName,false);
httpobj.send(null);
var nodelist=httpobj.responseXML.getElementsByTagName("住所");
var outputText="";
for(var i=0;i<nodelist.length;i++){
outputText=outputText+nodelist[i].childNodes[0].nodeValue+"\n";
}
document.getElementById("text").value=outputText;
}
function createHttpRequest(){
if(window.ActiveXObject){
try{
return new ActiveXObject("Msxml2.XMLHTTP")
}catch(e){
try {return new ActiveXObject("Microsoft.XMLHTTP")
}catch(e2){
return null
}
}
}else if(window.XMLHttpRequest){
return new XMLHttpRequest()
}else{
return null}}
</script>
</body>
</html>
