Ajaxでテキストデータを取得する場合の文字化けの対処方法

XMLHttpRequest オブジェクトを使った非同期通信を行うときに、サーバからテキストデータを取得する場合には文字コードについて注意が必要です。ここではテキストデータが UTF-8 以外の文字コードで記述されたいた場合に文字化けを解消する方法について解説します。

(Last modified: 2023年02月03日)

受信するテキストデータがUTF-8以外の文字コードの場合
レスポンスのMIMEタイプを設定する(overrideMimeType)

受信するテキストデータがUTF-8以外の文字コードの場合

XMLHttpRequest オブジェクトを使うことで、サーバに対して非同期通信でリクエストを送信し、サーバからテキストデータを受信することができます。

例としてサーバ側には次のようなテキストデータが含まれるファイルを文字コードとして UTF-8 を使って 'data_utf8.txt' という名前で保存します。

東京都港区

そのあとで、コンソールから次のようにプログラムを実行します。

let request = new XMLHttpRequest();

request.onreadystatechange = function(){
  if (request.readyState == 4){
    if (request.status == 200){
      let data = request.responseText;
      console.log(data);
    }
  }
}

request.open('GET', 'https://www.example.com/data_utf8.txt', true);
request.send(null);

>> 東京都港区

受信するテキストデータがUTF-8以外の文字コードの場合(1)

サーバに設置したテキストファイルのデータを受信し、正常にコンソールに出力することができました。

続いてサーバ側には次のようなテキストデータが含まれるファイルを文字コードとして Shift_JIS を使って 'data_shiftjis.txt' という名前で保存します。

東京都港区

そのあとで、コンソールから次のようにプログラムを実行します。

let request = new XMLHttpRequest();

request.onreadystatechange = function(){
  if (request.readyState == 4){
    if (request.status == 200){
      let data = request.responseText;
      console.log(data);
    }
  }
}

request.open('GET', 'https://www.example.com/data_shiftjis.txt', true);
request.send(null);

>> (文字化けした値)

受信するテキストデータがUTF-8以外の文字コードの場合(2)

サーバに設置したテキストファイルのデータを受信しましたが、文字化けしてしまいました。

レスポンスのMIMEタイプを設定する(overrideMimeType)

文字化けが発生するのは、明示的に設定しない場合にレスポンスで使用される文字コードが UTF-8 となっているためです。受信するテキストの文字コードが UTF-8 以外の場合は XMLHttpRequest.overrideMimeType メソッドを使ってレスポンスの MIME タイプを設定します。

overrideMimeType(MIMEタイプ)

引数には MIME タイプを設定します。例えばテキスト形式で文字コードとして Shift_JIS を使用している場合は次のように記述します。

let request = new XMLHttpRequest();

request.open('GET', 'https://www.example.com/data_shiftjis.txt', true);
request.overrideMimeType('text/plain; charset=Shift_JIS');
request.send(null);

overrideMimeType メソッドは send メソッドが呼び出される前に実行する必要があります。

それではプログラムを次のように修正したあと、コンソールから次のようにプログラムを実行して文字コードとして Shift_JIS を使用したテキストデータを受信してみます。

let request = new XMLHttpRequest();

request.onreadystatechange = function(){
  if (request.readyState == 4){
    if (request.status == 200){
      let data = request.responseText;
      console.log(data);
    }
  }
}

request.open('GET', 'https://www.example.com/data_shiftjis.txt', true);
request.overrideMimeType('text/plain; charset=Shift_JIS');
request.send(null);

>> 東京都港区

レスポンスのMIMEタイプを設定する(overrideMimeType)(1)

文字コードとして Shift_JIS を使ったテキストデータを文字化けせずに受信することができました。

-- --

テキストデータが UTF-8 以外の文字コードで記述されたいた場合に文字化けを解消する方法について解説しました。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。