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

解決済

質問者：drm54
質問日時：2009/05/15 03:35
回答数：4件

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

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

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

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

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

通報する

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

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「英語 Google翻訳」に関するQ&A：英語で「高価なものしか無かった（売ってなかった）」と書くには？？？？ Google翻訳にかけると、

さらに表示

「入力 JavaScript」に関するQ&A： javascriptのゲームで漢字を出力して漢字を入力して比較をしたいのですが

「jQuery とは」に関するQ&A： jQueryとはどのようなものですか。

「英語テンプレート」に関するQ&A：英語ホームページテンプレートでの日本語表示

「とは JSON」に関するQ&A： JSONとはどんな場合に使うのでしょうか？

「jQuery 検索」に関するQ&A： JQueryでXML検索

「エンジンテンプレート」に関するQ&A：テンプレートエンジンとフレームワークどちらを先に学ぶべき？

「英語アラート」に関するQ&A：英語でスパイウエアのactivity が発見された、などのアラートが頻繁にでます

「エンジン翻訳」に関するQ&A：翻訳エンジンがビジーになっています

「エレメント英語」に関するQ&A：オイル・エレメントは英語でも同じ言い方？

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： bis_love
回答日時：2009/05/15 07:03

非同期通信、ということなら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 …

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2013/10/28 18:09

No.4

回答者： fujillin
回答日時：2009/05/15 15:02

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

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 …

他にもいろいろあると思います。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2013/10/28 18:09

No.3

回答者： babu_baboo
回答日時：2009/05/15 10:49

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

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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2013/10/28 18:09

No.2

回答者： babu_baboo
回答日時：2009/05/15 08:05

おは～。

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