基本形

例として、クライアント側のsendDataという関数で、サーバー側の処理をするreceiveData.phpに、AJAXでデータを通信すると次のようになります。JQueryのバージョンは1.12.4です。

function sendData(){
    var obj = {key: 'value'};
    $.ajax({
        url  : 'receiveData.php',
        type : 'POST',
        data : obj,
        cache: false,
    })
    .done(function(data, textStatus, jqXHR){
        //通信成功時の処理
　　　　・・・
    })
    .fail(function(jqXHR, textStatus, errorThrown){
　　　　//通信失敗時の処理
　　　　・・・
    });
}

関数ajaxに渡すオブジェクトに関して、urlはデータを送るファイルのパス、typeは通信の種類、dataはurlに送るデータ、cacheをfalseにして、ブラウザのキャッシュを無効にし、毎回通信させるようにします。

通信成功時には関数doneの処理が、失敗時には関数failの処理が行われます。その引数について、dataはサーバー側から送られてくるデータ（この場合はrecieveData.php）で、これがjson形式であれば、JSON.parse()の関数を使ってオブジェクト形式に変換します。textStatusは通信の結果を文字列で、例えば成功時には”success”のように返します。jqXHRはJQueryのXMLHttpRequest（XHR）オブジェクトで、通信に関する様々なメソッドやプロパティを持ちます。errorThrownはサーバーから送られるHTTPステータスのテキスト部分です。例として、送信するデータのサイズがサーバーの設定を超えたとすると、”Request Entity Too Large”と返します。
以下は、recieveData.php内の記述です。

データ取得

サーバー側でデータを取得するには、filter_input()を用います。

$value = filter_input(INPUT_POST,'key');

上記において、データはPOSTメソッドで送信されるので、INPUT_POSTを指定します。第2引数について、データは連想配列として格納されるので、取り出したい値のキーを指定します。第3、4引数にフィルターのタイプを指定しますが、この例のように省略する事も出来ます。

データ返信

サーバーからクライアントへデータを返すには、

echo json_encode($data);

json形式に変換し、echoで出力します。クライアント側では、この出力されたデータが、sendData関数内の引数であるdataとして取り扱うことが出来ます。

URL: sac.ringil-music.com
環境: さくらのVPS・Centos7・Nginx・PHP-FPM