前項でやったタブ形式はデータがタブで区切られていました。CSVの場合にはタブの代わりにカンマで区切るようにスクリプトを変更すればできあがりです。以下のスクリプトは改行コードがCR (13番)で区切られているものとして処理しています。（サンプルを
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>CSVファイルを表示する</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadDataFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = parseTabText(httpObj.responseText);
}else{
$("result").innerHTML = "<b>Loading...</b>";
}
}
// CSVファイルを解析して表示
function parseTabText(tabText)
{
var resultText = "<table border='1' cellspacing='0'>";
var CR = String.fromCharCode(13); // 改行コード (CR)
lineData = tabText.split(CR);
for (var i=0; i<lineData.length; i++)
{
wCount = lineData[i].split(",");
resultText += "<tr>";
for (j=0; j<wCount.length; j++)
{
tData = wCount[j]; // データ
resultText += "<td>"+tData + "</td>";
}
resultText += "</tr>";
}
resultText += "</table>";
return resultText;
}
// --></script>
</head>
<body>
<h1>CSVファイルを表示する</h1>
<p>CSVファイルを読み込み表示します</p>
<form name="ajaxForm">
<input type="button" value="sample.csvファイルを読み込み" onClick="loadDataFile('sample.csv')"><br>
</form>
<div id="result"></div>
</body>
</html>
実際にはCSV形式の処理を上記スクリプトで完全にできるわけではありません。例えばカンマがデータ内に含まれている場合にはダブルクォーテーション(")でデータが囲まれます。"がデータ内に含まれる場合には""のように2つ記述されます。このため、どのようなCSV形式のファイルが分かっていない場合には上記のスクリプトでは全く使い物になりません。上記のスクリプトはデータ内にカンマやダブルクォーテーションが含まれないといった条件を満たしている必要があります。普通のCSV形式を処理するのであれば、CSVを解析するライブラリを探してダウンロードするか、自前で作成する必要があります。