Top / Programming / JavaScript / GETメソッドでリクエストを送信してテキストを受信する

GETメソッドでリクエストをで送信して受信する

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

文字化け対策

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

HTMLファイルの文字コードはUTF-8にします。

テキストデータは文字コードをUTF-8にしてURIエンコードし、Unicodeサイン(BOM)をつけます。

URIエンコードした文字列は、ブラウザのアドレス欄に次のように入力することで調べることができます。

javascript:document.write(encodeURI('文字列'))

GETメソッド

GETメソッドを使用するには、open()の第1引数に "GET" を指定します。

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

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

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

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

受信

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

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

テキストを取得するには、responseTextを使用します。
取得したテキストはエンコードされている(※)ので、decodeURI()でデコードします。

※文字化けを回避するため、サーバ側からエンコードされているテキストを送信します。

request.onreadystatechange = function() {
  if (request.readyState == 4 && request.status == 200) {
    //受信完了時の処理
    var result = document.getElementById("result");
    var text = document.createTextNode(decodeURI(request.responseText));
    result.appendChild(text);
  }
}

サンプル

サンプルプログラムでは、サーバ上のsample01.txtを取得して、表示します。