ファイルダウンロードが開くリンクから直接クライアントJSにデータ読み込みする

概要

通常はファイルダウンロードダイアログが開くデータを、JSプログラム中に読み込んで扱えるようにする。

方法１：データタイプを指定する（XHR2）

xhrならばXMLHttpRequest.responseTypeで応答テキストの取り扱いタイプを変更できる。

$(function (){

    var xhr = new XMLHttpRequest();
    xhr.open('GET', '../csv/data.csv', true);
    xhr.responseType = 'text';

    xhr.onload = function(e) {
        var response_document = this.responseText;
        console.log(response_document);
    };
    xhr.send();
});

jQueryならdataTypeを指定

$(function (){
    var data_src = '../data/location_list.csv';

    var parse_data = function(res){
        var dataArray = CSVData.parse(res);
        alert(dataArray);
    }

    $.ajax(
            {
                url     : data_src,
                type    : 'GET',
                cache   : false,
                dataType: 'text',
                success : parse_data
            }
    );
});

方法２：XMLHttpRequest.overrideMimeTypeを指定する

読み込みの文字コードも変更したいなどの時はこちら。

$(function (){

    var xhr = new XMLHttpRequest();
    xhr.open('GET', '../csv/data.csv', true);
    xhr.overrideMimeType('text/plain; charset=shift-jis');

    xhr.onload = function(e) {
        var response_document = this.responseText;
        console.log(response_document);
    };
    xhr.send();
});

$(function (){
    var data_src = '../data/location_list.csv';

    var parse_data = function(res){
        var dataArray = CSVData.parse(res);
        alert(dataArray);
    }

    $.ajax(
            {
                url     : data_src,
                type    : "GET",
                cache   : false,
                mimeType: 'text/plain; charset=shift-jis',
                success : parse_data
            }
    );
});

参考サイト

• XMLHttpRequest2 に関する新しいヒント - HTML5 Rocks
• Ajaxの文字化けとその解決法 | 言葉の海のプログラマー
• jQuery.ajax() | jQuery API Documentation