ジオプラスでAjaxは鬼門

こんにちわ。ジオプラスでAjaxサンプル作成中にハマっています。prototype.jsを使用するとブラウザを意識せずにHTTPリクエストを送信できるのですが、そのHTTPリクエストが送信されません。

Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリです。

調べてみたところ、IEではAjaxを用いた通信を行うと、GETメソッドの場合一度実行されるとデータがキャッシュされて、2回目以降の通信はそのキャッシュされたデータを読みに行くようになってしまいます。

この回避方法ですが、HTTPレスポンスに対してブラウザがキャッシュしないよう以下のようなレスポンスヘッダを返してあげなければいけません。

header("Cache-Control:no-cache, no-store"); header("Pragma:no-cache");

しかし、これだけでもまだHTTPリクエストが送信されません。HTTPリクエスト側で何か対応しなければいけないようです。対応方法は２つあります。

①HTTPリクエストヘッダに'If-Modified-Since'を付加する。
②GETメソッドで取得する先のURLにユニークIDを付加する。

実際のソースコードは以下になります。

function sendRequest(url){     var paramList = "time=" + (new Date().getTime());     new Ajax.Request(url, {         method:"get",         requestHeaders: ['If-Modified-Since', '01 Jan 1970 00:00:00 GMT'],         parameters: paramList,         onSuccess: function(xmlhttp) {         notes = eval('('+xmlhttp.responseText+')');         refreshListBox(notes);         }     }); }

しかし、まだまだダメです。FireFoxではOPTIONリクエストが送信されますが、IEはウンともスンとも言いません。
なぜFireFoxではOPTIONメソッドが送信されるのでしょうか？本来はGETメソッドのはずです。FireFoxでは、仕様で一旦HTTPメソッドOPTIONSでApacheに問い合わせ、クロスドメイン通信が許可されているかを確認してからGETメソッド等で実際の通信を行なうようになっているようです。しかし、その後GETメソッドが送信されていませんのでAjaxができません。

そう、ジオプラスではコンテンツとCGIのURLのドメインが異なるため、クロスドメイン問題が発生しているのです。

●コンテンツ(HTML)

http://www.skillworker.net/

●CGI(Perl、PHP)

http://cgi.skillworker.net/

ちなみにJSONPを使ってみましたが、同じ結果です。最近のブラウザではセキュリティが強化されているようです。セキュリティの設定を変えればよいのかもしれませんが、サイトに来てくれるユーザに設定変更させるわけにはいきません。というよりしてくれません。

JSON with paddingの略 Javascriptの非同期通信でよく使われるXMLHttpRequestオブジェクトにはSame-Originポリシーが存在し、クロスドメインアクセスができない。 一方，scriptタグを用いると，ドメインの異なるサーバに置いているスクリプトファイルを読み込むことができる。この仕組みを利用し、scriptタグのsrcに、データを取得できるAPIのURLを指定し，ドメインの異なるサーバからデータを取得する仕組みの総称として、JSOPという言葉が使われる。JSONP用のAPIでは、関数名＋取得データをjson形式で表記して引数とした形式(例.callbackFunc({id:1000,name:aaa}))のレスポンスが一般的で、APIから返されるコールバック関数と同じ名前の関数(callbackFunc(jsonData))をクライアント側で定義しておけば、データを読み込んだ際にそのコールバック関数が実行される。動的にscriptのDOMを生成することで、非同期でデータが取得できるようになる。

とりあえず、ジオプラス内でもAjaxが動くように対応中です。次回には対策を紹介したいと思います。あー大変。

タグ：ジオプラス Ajax Firefox キャッシュ クロスドメイン 別ドメイン JSONP JavaScript option Get