PHPBaseドキュメント

３００．サンプル概要と都道府県一覧

　JSONとはJavaScript Object Notationの略で、データ形式の1つです。簡易版のXMLと言った理解でもいいかと思います。
　名前にJavaScriptと入ってますが、何もJavaScriptに限ったことではなく、PHP、C#、C++などなどでも使用できます。
　ここでJSONについての説明は行いませんので、各自調べてください。

　さてJSONを使うと何ができるのかですか、PHPとのかかわりについて考えますと、PHPで作成されたページには多くの場合JavaScroptが記述されます。
　また、JavaScroptのXMLHttpRequestという機能を使いますと、動的にPHPにアクセスでき、PHPオンリーで作成するのとはまた違った動きを表現できます。

動的なページへのアクセス

　PHPに限らず、WEBシステムはリクエストとレスポンスにより動作します。
　リクエストはブラウザからサーバへの要求でありレスポンスはサーバからブラウザへの返答です。
　基本的にこれはページ単位で行い、ブラウザがそのページにアクセスする（URLにアクセスする）ことで実現します。
　しかし、多くの情報を含むページだと、再読み込みの際、大量のデータがやり取りされるので、ブラウザ、サーバともに負荷も大きくなります。
　加えて、ページの更新が発生するので、ちらつきや今、見ていた箇所が初期化されるという部分があります。
　こういったWEBの基本仕様を超える機能がXMLHttpRequestと言えます。
　XMLHttpRequestを使うと、ページを表示したまま表示領域の一部分を更新することが可能です。

JavaScriptとJQuery

　さて、JavaScriptは、仕様自体はシンプルで扱いやすいのいですが、いろいろ表示面（デザイン等）のコードを記述すると、コード量が半端ではなくなります。しかし、最近ではJQueryというJavaScriptのライブラリを使用することで、大量のJavaScript構文から解放される手段があります（最近ではといっても10年くらい前から、ですが）。
　また、JQueryはプログラムのライプラリというよりはドキュメントのライブラリという側面が強く、制御構造なんかもほとんど書くことがなくページを動的にデザインすることができます。そのためWEBデザイナーの皆さんも愛用者が多く、独自のコントロールなんかもプラグインで公開している人もたくさんいます。

JQueryとAJaxとJSON

　さてそういったJavaScriptとJQueryの関係があるわけですが、JavaScriptのXMLHttpRequestもJQueryによってオブジェクト化されています。それをAJaxといいます。
　このサンプルはAJaxを使ったJSONデータの取得のサンプルです。

JQueryとAJaxとJSON

　ではJQueryとAJaxとJSONを使うと、いったいどのようなこ形になるのでしょうか？
　このサンプルは、一番単純な形で都道府県一覧を実装しています。
　メインメニューの都道府県一覧(JSON版)をクリックしてください。

図0301a

　まず、リンク先を見ていただくと、これまではPHPファイルでしたが、今回は/source/prefecture_list_json.htmlになってるのがわかると思います。そうです、今回は通常のHTMLドキュメントがサンプルになります。
　これまでの場合は、PHPファイルに直接HTMLを記述する形であれ、Smartyを使ってテンプレートの記述する形であれ、PHPのレスポンスがすなわちHTML文書でしたが、今回はJavaScropt内で文書成型を行っています。
　実行の流れは以下のようになります。

１、/source/prefecture_list_json.htmlにリクエスト
２、HTMLロード時に/source/prefecture_list_json.phpにリクエスト
３、PHPからJSONデータのレスポンスを得る
４、JavaScript（AJax）で文書成型

　またページのリンクをクリックすると以下のようになります。

１、ページリンククリックで/source/prefecture_list_json.phpにリクエスト
２、PHPからJSONデータのレスポンスを得る
３、JavaScript（AJax）で文書成型

　つまり、HTMLのロード時とページリンククリック時に/source/prefecture_list_json.phpにアクセスします。

　/source/prefecture_list_json.phpにブラウザから直接アクセスすると以下のようなデータがレスポンスされます。

