
PHPとJavaScriptでチャットのようなものを作成しようと思っています。
フォームに入力されsubmitされた文言は、PHPでcsvに書き加えられます。そのcsvをJavaScriptで数秒ごとに読み込み、追加された部分のみを非同期的に表示させるようにしたいです。
全体をリロードするのではなく、動的に生成されていくcsvの追加部分のみを表示させるようなカタチにしたいのですが、どこから手をつければ良いか検討がつきません。
PHPでcsvを生成する部分の作成は独力で可能ですので、JavaScript(Ajax)の部分に関してご教示いただければと思います。
何卒よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
非同期通信、ということなら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 …
No.4
- 回答日時:
検索すればいろいろ見つかると思いますが・・・
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 …
他にもいろいろあると思います。
No.3
- 回答日時:
ちょっとだけさんぷるをあっぷしておくじょ!
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>
No.2
- 回答日時:
おは~。
まとをはずしてたらごめんね。
CSVの、ついかされたぶぶんだけをよみこむのは、めんどうじゃないかぁ?
すくりぷとでよむなら、かんせいしたCSVふぁいるを、いっきによみこんで
こわけにして、ひょうじしたほうが、らくちん2。
Ajaxつかうなら、いっそうのことで~たをJSONにして
eval()で、はいれつにいっきによみこむ。
そこから、ちょびちょびてんかいすれば?
ちょびちょびひょうじするのは、このあいだかいてみたから
さんぷるあるじょ。
それより、はいれつまでよみこめるかどうかだね。ばぶぅ~。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jsonテキストデータの並び替え...
-
スマホ上で、左右スワイプで次...
-
sessionStorageを調べています。
-
jqueryのselect2で検索欄の文字...
-
読み込んだQRコードをフォーム...
-
タグを教えてください。
-
ラジオボタンを複数選択したと...
-
<tr>指定した表の行要素をボ...
-
画面遷移を行わずに同一ページ...
-
特定の文字列を複数抜き出した...
-
イラストレーター、縦中横のシ...
-
定積分の近似値を計算する関数c...
-
jsでifの返り値にgetelementbyi...
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
Adobe acrobat proでフォームを...
-
Outlookのアカウントがあるとメ...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
読み込み開始から読み込み終了...
-
[jQuery UI] sortableを使いaja...
-
.txtファイルの読み込み
-
変数にドットをいれることはか...
-
Win11 へのRufus と レジストリ...
-
Doctrineのjoinについて
-
JavaScriptでtabindexの変更っ...
-
Javascriptを使ってQRコード読...
-
カンマ区切りのデータを配列に...
-
FullCalendar の複数月表示につ...
-
SQLのmaxで求めた値を変数に代...
-
JavascriptからPHPへのAjax通信...
-
インラインフレームを自動更新...
-
階層別の組織図の自動作成について
-
jquery.validationEngine.js 添...
-
パソコンで動くjavascriptがス...
-
JSONをperlで受け取る方法
-
jQueryのblockUIをformのボタン...
-
AjaxでSJISファイル読み込みす...
-
スライドを最後の画像で止めたい
おすすめ情報