Ajax + jQuery によるキャッシュ利用
eStudio の「プロジェクトの作成」のライブラリーやファイルの一覧を表示するための
「参照」ボタンを押して表示されるまでの時間が劇的に速くなったことをお気づきでしょうか ?
ある程度のスペックのあるPC であれば、ほとんど一瞬のあいだにライブラリーやファイルの一覧が
表示されてしまいます。
これはサーバー側とクライアントPC ( JavaScript = Ajax + jQuery ) によって極めて高度な
最新のキャッシュ技術が使用されているからです。
サーバー・サイドのキャッシュ技術
サーバー・サイドつまり System i 側ではライブラリーやファイルの一覧の変更が
直ちに検知されて 「参照用の XML」 を再作成する仕組みとなっています。
ライブラリーが作成されたときは QSYS 内のオブジェクトに変更日付・時刻が更新されて
これは LIBRARY という名前の弊社提供のプログラムが検知します。
各ライブラリー内のファイル等に変更があったときも LIBRARY によって変更が検知されます。
変更があれば LIBRARY は、それらを表示するための XML を新たに再作成して IFS に保存します。
ブラウザは保存された XML をダウンロードして一覧表として表示することになりますが
ブラウザは、以前に表示のためにに使用した XML を自分自身の ローカル・キャッシュ として保存して持っています。
ブラウザが保存しているキャッシュが十分に新しい、つまり以前に参照した日付・時刻以降に
ライブラリーやファイル一覧に何の変更もなければ、このキャッシュが利用されて表示されることになります。
このときサーバーからのダウンロードは発生することなく、ローカルPC から情報が読み出されますので
処理は一瞬で終えてしまい、ユーザーは最も良いパフォーマンスを得ることができます。
ファイル一覧の変更を検知することは比較的容易ですが、ライブラリーの変更を検知するのは
特殊な技術を必要とします。
クライアントのキャッシュ技術
■ Ajax によるリクエスト（要求）の問題点
ライブラリーやファイルの一覧を動的に柔軟に表示するためには Ajax による
非同期通信が必要となります。
ところが Ajax の通信では以前にサーバーにリクエスト（要求）した要求文に対する応答は
自動的にローカルPC 上にキャッシュされ、保存されます。
さらに同じリクエスト（要求）をサーバーに投げようとしても以前のキャッシュがあれば
それが採用されてサーバーへリクエスト（要求）を投げることは行いません。
つまり通常の GET や POST による要求とは異なりキャッシュの判断をサーバーに尋ねることは行わないのです。
このことは Ajax の当初からの問題点でした。Ajax による2度目の要求はすべてキャッシュが採用されて
しまうので繰り返し要求を行うことができなくなってしまうからです。
■ dummydate を付加して解決したが ?
このような Ajax の妙なキャッシュの癖に対して Ajax 要求の最後に dummydate=20100108123015 のように
現在の日付・時刻を付加して送信するという解決案が一般に行われていました。
eStudio のいくつかの機能も例外ではありません。
これで重複することのない dummydate を付加させたのでキャッシュが採用されることはなくなりました。
しかしこの dummydate を付加する方法もベストではなく次の問題点を含んでいました。
- Ajax の要求毎に dummydate別の不要なキャッシュが次々と数多く残ってしまう
- Ajax で本当にキャッシュを利用したいときにキャッシュを利用することができない
今回の問題は後者の「キャッシュが利用できない」という問題です。
これを解決したのが jQuery です。
■ jQuery による解決とキャッシュ技術
jQuery とは Ajax ライブラリーのひとつで 2006年1月に John Resig という開発者が発表したフリーかつ
オープン・ソースのライブラリーです。
Microsoft 社も jQuery を自社製品 VisualStudio に採用しています。
jQuery を利用すると通常の GET や POST の送信と同じように
if-Modified-Since を指定することができます。
if-Modified-Since とは HTTPプロトコルのひとつであり、ブラウザが静的なコンテンツを HTTPサーバーに要求するときは、
キャッシュがローカルPCに保存されているのであれば if-Modified-Since を使って HTTPサーバーへ要求します。
例えば、
GET /AS400DTA.HTM HTTP/1.1 If-Modified-Since: Wed, 08 Dec 2010 01:29:48 GMT
という要求は、
/AS400DTA.HTM をください。
ただし、こちらにも 2010年12月8日 1時29分48秒に入手して保管しているものがあります。
この日付・時刻以降に変更があれば再送してください。
ということになります。
保管日付・時刻より以降に変更があればもちろん HTTPサーバーはブラウザへ再送することになりますが、
何の変更もない場合は HTTPサーバーは
HTTP/1.1 304 Not Modified
と返答して送信は行いません。
このときブラウザは自分のローカルにあるキャッシュを読み出して表示することになります。
これがブラウザと HTTPサーバーとのキャッシュの仕組みです。
これまでの Ajax ライブラリーでは 「キャッシュするか、しないか」 という単純な選択しかありませんでしたが jQuery では
if-Modified-Since を指定して通常のキャッシュと同じ方法を利用することができるようになりました。
これによって Ajax はパワフルで柔軟でいて、それでいて優れたパフォーマンスさえも手にすることができるようになったのです。
よく xxxxxx/400 とかいう名前のクライアントサーバー型の前時代的なソリューションをいまだに最新であると
輸入販売している例がありますが、もはや ブラウザがプラットフォームの時代であることは Web2.0 powerd by Ajax の、
この優れた進化を見てもおわかりでしょう。
全世界の優れた技術者がこぞって Webの最新技術を生み出しているのです。
それでは Ajax + jQuery による if-Modified-Since によるキャッシュ技術を紹介して行きましょう。
Ajax + jQuery による if-Modified-Since によるキャッシュ技術
ここでは冒頭で述べたように、eStudio の「プロジェクトの作成」のライブラリーや
ファイルの一覧を表示を例として Ajax + jQuery によるキャッシュ技術を紹介します。
■ eStudio の ライブラリー、ファイル一覧表示のキャッシュ技術
■ 解説
前項で述べたように Ajax + jQueryで If-Modified-Since の指定が可能になり
キャッシュ技術を利用することができるようになりました。
これによりユーザーはストレスを感じることなく操作が行なえることができます。
Ajax + jQuery の If-Modified-Since を使って HTTPサーバーへ要求します。
GET /ASNET.USR/WWWMENU/LIBRARY/QSYS.XML HTTP/1.1
If-Modified-Since : Fri, 21 Jan 2011 12:15:00 GMT
ライブラリー一覧画面より IFS に保管されている 静的コンテンツである QSYS.XML を要求します。
ここで Ajax + jQuery のHTTP要求で If-Modified-Since で指定されている 日付・時刻 と
If-Modified-Since : Fri, 21 Jan 2011 12:15:00 GMT
System i の IFS 区画に保管されている QSYS.XML の 保管日付・時刻 を比較し
QSYS.XML 2011/01/20 12:15
If-Modified-Since で指定されている日付・時刻より以降に QSYS.XML に変更があれば
HTTPサーバーはPCブラウザへ最新の QSYS.XML を再送することになりますが、何も変更が
なければ HTTPサーバーは
QSYS.XML は前の状態よりに何も変更がないので PC のローカルキャッシュの情報を使用しなさい。
ということで HTTPサーバーより 応答をPCブラウザーに返します。
HTTP/1.1 304 Not Modified
この応答を受けてPCブラウザーでは、IFS に保管されている QSYS.XML には何も変更がないので
PCのローカルにキャッシュされている QSYS.XML を読み出し表示することになります。
このように Ajax + jQuery において キャッシュ技術を使用できるようになったことは、
Webの開発者、ユーザーにとって新たな世界への一歩になるでしょう。