Javascript で PHP の結果を受け取る方法

　web ページにリアルタイムでサーバのデータを表示しようとすると、javascript を使うことになると思います。javascript から PHP のページを呼び出すことができますが、そのときに、PHP からデータを受け取る方法を探しました。

javascript で PHP のページを呼び出す

　XMLHttpRequest オブジェクトを使うことで、web サーバ上のページを呼び出すことができます。GET も POST もできますが、今回は PHP のプログラムを動かすだけでデータの送信は必要ないと考え、簡単な GET メソッドで送信することにしました。

　PHP からのデータは、json 形式で受け取ることにします。PHP の呼び出しの部分は、次のような javascript になります。

  xhr = new XMLHttpRequest();
  xhr.open('GET', 'サーバ上の PHP の URL', true);
  xhr.responseType = 'json';
  xhr.send();

PHP で json 形式でデータを返す

　PHP からは、データのみを json 形式で表示 (返す) します。

<?php
    $array = array("data1" => 10, "data2" => 1000);
    header("Content-Type: text/javascript; charset=utf-8");
    echo json_encode($array);
?>

　javascript へ返したいデータは連想配列で準備します。その連想配列を json 形式で出力します。

XMLHttpRequest のイベントリスナーでデータを受け取る

　javascript 側では、ページのロードが完了したときのイベントリスナー内でデータを受け取るようにします。

  xhr = new XMLHttpRequest();
  xhr.open('GET', 'サーバ上の PHP の URL', true);
  xhr.responseType = 'json';
  xhr.addEventListener('load', function (response) {
    let data = <?="this.response"?>;
    document.getElementById("data1").innerHTML = data.data1;
    document.getElementById("data2").innerHTML = data.data2;
  });
  xhr.send();

　ページ全体の再読込を行わずに必要部分だけを表示変更できます。

web サイト

Posted by sirius