JavaScriptでCSVファイルを読む

XMLHttpRequest を使って外部CSVファイルを2次元配列として読み込み、テーブルとして出力しています。

.open メソッドの第1引数は、HTTPメソッドを指定します。通常のリクエストにはGETが使われます。URLでリクエストするリソースをすべて表せて、リクエストによりサーバー側に副作用がなく、サーバーのレスポンスがキャッシュ可能であればGETリクエストを使うのが適切です。POSTはフォームデータの送信をするときに使います。
第2引数は、ファイルのURLを指定します。
第3引数は省略可能ですが true で非同期通信、false で同期通信をします。リクエストが完了して、成功した場合 .responseText メソッドを使ってテーブル出力関数に渡しています。

loadCSV.js

window.onload = function() {
  function getText(path) {
    var request = new XMLHttpRequest();  // 新しいリクエストを作成する
    request.open("GET", path, true);    // 取得するファイルパスを指定する
    request.onreadystatechange = function() { // イベントリスナーを定義
      // リクエストが完了し、成功した場合。
      if (request.readyState === 4 && request.status === 200) {
        var type = request.getResponseHeader("Content-Type");
        if (type.match(/^text/))
          parseCSV(request.responseText); // コールバック関数に渡す
      }
    };
    request.send(null);  // ここでリクエストを送信する
  }
  function parseCSV(str) {
    var CR = String.fromCharCode(13);
    var LF = String.fromCharCode(10);
    var csvData = new Array();
    var lines = str.split(LF);
    for (var i = 0; i < lines.length; i++) {
      var cells = lines[i].split(",");
     if( cells.length != 1 ) csvData.push(cells);
    }
    var result = "<table>";
    for (var i = 0; i < csvData.length; i++) {
      result += "<tr>";
      for (var j = 0; j < csvData[i].length; j++) {
        result += "<td>";
        result += csvData[i][j];
        result += "</td>";
      }
      result += "</tr>";
    }
    result += "</table>";
    document.getElementById("result").innerHTML = result;
  }
  getText('./example.csv');
}
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript" src="./loadCSV.js"></script>
 </head>
 <body>
 <div id="result"></div>
 </body>
 </html>

CSVファイルは文字化けしないように保存形式によって文字コードを指定しています。

参考URL:http://blog.cles.jp/item/2691