Ajaxload – Ajax loading gif generator

もう Ajax の時代ですね。Ajax はデータベースから情報を瞬時に取り出し、リアルタイムで table を書き換えたり、ほぼバックグラウンドでデータベースの書き換えが行えるので、もう手放せません。

ただ、EC サイトとかには非常に有用ですが、PV を稼ぐ必要のあるサイトには、上手く導入するところとしないところ分けないといけませんな。

例えばお問い合わせフォームを作る時、以下のようになることがあると思います。

1
2
3
4
5

<form method="post">
<table>
<tr><th>名前</th><td><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10">

これは問題の無い場合です。しかし以下のようになると問題が発生します。問題が発生するというか、本来これは間違った書き方になるので問題が発生するしないに関わらずダメなんですが、通常どのブラウザでも問題なく表示されてしまうのでミスだということに気付けません。

1
2
3
4
5
6

<table>
<tr><th>名前</th><td><form method="post"><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10"></textarea><br />
<input type="submit" value="メール送信" /><input type="reset" value="クリア" /></form></td></tr>
</table>

しかし、上記のような間違った書き方をしているファイルを、Ajax.Updater で部分的に更新させるために別で読み込もうとすると IE Chrome Opera Safari などのブラウザでは問題なく表示されますが、Firefox ではレイアウトが崩壊するようになります。おそらく CSS が上手く適用されなくなるのが原因だと思われますがあくまで推測です。Firefox は真面目で本当に良い奴ですね。

Firefox にバグがあるわけではなく、Firefox が Ajax に上手く対応できていないわけではなく、自分が間違っているので　Firefox に怒らないでください。私は(Firefox にもバグあるじゃないか！と)怒ってしまったので後悔しています……。

HTML CSS と学び、PHP MySQL を使いまくって大規模なウェブサイトを構築していたんですが、最近規模が大きくなりすぎてページを表示させるまでにかかる時間が5秒になってしまいました。利用者は小さな処理をするだけなのにページ全体を読み込むため、大変なストレスになってるはずです。通りで最近 PV が極端に落ちてきているわけです。

Ajax は必要な情報を必要なだけサーバーから取り出すことができそうなので、小さな処理のためにページ全体を読み込む手間が省けそうです。

Ajax 入門に際して参考になったページ

Ajax初心者入門講座

ページの一部だけを部分的にリロードする方法は以下のページ

Ajax.Updater – Ajaxで指定エレメントの内容を書き換える – prototype.jsリファレンス
Ajaxで特定部分を書き換える – JavaScriptist
さてさて、またしても IE 登場。もう意味わからん。IE6 も IE7 も本当にレベル低いな。とりあえず IE 対策で今日も人生を削ります。Ajax.Updater は IE では動かない。Firefox と Chrome では問題なく軽快に動きます。ちなみに解決策は以下のページに書いてありました。貴重な情報をありがとうございます。
IEでAjax.Updaterが動かない : Nacky – Snowland.net
prototype.jsの話 – はまろぐ
でも上記ページを見ても解決には至りませんでした。というか記事を読んでも何を具体的にどうしたら良いかわかりません。っていうか私が悩んでいることと、この人たちが悩んでいることは違うような気がします。
というわけで、他にもいろいろなサイトを見ているうちに、たぶん IE は異常にキャッシュをするのが好きらしいのが原因だということに気付きました。
IEでGETがcacheされる件　—　takaki-web.media-as.org

このページにたどり着くのに以下のページを経由しました。
Ajax勉強中 – 最近のKamaQ

参考にしたけど活用はしなかったページ

Ajax入門
Ajax初心者入門講座: Step14・sample003の解説
Ajaxによる軽量高速化テクニック – ［JavaScript］All About
最短のXML入門とメタ言語