PHPでJSONを出力して、JavaScriptで取得する方法
- February 12th, 2011
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>
- February 12th, 2011