{"allcount":"48","limit":20,"page":1,
"rowdata":[
{"prefecture_id":"1","prefecture_name":"\u5317\u6d77\u9053"},
{"prefecture_id":"2","prefecture_name":"\u9752\u68ee\u770c"},
....以下省略

　これがJSON文書です。ぱっと見わかりにくいですが、XMLのように構造化された形式です。都道府県に日本語が入っているので、"\u5317\u6d77\u9053"のようになってますが、これはエンコードされた形ですので、デコードすれば北海道のようになります。

PHPコード

　それでは、/source/prefecture_list_json.phpを見てみましょう。全行紹介しても、以下のようにシンプルです。

//ライブラリをインクルード
require_once("inc_base.php");
require_once($CMS_COMMON_INCLUDE_DIR . "libs.php");

//ページの設定
//デフォルトは1
$page = 1;
//もしページが指定されていたら
if(isset($_GET['page']) 
    //なおかつ、数字だったら
    && cutil::is_number($_GET['page'])
    //なおかつ、0より大きかったら
    && $_GET['page'] > 0){
    //パラメータを設定
    $page = $_GET['page'];
}

//1ページのリミット
$limit = 20;
$rows = array();
//データの読み込み
readdata();
//一覧データをjsonで返す
echo json_encode($rows);


/////////////////////////////////////////////////////////////////
/// 関数ブロック
/////////////////////////////////////////////////////////////////

//--------------------------------------------------------------------------------------
/*!
@brief  データ読み込み
@return なし
*/
//--------------------------------------------------------------------------------------
function readdata(){
    global $limit;
    global $rows;
    global $page;
    $obj = new cprefecture();
    $allcount = $obj->get_all_count(false);
    $rows['allcount'] = $allcount;
    $rows['limit'] = $limit;
    $rows['page'] = $page;
    $from = ($page - 1) * $limit;
    $rows['rowdata'] = $obj->get_all(false,$from,$limit);
}

JavaScriptコード

　続いて/source/prefecture_list_json.htmlです。この中でポイントはJavaScript内のread_phpdata()関数になります。

function read_phpdata(pageid){
    $.ajax({
        type: "GET",
        url:  "prefecture_list_json.php",
        data: "page=" + pageid.toString(),
        dataType: "json",
        
        crossDomain: false,
        scriptCharset: 'utf-8'
    }).done(function(data){
        // 成功
        //ページブロックの書き出し
        var PageStr = "";
        var pagemax = Number(data.allcount)  / Number(data.limit);
        if(Number(data.allcount) % Number(data.limit)){
            pagemax++;
        }
        if(pagemax > 1){
            for (var i = 1; i <= pagemax; i++){
                if(i != 1){
                    PageStr += ' > ';
                }
                if(i == Number(data.page)){
                    PageStr += i.toString();
                }
                else{
                PageStr += 
                    '<a href=\"javascript:void(0);\" onClick=\"read_phpdata('
                    + i.toString()
                    + ');\" >'
                    + i.toString()
                    + '</a>';
                }
            }
        }
        $('#pageBlock').html(PageStr);

        //一覧ブロックの書き出し
        $('#dataTable').find("tr:gt(0)").remove();
        for (var i = 0; i< data.rowdata.length; i++){
            $('#dataTable').append(
                    '<tr><td width="20%" class="center">' 
                    + data.rowdata[i].prefecture_id
                    + '</td><td width="80%" class="center">'
                    + data.rowdata[i].prefecture_name 
                    +'</td></tr>');
        }
    }).fail(function(jqXHR,textStatus, errorThrown){
        // エラーの場合処理
        $("#pageBlock").text("エラーが発生しました：" 
        + jqXHR.status + ": " + errorThrown);
    });
}

　ここで、PHPファイルにアクセスしてHTMLを成型したいます。
　このコードではJQueryを使っていて、以下のような記述、もしくはダウンロードしてそのJQueryのインクルードが必要です。また、正常に動作しない場合は、JQueryのバージョンを変えてみてください。サンプルのは現時点での最新になってます。

<link href="css/main.css" rel="stylesheet" type="text/css">

　このサンプルでは、追加や更新ができないようになっています。そういう機能を実装するにはもう少しテクニックが必要になります。また、一般的には、何らかの認証機能も必要でしょう。そのあたりも含め、今後機会があればサンプルを用意したいと思います。

３．JSONを使ったサンプル

３００．サンプル概要と都道府県一覧

動的なページへのアクセス

JavaScriptとJQuery

JQueryとAJaxとJSON

JQueryとAJaxとJSON

PHPコード

JavaScriptコード