非同期通信とは、データを送受信する際に、ページ全体を再読み込みせずに部分的にデータを更新する方法です。これにより、ユーザーは快適な操作ができるようになります。たとえば、チャットアプリやリアルタイム情報更新などでよく使われています。
この実装を行うには、以下の環境が必要です。
AJAXを使った非同期通信の流れは以下のようになります:
ここでは簡単な例を見てみましょう。リクエストを送信して、サーバからのレスポンスを表示するシンプルなアプリケーションを作成します。
まず、HTMLファイルを作成します。以下のコードを使用して、ボタンをクリックしたときにAJAXを呼び出します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>?></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>非同期通信のサンプル</h1>
<button id="fetch-data">データを取得</button>
<div id="result"></div>
</body>
</html>
次に、AJAXリクエストを送信するJavaScriptのコードを書きます。以下のコードを script.js
というファイル名で保存してください。
$(document).ready(function() {
$('#fetch-data').click(function() {
$.ajax({
url: 'data.php',
type: 'GET',
success: function(response) {
$('#result').html(response);
},
error: function() {
alert('エラーが発生しました。');
}
});
});
});
最後に、サーバ側のPHPファイルを作成します。以下のコードを使用して、data.php
という名前で保存します。
<?php
// data.php
header('Content-Type: text/plain; charset=utf-8');
$data = "こんにちは!これは非同期通信の結果です。";
echo $data;
?>
すべてのファイルが準備できたら、Webサーバを立ち上げて、HTMLファイルをブラウザで開いてみてください。ボタンをクリックすると、非同期でデータが取得され、画面に表示されるはずです。