- 2008-10-02 (木) 22:19
- AJAX | MovableType
このブログでは、とりあえず今のところは「最近のアクセスランキング」と「Recent Bookmark」でしか使っていないですが、各パーツをモジュール化し、それをAjaxで読み込む方法をご紹介します。
では、「最近のエントリー」という部分をモジュール化して、Ajaxで読み出すことを例にして説明します。
まず、「最近のエントリー」ということでインデックステンプレートに新規でテンプレートを作成し、以下を書き込みます。保存するファイル名は、「recent_entries.php」とでもしておきます。
<div class="sidetitle">
Recent Entries
</div>
<div class="side">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>
これは、最近投稿したエントリーを10件表示するものです。
次に次のコードを同じく、インデックステンプレートとして新規に作成します。保存ファイル名は、「ajaxLoading.js」とします。なお、このテンプレートは一度作成したら再構築の必要がないので、公開プロフィールは「手動」にしておきましょう。
//ajaxLoading.js
function getFile(url,id) { url = url + "?" + Math.random(); new Ajax.Updater({success: id }, url, { method: 'get', onFailure: displayError(id) } );}
function displayError(id){ $(id).innerHTML = "loading failed!!";}
次に、パーツを読み出している間に表示するGIF画像を用意します。
↓たとえばこんなやつ。
他にもかっこいいものはたくさんありますので、下記のページで手に入れてみてはいかがでしょうか？
この画像ファイル(GIF)を「新規」＞「ファイルのアップロード」でアップロードしておきます。フォルダは任意でかまいません。
では、テンプレートに戻って。。。
ページのヘッダー部分に以下を入れておきます。<head>と</head>の間です。先ほど作成した「ajaxLoading.js」というファイルを読み込むわけです。
<script type="text/javascript" src="<$mt:BlogURL>ajaxLoading.js" charset="utf-8"></script>
さて、それでは、テンプレートの「最近のエントリー」を表示したい部分に以下のように記述しておきます。
<div id="recententries"><img src="<$mt:BlogURL$>images/ajax-loader.gif" width="16" height="16" alt="ajaxloader" /></div>
次に、下記のJavascriptをページのできれば下の方に記述します。（「最近のエントリー」より下である必要があります。）
- Ajax呼び出し部分
<script type="text/javascript">
//<![CDATA[
getFile('<$mt:BlogURL$>recent_entries.php', 'recententries');
//]]>
</script>
それではページが表示されると、挙動はどういう風になるのかというと、
- まず、ヘッダーに記述されている「ajaxLoading.js」を読み込む。
- 次に「最近のエントリー部分」にローディングの画像が表示される。
- そして、Javascriptからの読み出しにより、「最近のエントリー」部分を「recent_entries.php」の中身で書き換える。
という順番になります。
わかりにくいですかね？（＾＾；）
なお、この「ajaxLoading.js」を一回ロードしておけば、他の部分も同じようにAjax化して呼び出せるので、呼び出し部分だけ追加していけばよいです。
- 参考URL
Similar Posts:
- Ajax開発用Eclipseプラグイン「Eclipse Rich AJAX Platform」
- Ajax.Requestでクエリー付URLを送信する
- TAG Cloud Generator （タグ・クラウド・ジェネレータ）を作ってみた
- コメントアウトってペナルティーを受けるの？(MTIgnore)
- ダイナミックパブリッシングで静的ファイルを読み込む(smarty fetch)
- 当ブログのテンプレートをVICUNAテンプレートに変更！
- ダイナミックパブリッシングでクエリー付URLをインクルードする
- ダイナミックパブリッシングでPHPファイルの読み込みは
でいいらしい。 - MT4i version 3.0 β5がリリースされています
- MT4.2以前のテンプレートへ検索結果のページ分割を適用する方法
- Newer: CakePHP RC3リリース
- Older: 今日から4年目
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://www.multiburst.net/ElectricBrain/2008/10/ajaxajax/trackback
- Listed below are links to weblogs that reference
- 最近のコメント等をAjaxで読み込む(Ajaxによるモジュール化) from ElectronicBrain is eating BreakFast
