リクエストを送信してXMLを受信する

XMLHttpRequestでリクエストを送信し、テキストデータを受信します。

文字化け対策

responseXMLの文字化けについては「文字コード関連調査[responseXML]」が詳しいです。

XMLは文字コードをUTF-8にして、XML宣言のencoding属性を記述します。

<?xml version="1.0" encoding="UTF-8"?>

リクエストの送信

open()の第1引数に "GET" または "POST" を指定します。

open()の第2引数は URL を指定します。

第3引数には非同期通信ならtrueを、同期通信ならfalseを指定します。

var url = "sample01.xml";
var request = createXMLHttpRequest();
request.open("GET", url, true);
request.send("");

createXMLHttpRequest()については、「XMLHttpRequestを生成する」をご覧ください。

受信

サーバからのデータを受信するには、onreadystatechangeでイベントを捕捉します。

受信が終了したら readyState は 4 になり、リクエストが成功していたら status は 200 になります。

XMLを取得するには、responseXMLを使用します。

request.onreadystatechange = function() {
  if (request.readyState == 4 && request.status == 200) {
    //受信完了時の処理
    var result = document.getElementById("result");
    var xml = request.responseXML;
    var nodes = xml.getElementsByTagName("sample");
    var text = nodes[0].firstChild.nodeValue;
    result.appendChild(document.createTextNode(text));
  }
}

サンプル

サンプルプログラムでは、サーバ上のsample01.xmlの先頭のsampleノードの値を表示します。

サンプルプログラム