JavaScript サーバーからテキストデータやXMLデータを受信する
テキストデータは、データ受信後に「responseText」プロパティを参照します。テキストデータに限らず、HTMLファイルでもJSON形式のファイルでも読み込むことができます。XMLファイルの場合、「responseXML」プロパティにXMLデータが入ります。XMLDOMになるため、「getElementsByTagName()」メソッドや「nodeValue」プロパティを使ってノードにアクセスすることができます。
<body>
<script>
window.addEventListener("load" , function(){
//読み込みボタンのイベント
var ele = document.getElementsByTagName("output")[0];
//テキストファイルを読み込みボタンにイベント割り当て
document.getElementById("loadTextBtn").addEventListener("click",function(evt){
//非同期通信オブジェクト作成
var xhr = new XMLHttpRequest();
//読み完了時のイベントハンドラを設定
xhr.onload = function(){
//読み込んだテキストを出力
ele.innerHTML = xhr.responseText;
}
//同一ドメインのURL上のファイル指定
xhr.open("get","./data.txt", true);
xhr.send(null);
}, false);
//XMLファイルを読み込みボタンにイベント割り当て
document.getElementById("loadXMLBtn").addEventListener("click",function(evt){
//非同期通信オブジェクト作成
var xhr = new XMLHttpRequest();
//読み完了時のイベントハンドラを設定
xhr.onload = function(){
//読み込んだXMLを解析して出力
var xml = xhr.responseXML;
//<name>タグをピックアップ
var nameList = xml.getElementsByTagName("name");
//<name>タグの数だけ繰り返して表示
for(var i=0; i<nameList.length; i++){
//名前を読み出し
var uname = nameList[i].firstChild.nodeValue;
ele.innerHTML += uname +"<br>";
}
}
//同一ドメインのURL上のファイル指定
xhr.open("get","./data.xml", true);
xhr.send(null);
}, false);
}, false);
</script>
<form method="get">
<input type="button" value="テキストファイルを読み込み" id="loadTextBtn">
<input type="button" value="XMLファイルを読み込み" id="loadXMLBtn">
</form>
<output></output>
</body>「テキストファイルを読み込み」ボタンをクリックすると、テキストファイルが読み込まれて内容が表示されます。「XMLファイルを読み込み」ボタンをクリックすると、XMLファイルが読み込まれて、<name>タグの最初のノードが表示されます。
