program note: PHPでJSONを出力して、JavaScriptで取得する方法

http://dot-town-lab.com/laboratory/item/24

JSON（JavaScript Object Notation）というデータフォーマットを扱ってみたのでメモしておきます。

JSONは、XMLなどと同じようなテキストベースのファイル形式らしい。名前に「JavaScript」が入っているように、JavaScriptとの相性がとても良いらしいので、試しに扱ってみる事に。

PHPでJSONを出力する

JavaScriptでJSONを扱う前に、PHPで扱うJSONデータを出力しようと思います。


<?php
// JSON形式のテキストを生成する
$json = <<< JSON_DOC
    [
    {"name":"Google", "url":"https://www.google.co.jp/"},
    {"name":"Yahoo!", "url":"http://www.yahoo.co.jp/"}
    ]
JSON_DOC;
 
// JSON用のヘッダを定義して出力
header("Content-Type: text/javascript; charset=utf-8");
echo $json;
exit();
?>

上の方法は、JSON形式のテキストを自分で生成してますが、PHP5.2以上からはJSONに関しての関数が用意されているので、そちらを使った方が確実です。

PHP5.1以下の場合は、PEARの「Services_JSON」を利用してください。


<?php
$json = array(
    array('name'=>'Google', 'url'=>'https://www.google.co.jp/'),
    array('name'=>'Yahoo!', 'url'=>'http://www.yahoo.co.jp/'),
);
 
header("Content-Type: text/javascript; charset=utf-8");
echo json_encode($json); // 配列をJSON形式に変換してくれる
exit();
?>

JavaScriptでJSONデータを取得するオブジェクト

非同期通信を行う場合は、jQueryの$.ajax()を利用した方が簡単ですけど、XMLHttpRequest()を使ったコードをメモしておきます。


var myajax = function (options) {
    options = options ? options : {};
 
    this.isloader = false;
    this.request = false;
    this.url = options.url;
    this.params = options.params ? options.params : null;
    this.error = typeof options.error == 'function' ? options.error : function (data) { return false; };
    this.loaded = typeof options.loaded == 'function' ? options.loaded : function (data) { return false; };
};
myajax.prototype = {
    load : function () {
        if (this.getRequest()) {
            this.sendRequest();
        }
    },
    getRequest : function () { // 通信のリクエスト
        if (!this.url || this.isloader) return false;
        if (window.ActiveXObject) { // XMLHttpRequest未実装ブラウザ
            try { // MSXML2以降用
                this.request = new ActiveXObject('Msxml2.XMLHTTP');
            } catch (e) { // 旧MSXML用
                try {
                    this.request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e2) {
                    this.request = false;
                }
            }
        } else if (window.XMLHttpRequest) { // XMLHttpRequest実装ブラウザ
            this.request = new XMLHttpRequest();
        } else {
            this.request = false;
        }
        return this.request ? true : false;
    },
    sendRequest : function () { // リクエストの送信
        var t = this;
        if (!t.request) return false;
        t.isloader = true; // 通信判定（重複通信を防ぐ）
        t.request.open('POST', t.url, true); // 初期化
        t.request.onreadystatechange = function () { // 進行状況の確認
            if (this.readyState == 4) { // 通信完了
                switch (this.status) {
                    case 200 : // 成功
                        var obj = eval(this.responseText); // オブジェクトに変換
                        t.loaded(obj);
                        break;
                    default : // 失敗
                        t.error(this.statusText);
                        break;
                }
                t.isloader = false;
                t.request = false;
            }
        };
        t.request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // ヘッダ設定
        t.request.send(t.setParameter()); // 送信
    },
    setParameter : function () { // 送信パラメータの設定
        if (!this.params) return null;
        var result = '';
        for (var key in this.params) {
            var value = this.params[key];
            result += (result ? '&' : '') + key + '=' + encodeURIComponent(value);
        }
        return result ? result : null;
    }
};

非同期通信を実行する

document.body.onloadを使用した場合は、bodyタグより下に記述しないと、bodyタグが存在しません的なエラーが返されるので注意。


<body>
    <!-- bodyタグより下に記述 -->
</body>
 
<script type="text/javascript">
//<![CDATA[
    var ma = new myajax({ // myajaxオブジェクトを生成
        url : '/ajax/json.php',
        params : {},
        error : function (data) {
            console.log(data);
        },
        loaded : function (data) {
            console.log(data[0].name); // 出力結果：Google
        }
    });
 
    document.body.onload = ma.load(); // 通信実行
//]]>
</script>

program note

2017年9月26日星期二

PHPでJSONを出力して、JavaScriptで取得する方法

PHPでJSONを出力する

JavaScriptでJSONデータを取得するオブジェクト

非同期通信を実行する

没有评论:

发表评论