ファイルの受信
各ファイルをサーバより受信して表形式に表示します。
ファイルによる差違はレスポンスデータ表示(writeData)だけです。
XMLHttpRequestオブジェクトはprotptype.jsのAjax.Requestクラスを利用します。
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" type="text/css" href="style.css">
<title>CSVデータの読み込み サンプル</title>
<style type="text/css">
<!--
table {
border: solid;
border-collapse: collapse;
}
th,td {
border: 1px solid;
width: 5em;
}
-->
</style>
<script type="text/javascript" src="../prototype.js"></script>
<script type="text/javascript">
<!--
// 指定したURLを非同期でリクエスト
function getFile(url){
new Ajax.Request(url,
{
method: 'get',
onComplete: writeData
});
}
/********************************************
レスポンスデータを表示
*********************************************/
function writeData( req ){
---ファイルにより相違---
}
/********************************************
テーブルクリア
param table table要素オブジェクト
*********************************************/
function clearTable(table){
// tableの内容クリア
var child = table.childNodes;
var length = child.length;
for(var i = 0; i < length; i++) {
table.removeChild(child[0]);
}
}
//-->
</script>
</head>
<body>
<div>
<input type="button" value="データ読込" onclick="getFile('test.csv')"/>
</div>
<table>
<thead><tr><th>国</th><th>金</th><th>銀</th><th>銅</th></tr></thead>
<tbody id="result"></tbody>
</table>
</body>
</html>
]]>
CSVファイル
<![CDATA[
function writeData( req ){
// 出力先のトップ要素となるtable要素
var table = document.getElementById("result");
// tableの内容クリア
clearTable(table);
// (1)各行を取得（改行コードで区切る）
var rows = req.responseText.split('\r').join('').split('\n');
for(var i = 0; i < rows.length; i++) {
var trElem = document.createElement('tr');
table.appendChild(trElem);
// (2)各セルを取得（カンマで区切る）
cells = rows[i].split(',');
if(cells.length < 4){
break;
}
for(var j = 0; j < cells.length; j++) {
var text = document.createTextNode(cells[j]);
var tdElem = document.createElement('td');
tdElem.appendChild(text);
trElem.appendChild(tdElem);
}
}
}
]]>
JSONデータ
<![CDATA[
function writeData( req ){
//レスポンスを取得し、evalしてJavaScript化
eval("var result = "+req.responseText);
// 出力先のトップ要素となるtable要素
var table = document.getElementById("result");
// tableの内容クリア
clearTable(table);
// 各行を出力
for(var i = 0; i < result.length; i++) {
var trElem = document.createElement('tr');
table.appendChild(trElem);
// countryプロパティを出力
var text = document.createTextNode(result[i].country);
var tdElem = document.createElement('td');
tdElem.appendChild(text);
trElem.appendChild(tdElem);
// goldプロパティを出力
text = document.createTextNode(result[i].gold);
var tdElem = document.createElement('td');
tdElem.appendChild(text);
trElem.appendChild(tdElem);
// silverプロパティを出力
text = document.createTextNode(result[i].silver);
var tdElem = document.createElement('td');
tdElem.appendChild(text);
trElem.appendChild(tdElem);
}
}
]]>
XMLデータ
<![CDATA[
function writeData( req ){
// <result>要素を参照
var result = req.responseXML.getElementsByTagName('result');
// 出力先のトップ要素となるtable要素
var table = document.getElementById("result");
// tableの内容クリア
clearTable(table);
// 各行を出力
for(var i = 0; i < result.length; i++) {
var trElem = document.createElement('tr');
table.appendChild(trElem);
// <country>要素を出力
var country = result[i].getElementsByTagName('country');
var text = document.createTextNode(country[0].firstChild.nodeValue);
var tdElem = document.createElement('td');
tdElem.appendChild(text);
trElem.appendChild(tdElem);
// <medal>要素を出力
var medals = result[i].getElementsByTagName('medal');
for(var j=0; j<medals.length; j++){ if(medals[j].getAttribute('type') != 'bronze'){ text = document.createTextNode(medals[j].firstChild.nodeValue); tdElem = document.createElement('td'); tdElem.appendChild(text); trElem.appendChild(tdElem); } } } } ]]>
EXCELデータ
<![CDATA[
function writeData( req ){
// 出力先のトップ要素となるtable要素
var table = document.getElementById("result");
// tableの内容クリア
clearTable(table);
// 各行を出力
row = req.responseXML.getElementsByTagName("Row");
for(var i=0; i<row.length; i++){ var trElem = document.createElement('tr'); table.appendChild(trElem); // 各セルを出力 var cell = row[i].getElementsByTagName("Data"); for(var j=0; j<cell.length; j++){ var txt = cell[j].firstChild.nodeValue; var text = document.createTextNode(txt); var tdElem = document.createElement('td'); tdElem.appendChild(text); trElem.appendChild(tdElem); } } } ]]>
DBデータ
PHPプログラム
<![CDATA[
＜?php
mb_internal_encoding('UTF-8');
mb_http_output('UTF-8');
// DBのファイルをオープン
$con = mysql_connect('localhost','user','pass');
mysql_select_db('test_db',$con);
// DBを読み込む
$sql = "SELECT * FROM result_table ";
$query = mysql_query($sql, $con);
// データをJSON形式で出力
$data = "[\n";
while ($result= mysql_fetch_assoc($query)) {
$data .= ' {"country":' . $result["country"];
$data .= ', "gold":'. $result["gold"];
$data .= ', "silver":'. $result["silver"];
$data .= ', "bronze":'. $result["bronze"] . " },\n";
}
$data = substr($data, 0, strlen($data)-2);
$data .= "\n]";
echo $data;
// DBのファイルをクローズ
mysql_close($con);
?>
]]>
<![CDATA[
function writeData(req){
//レスポンスを取得し、evalしてJavaScript化
eval("var result = " + req.responseText);
// 出力先のトップ要素となるtable要素
var table = document.getElementById("result");
// tableの内容クリア
clearTable(table);
// 各行を出力
for(var i = 0; i < result.length; i++) {
var trElem = document.createElement('tr');
table.appendChild(trElem);
// countryプロパティを出力
var text = document.createTextNode(result[i].country);
var tdElem = document.createElement('td');
tdElem.appendChild(text);
trElem.appendChild(tdElem);
// goldプロパティを出力
text = document.createTextNode(result[i].gold);
tdElem = document.createElement('td');
tdElem.appendChild(text);
trElem.appendChild(tdElem);
// silverプロパティを出力
text = document.createTextNode(result[i].silver);
tdElem = document.createElement('td');
tdElem.appendChild(text);
trElem.appendChild(tdElem);
// bronzeプロパティを出力
text = document.createTextNode(result[i].bronze);
tdElem = document.createElement('td');
tdElem.appendChild(text);
trElem.appendChild(tdElem);
}
}
]]>
