SQL見るだけクエリ#298 Ajaxを使ってPHPからテキストを取得する非同期処理

Ajaxを使ってPHPからテキストを取得する非同期処理に関して解説してみようと思います。

この記事を読むと（約5分）
Ajaxを使ってPHPからテキストを取得する非同期処理をイメージできます。

Ajaxを使ってPHPからテキストを非同期で取得

以下のコードは、ボタンがクリックされた際にAjaxを使ってサーバーにリクエストを送り、サーバーはそのリクエストを受けて処理を行い、結果をクライアントに返すことです。それぞれの部分はその目的を達成するために役立っています。

JavaScript部分

$(document).ready(function(){
  $(".loadDataBtn").click(function(){
    var btnId = $(this).attr("id");
    var url = "getData.php?content=" + btnId;
    $.ajax({
      url: url,
      type: "GET",
      success: function(data){
        $("#result").html(data);
      }
    });
  });
});

$(document).ready(function(){...});:
これは、ページの読み込みが完了したら実行されるコードです。つまり、全ての要素が揃ってから実行されるものです。
$(".loadDataBtn").click(function(){...});:
$(".loadDataBtn")は、クラスがloadDataBtnである要素を選択します。言い換えると、loadDataBtnクラスを持つボタンがクリックされた時に実行される関数を指定しています。
var btnId = $(this).attr("id");:
この行は、クリックされたボタンのIDを取得しています。$(this)は、クリックされた要素を指し、.attr("id")はその要素のID属性の値を取得します。
var url = "getData.php?content=" + btnId;:
ボタンのIDを使って、リクエスト先のURLを生成しています。例えば、もしクリックされたボタンがcontent1だった場合、URLはgetData.php?content=content1となります。
$.ajax({...});:
これはAjaxリクエストを行うためのコードです。Ajaxリクエストは、非同期でサーバーと通信する手段です。
url: url,:
ここでリクエストの送信先URLを指定しています。
type: "GET",:
このリクエストはGETメソッドを使用します。GETメソッドは、サーバーにデータを要求する際に使用します。
success: function(data){...}:
リクエストが成功した場合、サーバーから返ってきたデータがdataとして渡され、この中の処理が実行されます。
$("#result").html(data);:
dataにはサーバーからの返答が入っています。これを#resultという要素内に挿入します。言い換えると、ページ上の特定の場所にサーバーからのデータを表示します。

PHP部分

if(isset($_GET['content'])){
  $contentId = $_GET['content'];
  switch($contentId){
    case 'content1':
      $data = "コンテンツ1のデータです！";
      break;
    case 'content2':
      $data = "コンテンツ2のデータです！";
      break;
    default:
      $data = "無効なコンテンツです。";
      break;
  }
  echo $data;
} else {
  echo "コンテンツが指定されていません。";
}

if(isset($_GET['content'])){...}:
ここでは、GETリクエストのクエリパラメータcontentがセットされているかを確認しています。もしセットされていれば、以下の処理を行います。
$contentId = $_GET['content'];:
contentクエリパラメータの値を$contentIdに代入しています。
switch($contentId){...}:
$contentIdの値に基づいて処理を分岐します。
case 'content1'::
もし$contentIdがcontent1の場合、次の行からの処理が実行されます。
$data = "コンテンツ1のデータです！";:
コンテンツ1のデータを$dataに代入します。
break;:
switch文から抜けます。
case 'content2'::
もし$contentIdがcontent2の場合、次の行からの処理が実行されます。
$data = "コンテンツ2のデータです！";:
コンテンツ2のデータを$dataに代入します。
break;:
switch文から抜けます。
default::
どのcaseにも当てはまらない場合のデフォルトの処理です。
$data = "無効なコンテンツです。";:
無効なコンテンツの場合のメッセージを$dataに代入します。
echo $data;:
最終的に$dataの値がレスポンスとしてクライアントに返されます。