ぼちぼち最近流行り(?)のAjaxに手を出してみようかと思い以前購入した本を片手に始めてみた。
ハマった…相当ハマった…「GET」と「POST」に…。
丸々土日がつぶれた…。他にやることあったのに,完全に予定が狂った。
そもそもなぜAjaxをやろうと思ったか。まぁ,動機は不純です。
楽をしたいから
本体サイト「LIFE FOR…」の音楽ページでまだ数は少ないですが,アーティストの情報を載せています。
まだ3アーティストなのでメンテナンスもさほど大変ではないですが,リリースがあるたびに更新していく作業そしてHTMLソースの肥大化が気になりました。
更新する内容は決まりきっているので
「この単純な作業をなんとか簡単にできないものか?」
と思ったのが始まりです。
※現在,掲載しているアーティストで活動しているのはDEENのみですが,これから新たに追加していき,メンテナンスする手間を考えると簡単にできることにこしたことはない。
最初はPHPでテキストファイルの読込みを行い,それを解析して表示させる方法を考えていたのですが,どうにもそれは面倒だなと思っていた。
やればできないことはないのだが,「テキストファイル」でやる以上そのファイルに余計なものは入れたくない。テキストファイルなら読み込んでそのままズバッと表示したい!!
PHPでテキストファイルの中身を解析する場合,何か区切り文字を用意しそれをデリミタとして分割していく,という方法がある。掲示板がまさにそんな感じだ。
そのデリミタを記述したくないというこだわりを持っており,PHPでやるのをためらっていた。
そこで前々から興味のあったAjaxをちょっと真剣にやってみようかと思ったわけです。
Ajaxの詳しい説明については本体サイトでページを作る予定なのでそっちに譲ります。
とりあえず本のサンプルをやってみようと思い,本に記載されているコードをほぼ丸写ししました。
いざ,実行してみると期待通りの結果が得られず。
そしてデバッグ祭りへ…
JSライブラリを使用しているのだが,自前のものではないためその解読から始まる。
引数などいろいろ変えてみるが効果なし。
怪しげなところにalertを入れどこまで処理が進んでいるのか見てみる。
※prototype.jsやjQueryなどではなく,本の著者が作成したライブラリ。著者のブログから入手可能。
その結果,
XMLHttpRequestオブジェクトのopenが出来ていないことを突き止める。
openに最低限必要な「メソッド」と「URL」に的を絞る。
サンプルのメソッドは「POST」。試しに「GET」にしてみる。
と,
( ゚д゚)<動いたよ!ママ~ン
( ゚д゚)<原因はこいつか!
まぁ…「動いたならそれでいいジャマイカ」…と思うことができれば幸せになれるのだろうが,
なぜPOSTじゃダメなの?
と思ってしまったわけですよ。
オレは疑問に思ったらとことん突き詰めるタイプなのでここからが勝負。
またGoogleと親交を深めた。
.htaccessの設定を変えてみたり,XML自体の書き方が悪いのかと思い調べ直したり。。。
一向に改善する気配がない…。
次に,ライブラリのソースに全てのヘッダ情報を表示する(getAllResponseHeaders)箇所がコメントアウトされていたのでそれをはずしてPOST・GETで試してみた。
その結果↓(画像クリックで拡大表示します。※要Javascript)
図1:さくらインターネットでPOST
図2:さくらインターネットでGET
まず着目したのが3つめの赤枠部分…「Content-Type」。
POSTの時は「text/html」(図1),GETの時は「text/xml」(図2)。
読み込んでいるファイルはXMLなので「text/xml」が正解。
POSTの「text/html」ってのを見るとXML自体が読み込まれていないのではないか?
と思って,文字コードやヘッダ情報関連をいろいろいじくるが状況変わらず。
後にこれはまったく見当違いだと判明。
次に最初の赤枠部分…「405」と「200」に着目。
これはHTTPのステータスコード。
※これはgetAllResponseHeadersではなく,statusプロパティで表示してます。
で,「200」は正常にやり取りができたという意味。
たいてい「200」以外はエラー。
この「405」を調べてみた
Method Not Allowed
「そのメソッドは許可されていません」という意味らしい。
つまり,「POST」は使えねーんだよ,もっと勉強して出直してこい!
と言っているわけだ。
・
・
・
・
・
ふと,2007年6月23日に書いたIMAPの件を思い出し,
「FC2で試したらどうだろう?」
と思った。
その結果↓(画像クリックで拡大表示します。※要Javascript)
図3:FC2でPOST
図4:FC2でGET
最初の赤枠部分。
両方とも「200」が返っている。
このFC2とさくらインターネットの挙動の違いはなんだろう?
再びGoogle。
「GETはできるがPOSTができない」という記事はいくつか見つけたが,根本的な原因が書いていない。もちろん解決方法も。
両者の違いをよく見ると
Apacheのバージョン
図1と2,図3と4の2つめの赤枠部分。
さくらは1.3.37
FC2は2.0.59
結局土日かけても問題は解決せず,昨日の仕事中これがどうしても気になって再び調べたらある事実が判明。
CGIなどではない静的ファイルにPOSTメソッドでリクエストしてGETと同じような応答が返ってくる現象は,Apache1.3では起きずApache2だけである。
えっ!?Σ(゚д゚)!!
つまり…Apache2.x.xはPOSTでもGETでも同じで,Apache1.3.xは(静的ファイルに対しては)POSTは使えないよ,と。
仕様かよ…orz
「POST」自体が悪いわけではなく,その使い方に問題があった。
実際BBSではformのmethodにPOST使ってるし。
なんかInputFilter導入の影響がどうのと書いてあったけどこちら側でどうにかできる問題ではなさそうだ。
さくらインターネット…ApacheとPHPのバージョンアップしてくれないかな(´・ω・`)
IMAPに関してはPHPのバージョンアップしただけでは使えるようにはならんけど。
別に「どうしても(静的ファイルに)POSTを使いたい!」ってわけじゃないから別にいいっちゃぁいいんだけど。
Ajax…Javascriptなだけに他にも色々と…それはもう色々と問題がある。
IE6とFirefoxは別ドメインのファイル読み込みができなかったり(読み込む方法あるらしいけど),IEはセキュリティの観点からローカルファイルの読み込みができなかったり(これは仕方ないか)。
いや,待て…これらはJavascript関係ないな。ある意味ブラウザの仕様か。
ブラウザごとの挙動の違いは周知の事実。
しかし世の中にはその問題を吸収するライブラリがたくさんある(゚∀゚)!!
吸収どころかサイトを綺麗に,華麗に装飾してくれるライブラリもたくさんある(゚∀゚)!!
機会があれば紹介したいと思います。
便利だけどその分問題を抱えてそして頭を抱える…
それが
Ajax
こんな締めでいいのだろうか。