問題
外部ファイルを読み込んで画面に表示させるには？
解決策
「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
コメント