htmlの準備

Ajaxはサーバー側のプログラムの方が重要な気がしますが、ここでは静的なhtmlファイルを使用します。
まずは読み込まれる側のhtmlファイルを作成します。

load.html

 
			<li>読み込めたかな？</li>

読み込まれる側は「li」だけです。「load.html」という名前で保存します。
次は読み込む側です。

index.html

 
			<ul id="sample01"></ul>
			<p><a href="#" id="button01">ボタン</a></p>

読み込まれる側は「li」だけだったので、読み込む側は「ul」ですね。idは「sample01」とします。
あとはクリックイベントでファイルを読み込みますのでボタンも作成します。

load.htmlのデータを取得して表示

ここからがjQueryのコードです。
読み込む側の「index.html」に記述します。

index.html

 
			<script type="text/javascript" src="js/jquery1.5.1.js"></script>
			<script type="text/javascript">
			$(function() {
				$('#button01').click(function() {
					$.ajax({
						   type: 'GET',
						   url: 'load.html',
						   dataType: 'html',
						   success: function(data) {
							   $('#sample01').append(data);
						   },
						   error:function() {
							   alert('問題がありました。');
						   }
					});
				});
			});
			</script>
type 送信するリクエストの種類です。基本的に「POST」か「GET」。
url 読み込むファイルを指定します。
dataType 受け取るデータの種類です。「html」の他には「xml」とか「json」ですね。
success データ取得後に実行する処理です。
error エラーが発生した場合実行する処理です。

これでボタンをクリックするたびに「load.html」の内容が追加されていきます。
またChromeではローカル環境で動作しないようです。ローカル環境で確認する場合はIEかFirefoxで確認しましょう。

ローダーの表示

サンプルのような軽いファイルなら必要ありませんが、重いファイルだったりサーバーの処理が必要だったりするときは待ち時間が発生します。
で、その待ち時間に行う処理の定番といえばローダーの表示ですね。
「ローディング ジェネレーター」などで検索すれば、ローディングのgifアニメを作ってくれるジェネレーターなどがすぐ見つかると思います。

準備ができたら「sample01」の下に以下のように配置します。

index.html

 
			<div id="loader"><img src="loader.gif" width="24" height="24" /></div>

そのままだと表示しっぱなしになってしまうので、cssで非表示にしましょう。

index.html

 
			#loader {
				display: none;
			}

jQueryのコードに以下を追加します。

index.html

 
		$(function() {
			$('#loader')
			.ajaxStart(function() {
				$(this).show();
			})
			.ajaxStop(function() {
				$(this).hide();
			});
			$('#button01').click(function() {
				........
			});
		});

読み込み開始時に「ajaxStart」が実行され、終了時に「ajaxStop」が実行されます。
それぞれの処理に「#loader」のhide、showを割り当てれば、ローディングの処理は完成ですね。