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

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

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

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

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

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

A 回答 (4件)

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


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

また(余談になりますが)、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

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


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

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


PHPで、いかのてきすとを、はきだすようにかいてちょ!
ふぁいるのなまえは、とりあえずtest.jsonにしてね
(ぜんかくくうはくはなしということで)
--------
[
 ['abc','123'],
 ['def','456'],
 ['ghi','789']
]
--------
htmlはこれ
で~たが3ぎょうしかないので、1びょうにつき1ぎょうひょうじ
しているぞ!ばぶぅ~
さいごのほうの
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

おは~。


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

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

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

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


人気Q&Aランキング

おすすめ情報