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