現在の位置: ホーム> 最新記事一覧> Php7.0でAJAX相互作用を効率的に実装する方法:詳細なチュートリアルと例

Php7.0でAJAX相互作用を効率的に実装する方法:詳細なチュートリアルと例

gitbox 2025-07-30

Ajaxの紹介

Ajax(非同期JavaScriptおよびXML)は、インタラクティブなWebアプリケーションを作成するために使用されるテクノロジーです。 Ajaxを使用すると、開発者はページを更新せずにサーバーと対話でき、Webページのコンテンツを動的に更新できます。

Php7.0では、Ajaxを組み合わせて、フロントエンドとバックエンド間のデータ相互作用を実現することで、ユーザーエクスペリエンスとWebページのパフォーマンスが向上します。

ajaxの基本的な使用

xmlhttprequestオブジェクトを作成します

AJAXを使用する前に、最初にデータのためにサーバーと対話するために使用されるxmlhttprequestオブジェクトを作成する必要があります。

 var xhr = new XMLHttpRequest();

XMLHTTPREQUESTオブジェクトはAJAX開発の中核であり、HTTP要求の作成とサーバーとのデータの交換を担当しています。

AJAXリクエストを送信します

AJAX要求の送信には、通常、リクエストパラメーターの設定とリクエストの送信という2つの手順が含まれます。

リクエストパラメーターを設定します:

 var url = "example.php";
var params = "name=John&age=25";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

リクエストを送信します:

 xhr.send(params);

上記のコードでは、リクエストをPOSTメソッドから送信し、キー値ペアでリクエストパラメーターをサーバーに渡します。リクエストを送信する前に、SetRequestHeader()メソッドを使用してリクエストヘッダーを設定し、データ送信形式を指定します。

サーバーの応答を処理します

サーバーがリクエストに応答するとき、それを処理する必要があります。 XHRオブジェクトのOnreadedStateChangeプロパティを設定して、応答ステータスを聞きます。

 xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var response = xhr.responseText;
      // サーバーによって返されるデータを処理します
    }
  }
};

サーバーの応答が返されると、XHRオブジェクトのResponseTextプロパティを使用してデータが取得および処理されます。

Php7.0のAJAXを使用した開発

背景ハンドラーを作成します

PHP7.0では、PHPスクリプトは、AJAXリクエストを処理するための背景ハンドラーとして使用されます。最初に、リクエストを受信して処理するPHPファイルを作成します。

 <?php
  $name = $_POST['name'];
  $age = $_POST['age'];
  // データ処理を実行します
  $response = "Hello, " . $name . "! You are " . $age . " years old.";
  echo $response;
?>

このコードでは、$ _POSTグローバル変数を介してフロントエンドで渡されたパラメーターを取得し、対応するデータ処理を実行してフロントエンドに戻します。

Ajaxリクエストは、フロントデスクページに実装されています

フロントエンドページで、JavaScriptを介してAJAXリクエストを送信します。

 function sendRequest() {
  var xhr = new XMLHttpRequest();
  var url = "example.php";
  var name = document.getElementById("name").value;
  var age = document.getElementById("age").value;
  var params = "name=" + name + "&age=" + age;
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var response = xhr.responseText;
        document.getElementById("result").innerHTML = response;
      }
    }
  };
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(params);
}

このコードでは、sendRequest()関数を定義し、getElementByID()メソッドを介してユーザーによるデータ入力を取得し、パラメーターとしてサーバーに送信します。次に、応答データがinnerhtmlを介してページに表示されます。

要約します

AJAXとPHP7.0を組み合わせることで、開発者はサーバーとの効率的なデータ相互作用を達成することができ、それによりWebページのコンテンツを動的に更新し、Webページの対話性とパフォーマンスを改善できます。実際の開発では、AJAXテクノロジーの合理的な使用は、ユーザーエクスペリエンスを向上させ、Webページの応答速度を最適化できます。