問題 × 解決策

Ajaxで外部ファイルを表示させる

問題

外部ファイルを読み込んで画面に表示させるには?

解決策

「jQuery.ajax({ ... });」で「Ajax」を使用して外部ファイルのデータを取得する。

 

Ajaxによる、外部ファイルとの連携

Ajaxを用いることで、様々な外部ファイルとの連携を図ることができ、実現したい動作を大きくサポートしてくれます。
今回はAjaxで外部ファイルを表示させる方法をご紹介します。

DEMOはこちら

AJAXの基本的な記述例

AJAXの基本的な記述例は以下になります。

jQuery.ajax({
	type: 'post',
	dataType:'text',
	cache: false,
	url: "test.txt"
}).done(function(data) {
	$('.ajax-box .inner-box').html(data);
}).error(function(XMLHttpRequest, textStatus, errorThrown) {
	alert('error!!!');
	console.log("XMLHttpRequest : " + XMLHttpRequest.status);
	console.log("textStatus     : " + textStatus);
	console.log("errorThrown    : " + errorThrown.message);
});

ポイント!

  • jQuery.ajax({ … });」でAJAXを実行できます。
  • jQuery.ajax({ … }).done(function(data){ … }).error(function(){ … });」で、取得した場合の処理、取得できなかった場合の処理を合わせて記述します。
    done データの取得が成功した時に実行される関数です。
    正確には外部ファイルの取得処理のコールバックです。
    「done(funtcion(data){})」のdataが外部ファイルのデータになります。
    error リクエストが失敗した時に行われる関数です。

「jQuery.ajax({ … })」のパラメータの一例

type 外部ファイルへ渡すデータのタイプ(POSTまたはGET)を指定できます。
dataType 取得するデータの型を指定できます。
cache キャッシュをさせるかさせないかを設定できます。
url 外部ファイルのパスです。

HTML

AJAX処理を行うためのボタンと、AJAXで外部ファイルから読み込んだデータを表示させるための空の要素を用意します。

<div class="ajax-box">
<p class="btns"><a href="#">外部ファイルを表示</a></p>
<div class="inner-box"></div>
</div>

CSS

AJAXの処理が完了するまで、ロード中であることを示すため、ローディング画像を表示させるためのcss設定を行います。

.ajax-box .inner-box .loading-box{
	display: block;
	height: 130px;
	background-image: url("ajax-loader.gif");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100px auto;
}

AJAXの処理の記述例

DEMOで行っているAJAXの処理の記述例は以下になります。

if($('.ajax-box').length){
$('.ajax-box .btns a').click(function(event) {
	//aリンクの動作を停止
	event.preventDefault();
	$('.ajax-box .inner-box').html('<div class="loading-box"></div>');
	jQuery.ajax({
		type: 'post',
		dataType:'text',
		cache: false,
		url: "test.txt"
	}).done(function(data) {
		$('.ajax-box .inner-box').html(data);
	}).error(function(XMLHttpRequest, textStatus, errorThrown) {
		alert('error!!!');
		console.log("XMLHttpRequest : " + XMLHttpRequest.status);
		console.log("textStatus     : " + textStatus);
		console.log("errorThrown    : " + errorThrown.message);
	});
});
};

ポイント!

AJAXによる外部ファイルの読み込み+表示が完了するまでローディング画像を表示させておくため、事前にローディング画像表示用の要素を配置し、外部ファイルのデータをローディング画面と置き換える形で表示させます。

参照

以下のサイトが、より詳しく解説してくれています。

【$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/ajax/ajax

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

18 − twelve =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