Ajax(非同期JavaScriptおよびXML)は、インタラクティブなWebアプリケーションを作成するために使用されるテクノロジーです。 Ajaxを使用すると、開発者はページを更新せずにサーバーと対話でき、Webページのコンテンツを動的に更新できます。
Php7.0では、Ajaxを組み合わせて、フロントエンドとバックエンド間のデータ相互作用を実現することで、ユーザーエクスペリエンスとWebページのパフォーマンスが向上します。
AJAXを使用する前に、最初にデータのためにサーバーと対話するために使用されるxmlhttprequestオブジェクトを作成する必要があります。
var xhr = new XMLHttpRequest();
XMLHTTPREQUESTオブジェクトはAJAX開発の中核であり、HTTP要求の作成とサーバーとのデータの交換を担当しています。
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では、PHPスクリプトは、AJAXリクエストを処理するための背景ハンドラーとして使用されます。最初に、リクエストを受信して処理するPHPファイルを作成します。
<?php
$name = $_POST['name'];
$age = $_POST['age'];
// データ処理を実行します
$response = "Hello, " . $name . "! You are " . $age . " years old.";
echo $response;
?>
このコードでは、$ _POSTグローバル変数を介してフロントエンドで渡されたパラメーターを取得し、対応するデータ処理を実行してフロントエンドに戻します。
フロントエンドページで、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ページの応答速度を最適化できます。