Ajax.Request GET --> OPTIONS

Ajaxなプログラミング経験は少ないのだが、本を片手にAjax.Requestを使ってみようと思ったら、超はまった。

原因は、クロスサイトHTTPリクエストだった。

ブラウザのアドレスに、http://munepi.com/test.html と入力してHTMLを表示させ、
JavaScript内で、

new Ajax.Request('http://www.munepi.com/study/feed',
  {method:'get',
  ...
});

とやったら、クロスサイトリクエストとみなされて、本来GETで出されるはずのHTTPリクエストが、OPTIONSになってしまっていた。

また、同じく http://munepi.com/test.html と入力してHTMLを表示させ、
JavaScript内で、

new Ajax.Request('./study/feed', {
  method:'get',
  ...
});

とやった場合は、GETにはなるのだけどリクエストがwww.munepi.com/study/feed宛でないため、wordpress側が 301moved permanently のレスポンスを返す。

http://www.munepi.com/test.html と入力してHTMLを表示させれば上のどちらでも、問題ない。

クロスサイトHTTPリクエストができないというのは、本に書いてあったんでわかっていたのだが、wwwのありなしで違うサイトと見なされたというのが今回の盲点。
munepi.comはhttp://munepi.com/でも、http://www.munepi.com/でもアクセスできるので、それが問題を誘発した形である。
とりあえず、Ajax.Requestはできるようになったけど、悩みが残った。

| | コメント (5) | トラックバック (0)

Ajaxした

仲間内でやってるテニスサークルの予定表をWebで管理しているのだが、BBSも欲しいというのでAjaxで作ってみた。

そもそも予定表は簡単なものなので手書きで修正してアップしていたのだが、BBSをつけたからといってサーバーサイドでHTMLをいちいち作らせるようにすると、内容もデザインも気楽に修正しにくくなる。

Ajaxなら、BBSデータをクライアントサイドで合成する形だから、Webサーバーがファイルを送ればいいという意味においては、HTMLは静的なままでよい。
デザイン・内容も気楽に変えられる。

もっとも、その後BBSのデータを転送するCGIは走る。

内容はこんな感じ:

  1. 書き込みフォーム&BBS表示するHTML。(予定表と兼用)
  2. BBSの内容をXMLで返すCGI。
  3. 書き込み用CGI。

1番にはJavascriptも埋めてあって、ロード時に2番のCGIを呼んで内容を含んだXMLを取得し、適当に整形して1番のHTMLに埋め込む。
書き込み時は、フォームのボタンを押したときにJavascriptでCGIへ転送する。ここではSubmitボタンは使わないのがミソ。書き込みによるBBS内容の変更も元のHTMLを直接編集するだけだから、ページ遷移も必要ないしページ生成CGIもいらない。

なかなかよくできたのだが、仲間内用なので非公開なのがまたミソ。

| | コメント (2) | トラックバック (0)