MooToolsでボタンをクリックした後にAjaxコールを作成する

Question

ボタンをクリックした後にajaxコールを作りたいと思います。 私は、私のサイトの他の部分から要素をキャッチするためにajaxリクエストを作成する14個以上のボタンを持っています。そのために

Button, Button1, Button2, Button3 
|    | 
| load content | 
|    | 
|_______________| 

私はMooToolsの中で、このコマンドを使用しています

window.addEvent('load', function(){  
    new Request.HTML({  
     'url': '<?php echo $this->baseUrl() ?>/pageitems/1/news/?format=smoothbox', 
     'onComplete': function(answer) { 
      answer[1].getElements('.CatchClassId')[0].inject($('spendPointsContPages1').empty(), 
'bottom');  
     } 
    }).send(); 
}); 

そして

<div id="spendPointsContPages1"><img src="<?php echo $this->baseUrl() ?>/application/modules/Socialengineaddon/externals/images/loading.gif"/></div> 

DIVをロードするためにこれは、AJAX呼び出しを行っています。私は、私のタブのいくつかがクリックされた後、ajaxコールをするのが好きです。 それで、今のところ、私がページを読み込もうとすると、バックグラウンドでこのコンテンツのすべてが自動的に読み込まれてしまいます。

個々のタブをクリックしてコンテンツを読み込みたい場合。このようにして私はサイトのスピードを維持します。

これに関する助力？

Answer 1

開始時にすべてのコンテンツを読み込むのではなく、個々のボタンにイベントを追加する必要があります（サーバー側の読み込みより高速ではありません）。

HTML

<div id="menuBar"> 
    <button class="menuItem" data-page="home">Home</button> 
    <button class="menuItem" data-page="about">About Me</button> 
</div> 

Javascriptを

document.id('menubar').addEvent('click:relay(button.menuItem)', function() { 
    var requestedPage = this.getProperty('data-page'); 
    loadPage(requestedPage); // Where loadPage is defined somewhere else 
}); 

Answer 2

あなたはここにものを改善するためのいくつかのことを行うことができます。

1. をlocalStorageまたは単純な閉鎖を使用 - サポートされていない場合 - コンテンツが十分に安定していれば（動的に変化しない場合）、タブIDに基づいてキーのタブにレスポンスをキャッシュします。
2. ホバーインテントを追加 - 基本的にmouseoverでajaxリクエストを開始し、レスポンスをストレージに保存します。ユーザーが実際にクリックすると、キャッシュからの準備完了レスポンスが表示されます。

キャッシュを実行してリクエストクラスを拡張できるクラスを作成する手助けが必要な場合は、私がその点で行った作業を指摘できます。