重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

PHPで動的に生成されるcsvの、追加部分のみJavascriptで読み込む方法をご教示下さい。

解決済

  • 質問者：drm54
  • 質問日時：
  • 回答数：4件

PHPとJavaScriptでチャットのようなものを作成しようと思っています。

フォームに入力されsubmitされた文言は、PHPでcsvに書き加えられます。そのcsvをJavaScriptで数秒ごとに読み込み、追加された部分のみを非同期的に表示させるようにしたいです。

全体をリロードするのではなく、動的に生成されていくcsvの追加部分のみを表示させるようなカタチにしたいのですが、どこから手をつければ良いか検討がつきません。

PHPでcsvを生成する部分の作成は独力で可能ですので、JavaScript（Ajax）の部分に関してご教示いただければと思います。

何卒よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： bis_love
  • 回答日時：

非同期通信、ということならjQueryはどうですか？


わりと簡単に非同期通信ができます。
http://www.openspc2.org/JavaScript/Ajax/jQuery_s …
http://www.openspc2.org/JavaScript/Ajax/jQuery_s …
↑このサイトの例では、直接txtファイルを読み込んでますが、ログファイルを読み込むＰＨＰを用意しておいて、そのＰＨＰを呼び出す、というのも可能なはずです。

また（余談になりますが）、javascriptにもテンプレートエンジンがあったりします。TrimPathというものなどがそうです。
よみこんだ非同期通信データをそういったテンプレートエンジンで表示させてみるのも面白そうですね。
http://thinkit.jp/article/808/1/
http://code.google.com/p/trimpath/wiki/JavaScrip …
（↑英語サイトですがwebページ翻訳などでなんとかなると思います）

参考URL：http://www.openspc2.org/JavaScript/Ajax/jQuery_s …
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました！

通報する
お礼日時：2013/10/28 18:09

No.4

  • 回答者： fujillin
  • 回答日時：

検索すればいろいろ見つかると思いますが・・・


ajaxには、既存のライブラリを利用したほうが簡単だと思いますので、
prototypeの例：
　http://ajax.pgtop.net/article/76993492.html
　http://www.24w.jp/study_contents.php?bid=ajax&ii …

jQueryの例：
　http://www.openspc2.org/JavaScript/Ajax/jQuery_s …
　http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jque …

他にもいろいろあると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました！

通報する
お礼日時：2013/10/28 18:09

No.3

  • 回答者： babu_baboo
  • 回答日時：

ちょっとだけさんぷるをあっぷしておくじょ！


PHPで、いかのてきすとを、はきだすようにかいてちょ！
ふぁいるのなまえは、とりあえずtest.jsonにしてね
（ぜんかくくうはくはなしということで）
--------
[
　['abc','123'],
　['def','456'],
　['ghi','789']
]
--------
htmlはこれ
で～たが３ぎょうしかないので、１びょうにつき１ぎょうひょうじ
しているぞ！ばぶぅ～
さいごのほうの
MakeTbody('babu', getJSON('test.json'), 1, 1000);
を
MakeTbody('babu1', getJSON('test1.json'), 1, 1000);
MakeTbody('babu2', getJSON('test2.json'), 2, 500);
と、ふくすうしていしても、ちがうたいみんぐで、どうじにいけるじょ！
ばぶぅ～！ふぅ～　つかれた。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>makeTbody</title>

<table border="1">
　<tbody id="babu">
　</tbody>
</table>


<script type="text/javascript">
//@cc_on @set @v = @_jscript_version;
if (! /^http/.test(location.href)) alert('koreja dame dame.');

function getJSON (file_name) {
　var text = null;
　var ajax = /*@if (@v < 5.5) null
　　　　@elif (@v < 6.0) new ActiveXObject('Microsoft.XMLHTTP')
　　　　@elif (@v < 7.0) new ActiveXObject('Msxml2.XMLHTTP')
　　　　@else */ new XMLHttpRequest() /*@end@*/;
　if (! ajax) return text;

　ajax./*@if(@v) onreadystatechange @else@*/ onload /*@end@*/ =
　function() {
　　if (4 == ajax.readyState) {
　　　if (200 == ajax.status) text = ajax.responseText;
　　　if (404 == ajax.status) text = '[Error!! File is not found.]';
　　}
　　return null;
　};
　ajax.open('GET', file_name, false);
　ajax.send(null);
　return eval(text);
}

function MakeTbody (tgtTbodyId, data, rowsSpan, timeSpan) {

　var tbody = document.getElementById(tgtTbodyId);
　var rowCounter = 0;
　
　(function () {
　　var c0 = 0;
　　var c1;
　　var o0;
　　var o1;
　　var TR;
　　var TD;
　　
　　while (c0++<rowsSpan) {
　　　c1 = 0;
　　　TR = document.createElement('TR');
　　　if (! (o0 = data[rowCounter++])) return;
　　　while (o1 = o0[c1++]) {
　　　　TD = document.createElement('TD');
　　　　TD.appendChild(document.createTextNode(o1));
　　　　TR.appendChild(TD);
　　　}
　　　tbody.appendChild(TR);
　　}
　　setTimeout( arguments.callee, timeSpan);
　})();
}

MakeTbody('babu', getJSON('test.json'), 1, 1000);

</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました！

通報する
お礼日時：2013/10/28 18:09

No.2

  • 回答者： babu_baboo
  • 回答日時：

おは～。


まとをはずしてたらごめんね。
CSVの、ついかされたぶぶんだけをよみこむのは、めんどうじゃないかぁ？
すくりぷとでよむなら、かんせいしたCSVふぁいるを、いっきによみこんで
こわけにして、ひょうじしたほうが、らくちん２。
Ajaxつかうなら、いっそうのことで～たをJSONにして
eval()で、はいれつにいっきによみこむ。
そこから、ちょびちょびてんかいすれば？
ちょびちょびひょうじするのは、このあいだかいてみたから
さんぷるあるじょ。
それより、はいれつまでよみこめるかどうかだね。ばぶぅ～。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました！

通報する
お礼日時：2013/10/28 18:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報