そうだ。Ajax じゃなくて HTML に json を埋め込んでページと一緒に送信しちゃえばいい。HTML に埋め込んだ方が gzip が効いて通信量は減るし、Ajax によるサーバーの負荷も減る。なんて優しい設計なんだ。
唐突でしたが、本稿は、PHP で json データをファイルに書き出し、その json データを HTML に埋め込んで jQuery で処理するサンプル プログラムとメモです。
PHP で json データをファイルに書き出す
json にしたいデータを配列に格納し、json_encode() 関数で json に変換して file_put_contents() 関数でファイルに書き出します。
PHP
$json_array = array();
foreach( $rows as $data ){
$json_array[] = array(
'data1' => $data->data1,
'data2' => $data->data2,
'data3' => $data->data3,
);
}
$json = json_encode( $json_array, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP );
$file = 'json/data.json';
file_put_contents( $file, $json );
PHP と json については以下のページが詳しく解説されています。
json データを HTML に埋め込む
json データを HTML に埋め込むには、script タグで type 属性に application/json を指定します。jQuery で参照しやすいように ID 属性もお忘れなく。
HTML（PHP）
... <script id="dataJSON" type="application/json"><?php readfile( 'json/data.json' ); ?></script> ...
json の MIME タイプ
本当に「application/json」かな？ ソースが明示されていないときに疑うのは大事。Wikipedia のリンクを掲載します。日本語版て ちょっと不安だよね。というわけで英語版も。
HTML に埋め込まれた json を jQuery で処理する
script 要素の中身（json データ）を .html() 関数で取得し、$.parseJSON() 関数でオブジェクトに展開して $.each() 関数で処理します。
JavaScript（jQuery）
$('#dataJSON').replaceWith(
$('<div id="dataPool" />').css('display', 'none').append(function(){
var json = $('#dataJSON').html();
var items = $.parseJSON( json );
var $container = $('<div class="dataContainer" />');
$.each( items, function(){
var $item = $('<div />').addClass(this.data1).data({
data2: this.data2,
data3: this.data3
});
$container.append($item);
});
return $container;
})
);
このサンプル プログラムでは、json データを要素の data オブジェクトに格納したテンポラリ要素を生成しています。
階層構造の json を処理する場合の jQuery サンプル コード
以下の Stack Overflow エントリをご参考ください。日本語でok。
注意点
最近のグーグル先生は、JavaScript（jQuery）なんか余裕で解釈（実行）してページを解析しています。つまり、json から jQuery で生成した要素もページの評価に直接影響します。SEO を意識しなければなりません。これについて筆者の身に起きた悲劇を別記事にしていますので、よろしければご一読ください。
背景
データベースの情報を json で返す API をつくりました。その json データは、サイトのすべてのページで使うため、API へのアクセスはページビューに応じて多くなります。でも、データベースの更新頻度は低く、ほとんど毎回 同じ json データを返します。これは もったいない。何がって データベースのリソースが。筆者だってデータベースの負荷は低い方が良いことくらい心得ている。
改善策として、json をファイルに書き出します。ファイルにキャッシュするともいう。そしてクライアント側の JavaScript は、そのファイルを非同期通信で GET します。Ajax というヤツですね。
いや、ちょっと待って。それなら Ajax じゃなくて HTML に json を埋め込んでページと一緒に送信しちゃえば良いのでは。PHP で json データをファイルに書き出し、その json データを HTML に埋め込んで jQuery で処理する、この一連の流れがまとまったページが無かったので書きました。きっと誰かのお役に立つことでしょう！