- ベストアンサー
PHPで動的に生成されるcsvの追加部分のみをJavascriptで読み込む方法とは?
- PHPとJavaScriptでチャットのようなものを作成する際に、PHPで動的に生成されるcsvの追加部分のみを非同期的に表示させる方法を教えてください。
- リロードせずに動的な情報の追加を実現するために、JavaScript(Ajax)を使用してPHPで生成されるcsvファイルの更新を読み込む方法をお伺いしたいです。
- PHPでcsvファイルに追加する部分をユーザーが入力し、JavaScriptでその追加部分のみをリアルタイムに表示する方法を教えてください。
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
非同期通信、ということならjQueryはどうですか? わりと簡単に非同期通信ができます。 http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.2.6/chapter05/001/index.html http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.2.6/chapter05/002/index.html ↑このサイトの例では、直接txtファイルを読み込んでますが、ログファイルを読み込むPHPを用意しておいて、そのPHPを呼び出す、というのも可能なはずです。 また(余談になりますが)、javascriptにもテンプレートエンジンがあったりします。TrimPathというものなどがそうです。 よみこんだ非同期通信データをそういったテンプレートエンジンで表示させてみるのも面白そうですね。 http://thinkit.jp/article/808/1/ http://code.google.com/p/trimpath/wiki/JavaScriptTemplateAPI (↑英語サイトですがwebページ翻訳などでなんとかなると思います)
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
検索すればいろいろ見つかると思いますが・・・ ajaxには、既存のライブラリを利用したほうが簡単だと思いますので、 prototypeの例: http://ajax.pgtop.net/article/76993492.html http://www.24w.jp/study_contents.php?bid=ajax&iid=prototypejs&sid=tusin&cid=001 jQueryの例: http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.2.6/chapter05/001/index.html http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jquery_ajax_events 他にもいろいろあると思います。
お礼
ありがとうございました!
- babu_baboo
- ベストアンサー率51% (268/525)
ちょっとだけさんぷるをあっぷしておくじょ! 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>
お礼
ありがとうございました!
- babu_baboo
- ベストアンサー率51% (268/525)
おは~。 まとをはずしてたらごめんね。 CSVの、ついかされたぶぶんだけをよみこむのは、めんどうじゃないかぁ? すくりぷとでよむなら、かんせいしたCSVふぁいるを、いっきによみこんで こわけにして、ひょうじしたほうが、らくちん2。 Ajaxつかうなら、いっそうのことで~たをJSONにして eval()で、はいれつにいっきによみこむ。 そこから、ちょびちょびてんかいすれば? ちょびちょびひょうじするのは、このあいだかいてみたから さんぷるあるじょ。 それより、はいれつまでよみこめるかどうかだね。ばぶぅ~。
お礼
ありがとうございました!
お礼
ありがとうございました!