Ajaxで中継君のキャッシュを表示できないかなぁ

ページが表示されるまでの時間短縮にAjaxの非同期処理が使えないかなと挑戦したけど、うまくいかず。

やろうとしているのは、トラックバックピープルの表示をAjax的に非同期に読み込んで表示できないかということ。一応「中継君」というcgiを使って、キャッシュは効かせているのだけど、中継君の起動に割と時間がかかっているような気がするし、キャッシュが切れたら結局、最新情報を読みに行くので遅くなる。IEとかだとページの読み込みが終わらないと画面すら表示されないみたいだし、読み込みが遅い部分があると見ている方は結構ストレスになる。

ここらへんをAjax使うと非同期に処理して、サッとページが表示されて、後から順次情報が表示されていくようになるんじゃないかなーと思っていろいろ頑張ってみた。

ところが、おいらはAjaxどころかJavaScriptがいまいちよくわかってない非Webプログラマーなんで、まずはこちらでお勉強。
お、なんか意外と簡単そうじゃないか。prototype.jsを使えばブラウザ毎の差異も(あまり)気にしなくて良くなるみたいだし。JavaScriptで他のサイトの情報を取ってくることは出来ない制限があるらしいが、今回は自サイトに設置の中継君とやりとりするから、はからずとも制限は回避。

ただ、ここのサンプルはすべてボタンを押したときなどのタイミングでの処理なので、今回の目的とは少し違う。今回はページが表示されたら、勝手に非同期で情報を表示して欲しい。しかし、どうやるのかわからないので、サンプルを探す。以前見つけたお天気プラグインが似た動きをしていたのでソースを研究。なるほど、特定のdivタグを設置して、そこにinnerHTMLで結果を表示できるらしい。引数はurlという属性をdivに追加して渡すようにした。

しかし、ここで壁にぶちあたる。トラックバックピープルってJavaScriptのコードを返してるんですね。このコード内でdocument.Writeが実行されることで表示されると・・・。これそのまま出しても当然ただコードがWebページに出るだけ。一応、非同期に表示される所までは行ったけど、これじゃ意味がない。

試しにscriptのタグも一緒に出力するようにしたけど、今度は何も出なくなった。うーん、ここら辺がJavaScriptの書き方がよくわからんので困る。FirefoxにJavascript Debuggerというプラグインを入れてテストしてもよくわからない。もしかすると、Ajaxで後から動的にscriptタグを入れてるから、処理されないのかな。確かにそんな気がするな。

そもそもdivタグの特定のIDに処理するようにしたら、一ページ内に一つしかトラックバックピープルが表示できない。だめじゃん。そんなわけで表示位置にdivタグを置いて、functionからdivタグのidと引数を渡すようにした。これで複数のトラックバックピープルに対応できるかもしれないけど、結局、さっきの問題が解決しないと意味ないんですけどね。

トラックバックピープルはRSSも出力しているので、これをAjaxで取得して綺麗に整形して出すのがいいような気もする。それだとトラックバックピープル専用になってしまうな・・・。それかcgiの速度を速める努力をした方がいいのかも。

一応作ったソースをメモ

こちらがAjax的な動作をさせるためのJavaScript。

var elementId;
function display(id,url){
elementId = id;
var d = $(elementId);
$(elementId).innerHTML = ‘now loading…’;
var url = ‘https://a-tak.com/cgi-bin/jc.cgi?’ + url;
var httpObj = new Ajax.Request(url,{ method: ‘get’, onComplete: displayData });
}
function displayData(responseHttpObj)
{
$(elementId).innerHTML = responseHttpObj.responseText;
}

prototype.jsのAjax.Requestでデータを取得して、取得が完了するとイベントが発生してdisplayDataの処理が行われる仕組み。Webページの方はXOOPSのカスタムブロックにこんな風に記載。