JSON形式のデータを返すAPI
json_encode関数を用いることで、JSON形式のデータを簡単に生成できます。
APIを作成するにあたって、ブラウザから直接アクセスすることによって意図しない動作を引き起こすことがないように、適切に処理する必要があります。
以下サンプルでは、ブラウザ直アクセスの場合エラーになるようにしています。
json.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?php # jQueryなど主要なJavaScriptライブラリを通じてのアクセスである # （ブラウザからの直接アクセスでない）ことを確認します。 if (! isset($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') { die(json_encode(array('status' => "不正な呼び出しです"))); } # データを準備します。 $value = array( 1 => array('item' => '台湾ラーメン', 'price' => 580, 'orders' => 113), 2 => array('item' => '味噌ラーメン', 'price' => 580, 'orders' => 72), 3 => array('item' => 'ニンニクチャーハン', 'price' => 630, 'orders' => 87), ); # Content-Typeを「application/json」に設定します。 header("Content-Type: application/json; charset=UTF-8"); # IEがContent-Typeヘッダーを無視しないようにします(HTML以外のものをHTML扱いしてしまうことを防ぐため) header("X-Content-Type-Options: nosniff"); # 可能な限りのエスケープを行い、JSON形式で結果を返します。 echo json_encode( $value, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ); ?> |
このサンプルでいくつかポイントがあり、JSONを出力するスクリプトでは以下の項目を必ず実施します。
1. リクエストヘッダーにX_REQUESTED_WITHがあり、値がXMLHttpRequestであることをチェック(4～6行目)
2. Content-Typeヘッダーは、「application/json; charset=UTF-8」と正しく指定する。(17行目)
3. 「X-Content-Type-Options: nosniff」ヘッダーを追加する。(19行目)
4. JSONデータの適切なエスケープ処理(24行目)
json.phpに直接アクセスすると以下のように表示されます。
|
1 | {"status":"\u4e0d\u6b63\u306a\u547c\u3073\u51fa\u3057\u3067\u3059"} |
次にJSON形式で返されたデータをjQueryで動的に処理します。
ajax.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>JSON形式のデータを返すWeb APIを作りたい</title> <script src="../../js/jquery-2.0.3.min.js"></script> <script> $(function(){ // jQueryを使用して、読込ボタンがクリックされたら処理を行ないます。 $("#load").on("click", function(){ // Web API（json.php）で生成したjsonデータを取得して処理します。 $.getJSON("json.php", function(data){ for (var i in data) { // 行のオブジェクトを生成します。 var tr = $("<tr>"); // 列のオブジェクトを生成して行に追加します。 var td_item = $("<td>").text(data[i].item); tr.append(td_item); var td_price = $("<td>").text(data[i].price); tr.append(td_price); var td_orders = $("<td>").text(data[i].orders); tr.append(td_orders); // 行のオブジェクトをテーブルに追加します。 $("#listbox").append(tr); // 読込ボタンを非表示化します。 $("#load").hide(); } }); }); }); </script> </head> <body> <div> <input type="button" value="読込" id="load"> <table id="listbox"> <tr> <th>品名</th> <th>価格</th> <th>注文数</th> </tr> </table> </div> </body> </html> |
アクセス後、読み込みボタンをクリックすると、json.phpのデータが表示されます。
| 品名 | 価格 | 注文数 |
|---|---|---|
| 台湾ラーメン | 580 | 113 |
| 味噌ラーメン | 580 | 72 |
| ニンニクチャーハン | 630 | 87 |
Author Profile
スターフィールド編集部
SHARE
