JavaScript MIMEタイプを設定する

非同期通信でサーバーから受信したデータのMIMEタイプを上書きするには、「overrideMimeType()」メソッドを使います。これによって、XMLデータや文字コードによって文字化けしてしまう現象を解消することができます。

<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);
        if(xhr.overrideMimeType){
            xhr.overrideMimeType("text/plain;charset=shift_jis");
        }
        //リクエスト送信
        xhr.send(null);
       }, false);

    }, false);
</script>
<form method="get">
    <input type="button" value="テキストファイルを読み込み" id="loadTextBtn">
</form>
<output></output>
</body>

カテゴリー:JavaScript