基本形
例として、クライアント側の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