最近のコメント等をAjaxで読み込む(Ajaxによるモジュール化)

このブログでは、とりあえず今のところは「最近のアクセスランキング」と「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>

それではページが表示されると、挙動はどういう風になるのかというと、

  1. まず、ヘッダーに記述されている「ajaxLoading.js」を読み込む。
  2. 次に「最近のエントリー部分」にローディングの画像が表示される。
  3. そして、Javascriptからの読み出しにより、「最近のエントリー」部分を「recent_entries.php」の中身で書き換える。

という順番になります。

わかりにくいですかね?(^^;)

なお、この「ajaxLoading.js」を一回ロードしておけば、他の部分も同じようにAjax化して呼び出せるので、呼び出し部分だけ追加していけばよいです。


コメントを残す

メールアドレスが公開されることはありません。

This site uses Akismet to reduce spam. Learn how your comment data is processed.