file-zip

ajaxとphpでのデータ連携

DELI TECH

jsで快適なUXを提供するように努めるサイトが増えてきたなかで、phpでDBやら何かからデータを取得したいといった事も自然と増えてきたかと思います。そんな時に利用されるのはだいたい非同期通信であるajaxであるかと思いますので、今回はajaxとphp間のデータ連携手法を備忘録がてら記載していきます。

やりとりするデータ形式はJSON形式

まず一番始めに考えるのが、データのやりとりってどうしよっかという話です。ajaxに呼ばれたphpから値を返却する場合、echoやらprintfやらすると値を返却できます。でもそれだけだと、一つの値しか送れないし、複数の値を送りたい場合、自分でデリミタを決めてパースしてやろうよ、という話になって面倒です。ならいっそもともとある規格を使用しようじゃないかということでJSON形式でやりとりするのがベターかと。なぜJSON形式が良いのかという話になれば、JSON自体がもともと他言語間におけるデータの受け渡しに使えるよう設計されているからであり、おかげで双方の言語でJSON形式のデータをパースする仕組みが出来上がっているからです。

JSON(JavaScript Object Notation)

js側の話

やりとりするルールが決まったら、あとは呼び出す側のjsと処理する側のphp書いていくだけなので、まずは呼び出すjs側の話をします。
js側では、phpの処理に渡すデータをオブジェクトで定義し、ajaxにてphpをコールする際にJSON文字列に変換します。dataTypeはjsonpとしています。返却値dataから値を取得する場合は、data.格納されている変数名みたいな形で参照できます。

下記に簡単な例を示します。
下記例では、送りたいパラメータdataIdをオブジェクトに包んでajaxに渡し、コールバック後は、dataに格納されているoutputという変数の値をhtmlに反映しています。

JavaScript

$(function(){
    $(window).load(function(){
        var param = { "dataId": "foo" };

        $.ajax({
            type: "post",
            url: "ajax_index.php",
            data: JSON.stringify(param),
            crossDomain: false,
            dataType : "jsonp",
            scriptCharset: 'utf-8'
        }).done(function(data) {
            $("#dispData").animate({ opacity : 0 }, 600, "swing", function(){
                $("#dispData").html(data.output);
                $("#dispData").animate({ opacity : 1 }, 600, "swing");
            });
        }).fail(function(XMLHttpRequest, textStatus, errorThrown){
            //alert(errorThrown);
        });
    });
});

php側の話

php側もとっても簡単です。受け取った値をもとに目的となる処理を実施して返却するだけです。受け取る際にfile_get_contentsでjson形式のデータを取得して、json_decodeで参照できるかたちに変換します。
返却する際は、json_encodeで返却するパラメータをjson形式に変換して返却します。

下記に簡単な例を示します。

PHP

<?php

$json = file_get_contents('php://input');
$data = json_decode($json, true);

$dataId = isset($data['dataId']) ? $data['dataId']   : null;
// 送受信用パラメータ
$callback = isset($_GET['callback']) ? $_GET["callback"] : "";
$callback = htmlspecialchars(strip_tags($callback));

// :::::::::::::::::::::::::::::::::::::::::::::::::::::
// ここでメインとなる処理を実施
// :::::::::::::::::::::::::::::::::::::::::::::::::::::

$param = array( 'output' => $foo );

// 送受信用パラメータに設定することで返却
header('Content-type: application/javascript; charset=utf-8');
printf("{$callback}(%s)", json_encode( $param ));

?>

あとがき

駆け足になってしまいすみません。ざっくり言うとJSON形式でやりとりしようねっていうことでまとまります。今回は、じゃあJSON形式でやる場合にどうやってやるんだっけ?というところを簡単に紹介させてもらいました。また時間があるときにお試し頂ければ。

ではまた。

page top