Google系のサービスやhttp://www.sleipnirstart.com/、はてぶの検索ボックスに入力したらインクリメンタルサーチされるもの、など、Ajaxなサービスが増えてきていますが、どうすればこんなクールなサービスを作れるのでしょうか。（発想の問題ではなく、技術的に）
プログラミングはある程度できますし（C, C#, VB, PHP, Javascriptなど）、HTMLやCSSも書けます。
たとえば、PHP + Ajaxでページを作るとしたら、どのような書籍・サイトを勉強すればよいかを教えていただきたいです。
ベストアンサー
-
ymlab
回答オープン10pt
みなさんのお書きの通り、Ajaxは、特別に新しい技術ではありません。
そのことは既に、id:sensepicker さんもご承知の通りだと思います。
どうすれば、こんなサービスを提供することができるのかについてですが、
htmlの中に、例えば＜div id = "abc"＞＜/div＞とかして＜div＞タグに idで名前をつけておきます。
また、＜a＞や＜input type = "text" /＞などで、ユーザーに何らかのアクションを起こさせることもできます。
そのときも、 id = ""で名前をつけておきます。
そこで、何らかのアクションを起こさせたときに、javascriptでそれをキャッチさせるのです。
[例えば、テキストボックスに何か入力されたときの動作はjavascriptでキャッチできます。]
そのjavascriptの中に、ブラウザの違いを吸収するようなコードを書いておき、
XmlhttpRequest関数を呼び出し、phpをコールするのです。[フックとかいいます。]
このコールされたPHPの中に、ファイルを書き込んだり読み込んだりするようなことをして、
それをjavascriptで読み込めるようにすればよいのです。
例えばソースが見にくくて申し訳ないですが、javascriptの中にこんなことをしておきます。
/** 行事予定をAjaxライクに登録・更新・削除させる. * @param year 何年 * @param month 何月 * @param day 何日 */ function decidePlan( year, month, day ) { //alert(year+":"+month+":"+day); //登録された情報を取得する. var Content = ""; Content = document.plan.elements["planX"+year+"X"+month+"X"+day].value; //データの内容が空だったら、登録しない. //Content = Content.replace(/^\s+|\s+$/g, "");//trimの代わり. //if ( Content == "" ) { //データの内容が空だから、以下は実行しない. // return; //} httpObj = createHttpRequest(); if (httpObj) { httpObj.open("GET", "./gyouziajaxsave.php?year="+year+"&month="+month+"&day="+day+"&contents="+encodeURI(Content), true); httpObj.onreadystatechange = updatePage; httpObj.send(null); } else { alert("httprequest violation has occured. Call ymlab."); } /** メッセージ送信中の状態. */ function updatePage() { if (httpObj.readyState == 1 || httpObj.readyState == 2 || httpObj.readyState == 3) { document.getElementById("statusX"+year+"X"+month+"X"+day).innerHTML = "<img src = \"../img/ajax-loader.gif\" width = \"16\" height = \"16\" alt = \"loading\" />"; } if ( httpObj.readyState == 4) { if ( httpObj.status == 200 ) { //alert("処理が完了しました."); document.getElementById("statusX"+year+"X"+month+"X"+day).innerHTML = "<img src = \"../img/accept.png\" width = \"16\" height = \"16\" alt = \"Accept\" />"; } } } } //XMLHttpRequestオブジェクト生成 function createHttpRequest(){ //Win ie用 if(window.ActiveXObject){ try { //MSXML2以降用 return new ActiveXObject("Msxml2.XMLHTTP") } catch (e) { try { //旧MSXML用 return new ActiveXObject("Microsoft.XMLHTTP") } catch (e2) { return null } } } else if(window.XMLHttpRequest){ //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用 return new XMLHttpRequest() } else { return null } }
httpObj.open("GET", "./gyouziajaxsave.php?year="+year+"&month="+month+"&day="+day+"&contents="+encodeURI(Content), true);
のところで、 phpをフックしています。
フックされたphpはこんなかんじです。
<?php include_once("../db/xml.php"); include_once("./common.php"); $isLogin = sessionCheck(); $year = _hs( $_REQUEST['year'] ); $month = _hs( $_REQUEST['month'] ); $day = _hs( $_REQUEST['day'] ); $contents = ( $_REQUEST['contents'] ); //これを_hsすると文字化けする. ($_REQUESTは、URLエンコードされているはずの文字)下の方で無害かしているか大丈夫 //年・月・日のチェック. if ( !preg_match("/^[0-9]+$/", $year ) || !preg_match("/^[0-9]+$/", $month ) || !preg_match("/^[0-9]+$/", $day )) { //年月日に数字以外が入っている. return; } //サニタイズ.これはファイルに書き込む時にするべきか・・・ //$content = htmlspecialchars($content); if ( $year >= 1 && $year <= 3 ) { $year--; } else { } if ( !file_exists("../db/plan/$year.xml") ) { //存在しないので、生成する.元旦だけ入れてやろう. $putData = <<<EM <?xml version='1.0' encoding='UTF-8'?> <doc> <article><month>-1</month><day>-1</day><contents>ダミー</contents></article> <article><month>-11</month><day>-11</day><contents>ダミー</contents></article> <article> <month> 1 </month> <day> 1 </day> <contents> 元旦 </contents> </article> </doc> EM; $fpout = fopen("../db/plan/$year.xml", 'w' ) or die; fputs( $fpout, $putData ); chmod( "../db/plan/$year.xml", 0777 ); fclose( $fpout ); } $fp = fopen( "../db/plan/$year.xml", 'r' ) or die; while( !feof( $fp ) ) { $fBuf .= fgets($fp, 200 ); } fclose( $fp ); $fBuf = mb_convert_encoding( $fBuf, "UTF-8", "sjis-win" ); $data = XML_unserialize( $fBuf ); $n = count( $data['doc']['article'] ); $p = $n; for( $iCounter = 0; $iCounter < $n; $iCounter++ ) { if ( trim( $month ) == trim( $data['doc']['article'][$iCounter]['month'] ) && trim( $day ) == trim( $data['doc']['article'][$iCounter]['day'] ) ) { $p = $iCounter; break; } } $forOutput = ""; $contents = str_replace('&', '&', $contents); $contents = str_replace('&','&', $contents); $contents = str_replace('<','<', $contents); $contents = str_replace('>','>', $contents); $contents = str_replace('"','"', $contents); $contents = str_replace('\'',''', $contents); $data['doc']['article'][$p]['month'] = $month; $data['doc']['article'][$p]['day'] = $day; $data['doc']['article'][$p]['contents'] = $contents; //utfに変換しておく. $forOutput = htmlspecialchars($data['doc']['article'][$p]['contents']); $xml = XML_serialize( $data ); $xml = mb_convert_encoding( $xml, "sjis-win", "UTF-8" ); $fpout = fopen( "../db/plan/$year.xml", 'w' ) or die; fputs( $fpout, $xml ); fclose( $fpout ); ?>
私も見よう見まねで作ったのですが、
案外なんとかなるもんです。
いきなり、mootoolsとか、prototypeなどの便利なライブラリを使うのではなくて、
いったん自分で実装できるようになってからでも、使うのは遅くないかと思います。
といいながら、私の初めてのAjaxプログラミングは、Google map APIでしたけど^^;
http://www.openspc2.org/JavaScript/Ajax/GoogleMaps/index.html
がんばってください。
その他の回答
-
たまたん
満足27pt
http://www.sleipnirstart.com/で作成されているのは、
YUIというAJaxを使用されています。
最近、フリーでこういうライブラリがたくさん出ていますし、
かなり使い勝手がいいようです。
プログラミングは、JavaScriptは覚えておかなければなりません。
それ以外は、ライブラリの使い方を勉強すればいいと思います。
もし、プログラムを使用されるのであれば、.NETよりPHPやRuby,Perlなどの方が
ソースが見やすくなると考えます。（私は、Rubyを使用していますが・・・・）
それで、YUIのサイトは以下の通りです。
少し古いかもしれませんがどうぞ・・・・・
YUIの本家マニュアル（英語）：サンプルもそのままおいてあります。
http://developer.yahoo.com/yui/
http://allabout.co.jp/internet/javascript/closeup/CU20070610A/
http://www.tuyudaku.net/javascript/yui.html
http://kdimension.system.cx/fwiki/wiki.cgi
http://japan.zdnet.com/sp/feature/07yui/story/0,3800080109,20356...
-
sensepicker
-
- その他の回答を読む
sensepicker
この質問へのコメント
質問の情報
- 登録日時
- 2009-07-24 15:35:33
- 終了日時
- 2009-07-31 15:40:02
- 回答条件
- 1人2回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
度々すみません。 私は以前から大学入試・成績など教育関連のネガティブな夢を見ていましたが、ここ最近そ…
hayakushinene
5
-
親族（実家）の犬が無駄吠えをしています。朝方に一時間くらい吠えているらしい。昼にも一時間くらい吠え続…
匿名質問者
22
1
-
学歴詐称ではなくて、貴族称号詐称について伺います。イボンヌの香りという映画で、ロシアの伯爵を詐称して…匿名質問者
-
アスペルガー精神3級会社員男性(34歳独身)です。 元々眠りが浅いのに最近尚更深刻な夢や深く考え過ぎる夢を…hayakushinene1
-
いつもお世話になっています。 自分、インセル予備軍かもしれません。 街中でカップルや夫婦等見ると羨まし…hayakushinene