PHP - AJAX入門

こんにちは、ウェブ開発者の志願者さんたち！今日は、AJAXとPHPのエキサイティングな世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、私はこの旅をガイドします。コードを一行も書いたことがない人でも大丈夫です。コーヒー（またはお好みでティー）を一杯取り、始めましょう！

PHP - AJAX Introduction

AJAXとは？

AJAXは非同期JavaScriptとXMLの略です。この難しそうな言葉に驚かないでください！実際には、ウェブページをよりインタラクティブでユーザーフレンドリーにする素晴らしい技術です。

レストランでImagineしてみてください。AJAX無しであれば、メニュを見るたびにテーブルを離れ、カウンターに行き、メニュを取り、それから戻ってくる必要がありました。AJAXがあれば、ウェイターがあなたの必要な情報を持ってくるので、ディナーの体験を邪魔することなく済みます。

ウェブの言葉では、AJAXはウェブページがサーバーからデータを要求し、ページ全体をリロードすることなく受信することができます。魔法のようですが、それを理解できるのがさらに良いです！

AJAXの動作方法

ウェブページ上でイベントが発生（ボタンをクリックなど）
JavaScriptがXMLHttpRequestオブジェクトを作成
XMLHttpRequestオブジェクトがウェブサーバーに要求を送信
サーバーが要求を処理
サーバーがウェブページに応答を送信
JavaScriptが応答を読み取る
JavaScriptが応答に基づいて適切なアクションを実行

AJAXを実行するために必要なもの

AJAXを実行するためには、以下の3つの主要な要素が必要です：

JavaScriptとXMLHttpRequestオブジェクトをサポートするウェブブラウザ
AJAX要求を処理できるウェブサーバー（Apacheなど）
サーバーサイドのプログラミング言語（私たちの場合はPHP）

好消息！ほとんどの現代ウェブブラウザはAJAXをサポートしているので、もう一歩のところまで来ています！

環境の設定

コードを書く前に、環境が整っていることを確認しましょう：

XAMPP（ApacheウェブサーバーとPHPを含む）をインストール
XAMPPのインストールディレクトリのhtdocsフォルダ内に新しいフォルダを作成
お気に入りのテキストエディタ（私個人的にはVisual Studio Codeが大好きです）を開く

環境が整ったので、コードを書きましょう！

最初のAJAX要求

シンプルな例から始めましょう。クリックするとサーバーから挨拶を取得し、ページをリロードすることなく表示するボタンを作成します。

まず、index.htmlという名前のHTMLファイルを作成します：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私の最初のAJAX要求</title>
</head>
<body>
<h1>AJAXにようこそ！</h1>
<button onclick="getGreeting()">挨拶を取得</button>
<p id="greetingText"></p>

<script>
function getGreeting() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("GET", "greeting.php", true);
xhttp.send();
}
</script>
</body>
</html>

これを分解してみましょう：

ボタンにonclickイベントを設定し、getGreeting()関数を呼び出します。
getGreeting()関数内でXMLHttpRequestオブジェクトを作成します。
サーバーの応答を処理する関数を設定します。
greeting.phpに接続し、要求を送信します。

次に、greeting.phpという名前のPHPファイルを作成します：

<?php
$greetings = array("Hello!", "Bonjour!", "Hola!", "Ciao!", "Konnichiwa!");
echo $greetings[array_rand($greetings)];
?>

このPHPスクリプトは、配列からランダムな挨拶を返します。

ボタンをクリックすると、JavaScriptがgreeting.phpに要求を送信し、ランダムな挨拶を返信します。JavaScriptはその挨拶をページに表示しますが、ページをリロードすることはありません！

サーバーにデータを送信する

データの取得をマスターしたので、サーバーにデータを送信してみましょう。名前をサーバーに送信し、パーソナライズされた挨拶を受け取るシンプルなフォームを作成します。

index.htmlを更新します：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAXフォームの例</title>
</head>
<body>
<h1>パーソナライズされた挨拶</h1>
<input type="text" id="nameInput" placeholder="あなたの名前を入力">
<button onclick="getPersonalizedGreeting()">挨拶を取得</button>
<p id="greetingText"></p>

<script>
function getPersonalizedGreeting() {
var name = document.getElementById("nameInput").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("POST", "personalized_greeting.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name);
}
</script>
</body>
</html>

そして新しいpersonalized_greeting.phpを作成します：

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$greetings = array("Hello", "Bonjour", "Hola", "Ciao", "Konnichiwa");
$greeting = $greetings[array_rand($greetings)];
echo "$greeting, $name!";
}
?>

この例では、POST要求を使用して名前をサーバーに送信します。PHPスクリプトはその名前を使用してパーソナライズされた挨拶を生成します。

フォームをクリックすると、JavaScriptがpersonalized_greeting.phpに要求を送信し、パーソナライズされた挨拶を受け取ります。JavaScriptはその挨拶をページに表示しますが、ページをリロードすることはありません！

一般的なAJAXメソッド

以下は一般的に使用されるAJAXメソッドの表です：

メソッド	説明
open()	リクエストの種類とURLを指定
send()	リクエストをサーバーに送信
setRequestHeader()	ヘッダーにラベル/値のペアを追加

結論

おめでとうございます！あなたはAJAXとPHPの世界への第一歩を踏み出しました。非同期データの送信と受信の基本を学びました。これは多くの現代ウェブアプリケーションの基盤です。

コードを学ぶことは新しい言語を学ぶのと同じです。時間と練習が必要ですが、書いたコードの每一行ごとに上達しています。実験をし、間違いを犯し、それから学びましょう。

私が教える年間で、無数の学生が完全な初心者から熟練の開発者に成長しました。鍵は忍耐と好奇心です。ですから、コードを続け、学び続け、すぐに素晴らしいインタラクティブなウェブアプリケーションを構築できるようになるでしょう！

次回は、より高度なAJAX技術と異なるデータの種類を処理する方法について探求します。それまで、ハッピーコーディング！

Credits: Image by storyset