ファイルの受信

各ファイルをサーバより受信して表形式に表示します。
ファイルによる差違はレスポンスデータ表示(writeData)だけです。
XMLHttpRequestオブジェクトはprotptype.jsのAjax.Requestクラスを利用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <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ファイル

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データ

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データ

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データ

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プログラム <?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); ?> 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); } }