検索
2014
10
4
jQueryのAjax関数で外部ファイル読み込みに入門してやんよ!!!
タグ：Ajax
更新が滞ってしまいました・・・全国5000万人の「ときどきWEB」ファンの方々、すいませんでしたm(_ _)m 初心に帰ってページ読み込みの負担を軽減させるには必須技術となる非同期通信。 ちゃんと習得していこうと思います。
jQueryのajax関数とは？
いわゆる「非同期通信」というヤツです。 ページ遷移を行わずに足りないデータだけをサーバーにリクエストして読み込むことができます。 Facebookのページ下までスクロールするとどんどん過去の投稿がでてきたり、 Googleマップなどもマップ内を移動したら、ウィンドウのリロードなどをせずともその場所のデータを新たにフレームワークに読み込んだりできますよね。 実際にはJavaScriptとXMLでなんやかんやして・・・ といったちょっとクライアントサイドをかじった程度の素人には敷居が高い技術の様に思えますが、jQueryの関数でajax()というネ申なモノがあるので、今回リファレンスではなくこのajax()を使って現状のサイトをもっと高速化・高機能化していこうという趣旨です。 ajaxの説明に関しては他のサイト様で素晴らしいリファレンスしてくれますので。ajaxを使って外部ファイルを読み込む
という事でひとつのフォルダの中に読み込み元となるhtmlファイルと 呼び出し先となるtxtファイルを準備します。呼び出し元ファイル（index.html）の設定
HTMLの記述
<dl class="tigger">
<dt>開く</dt>
<dd><!--sample.txt読み込み--></dd>
</dl>
CSSの記述
dl.tigger {
width: 320px;
background:#999;
margin: 0 auto;
}
dl.tigger dt{
background:#333;
color:#fff;
font-size: 20px;
text-align:center;
cursor: pointer;
font-weight: bold;
}
dl.tigger dd{
display: none;
padding: 10px;
}
JavaScriptの記述
$(function() {
$('.tigger dt').click(function(){
$(this).next().slideToggle();
$.ajax({
data : {
triggerNum : $('.tigger dt').index(this),
},
success : function(data) {
alert('読み込み成功');
$(".tigger dd").load("sample.txt");
},
error:function(data) {
alert('読み込み失敗');
}
})
});
});
呼び出し先外部ファイル（sample.txt）の設定
読み込み完了上記2ファイルを同ディレクトリに管理してください。 アコーディオンをクリックする事で外部sample.txtファイルを読み込みます。 デモページはコチラです。
ajaxを使って複数の外部ファイルを読み込む
この要領で複数の外部ファイルを読み込んでみます。 ただ前項の処理だと同じファイルしか読み込めないので、ナンバリングを変更したファイルをクリックされた各アコーディオンの中に読み込みたいと思います。呼び出し元ファイル（index.html）の設定
HTMLの記述
<dl class="tigger">
<dt>開く</dt>
<dd><!--sample1.txt読み込み--></dd>
<dt>開く</dt>
<dd><!--sample2.txt読み込み--></dd>
<dt>開く</dt>
<dd><!--sample3.txt読み込み--></dd>
</dl>
JavaScriptの記述
$(function() {
$('.tigger dt').click(function(){
$(this).next().slideToggle();
$.ajax({
context: $('.tigger dt').index(this) + 1,
data : {
triggerNum : $('.tigger dt').index(this) + 1,
},
success : function(data) {
//alert('読み込み成功');
$(".tigger dd").eq(this-1).load("sample" + this + ".txt");
},
error:function(data) {
alert('読み込み失敗');
}
})
});
});
呼び出し先外部ファイル（sample1.txt～sample3.txt）の設定
sample1.txtの記述
sample1.txt読み込み完了！
sample2.txtの記述
sample2.txt読み込み完了!!
sample3.txtの記述
sample3.txt読み込み完了!!!各アコーディオンをクリックする事で該当するナンバリングの外部txtファイルを読み込みます。 ※txtファイルの名前を変更してしまうと読み込みに失敗してしまうので、複数の方が管理するサイトに導入する場合は共有してください。 デモページはコチラです。
ajaxの処理データをCSVファイルに書き込む
ajax関数の能力はこんなモンではありません！ 最後にこの仕様で作られたアコーディオンが何回クリックされたかを外部phpファイルを使ってCSVファイルにデータを書き込みする機能を追加したいと思います。 ひとつ新規フォルダを作成し以下のファイルを準備してください。- ①読み込み元ファイル・・・index.html
- ②外部読み込みファイル・・・sample●.txt
- ③データ追記処理ファイル・・・testAjax.php
呼び出し元ファイル（index.html）の設定
HTMLとCSS、読み込みtxtファイルの設定は前項を参照してください。JavaScriptの記述
$(function() {
$('.tigger dt').click(function(){
$(this).next().slideToggle();
$.ajax({
type: 'GET',
url: 'testAjax.php',
async: false,
context: $('.tigger dt').index(this) + 1,
data : {
triggerNum : $('.tigger dt').index(this) + 1,
},
success : function(data) {
//alert('読み込み成功');
$(".tigger dd").eq(this-1).load("sample" + this + ".txt");
},
error:function(data) {
alert('読み込み失敗');
}
})
});
});
データ追記処理ファイル（testAjax.php）の設定
<?php
/* 開いたアコーディオン項目判定 */
switch($_GET['triggerNum']){
case $_GET['triggerNum'] = 1:
$_GET['fileNum'] = "ファイル①";
break;
case $_GET['triggerNum'] = 2:
$_GET['fileNum'] = "ファイル②";
break;
case $_GET['triggerNum'] = 3:
$_GET['fileNum'] = "ファイル③";
break;
}
/* 配列の作成(年月日,時刻,トリガー番号,オプション項目) */
$array = array(date("Y/m/d"), date("H:i"), $_GET['triggerNum'] ,$_GET['fileNum']);
/* ファイルポインタをオープン */
$file = fopen("testAjax.csv", "a");
/* CSVファイルを配列へ */
if( $file ){
var_dump( fputcsv($file, $array) );
}
/* ファイルポインタをクローズ */
fclose($file);
$triggerNum = $_GET['triggerNum'];
document.write($triggerNum);
?>
上記の各ファイル内容を設定したフォルダをサーバーにアップしてページにアクセスしアコーディオンをクリックするとアップしたサーバーのフォルダ内にtestAjax.csvが生成されていると思います。
こちらのCSVファイルのセルに下記項目のデータが追記されます。
- ①クリックした年月日
- ②クリックした時刻
- ③トリガー番号
- ④各ファイルのデータ項目
