息をするようにJavaScriptを書きなさる人らは、「HTML内にJavaScriptのコードを書いてはいけない」と主張する。
でも、それって頭が硬いんじゃないの？
amachang氏はやや柔軟な方針を述べていて心強い。
http://d.hatena.ne.jp/amachang/20080517/1210991851
だって、<div>ここをクリック</div> に対して、外部jsファイルがイベントを割り当てる方法は存在しないんだもん。
すべてのタグにはidやらcssセレクタで特定可能な識別の余地を持たせろって？ それは野暮なことだ。
javascriptに対して「匿名関数を辞めろ」と言うくらい野暮だ。
単に <a href="blog/id/123">123番の記事を表示</a> というHTMLに対して、
<a href="blog/id/123" id="blog_id_123">123番の記事を表示</a>
<script> $(function() { $('#blog_id_123').click(function() { $.ajax({なにがし}) うんぬん </script>
とか書くのって無駄じゃん。
<a href="blog/id/123" ajax="なにがし">123番の記事を表示</a>
みたいに書きたいじゃん。
だから本番環境でもonclick使えばいいと思う。
インラインcssはダメとか、tableタグでレイアウト組んじゃだめとか、何かと縛りたがる神経質な人は多いけど、
そういう人に限ってあんまりいいサイトを作ってないような気がする。
前述の通り、「画面の見栄えを良くする事」と「XHRで非同期通信する事」は異なる。
この項では後者について言及する。
さくっと本題。HTML視点で見たときのAjaxの要件は次の通りではないかと思う。
- Aタグやbuttonを押下した際に非同期通信して、結果をidに出力/appendする。
- フォームのsubmitを押下した際に非同期通信して、結果をidに出力/appendする。
- 自動的に非同期通信して、結果をidに出力/appendする。
たぶん、それ以外は「複雑かつマイナーな処理」として、手で実装しても良いのではないかと思う。
すべての処理で、通信中はloadingアニメを表示したい。
エラー処理は、とりあえず簡素にする。alertするだけとか。しかし「何もしない」というのだけは却下。
HTTPメソッドは、上からGET, POST, GETで確定して良いと思う。
引数は、GET相手ならURLを拝借するべきで、POST相手ならフォームの値を拝借するべき。
xhrlink(href, target, is_append)
xhrform(href, target, data, is_append)
xhrload(href, target, is_append)
xhrloadだけ拡張の余地があって、
- intervalを指定するとタイマーでリロードする。0を指定すると初回一回限りとする。
- formに対応してpostメソッドを受け付ける。（これで下書きの自動保存が実装出来る）
というのを加えれば、ほぼ完璧だ。
xhrload(href, target, data, interval, is_append)
たったこれだけの事が出来れば、Ajaxに求めているものはほぼ完結するのだが、
残念ながらシンプルでミニマルなAjaxフレームワークが見つからない。
最新版の jquery.js をロードすると、55.9kbも通信コストが発生してしまう。prototypeだと2.5倍。
とりあえず jquery は色々便利っぽいので、組み込んでからどうするか考えよう。
symfonyには昔、シンプルなAjaxフレームワークが実装されていたのに、
最近は「各自で実装してください」と匙を投げてしまっている。なんか勿体ない気がする。
