はじめてのWEBサイト作成
HTML
CSS
JavaScript
今回はAJAXを使って、ページをリロードせずにデータを送受信する方法を学びます。
非同期通信はユーザー体験を向上させるための強力なツールですが、初めてだと少しハードルが高いように感じるかもしれません。
ですが安心してください。
ステップバイステップで進めていけば、きっと理解できるようになります。
難しそうな部分もゆっくりと進めていけば大丈夫です。
自分のペースで一緒に取り組んでいきましょう！
目次
AJAXとは？
AJAX（Asynchronous JavaScript and XML）はウェブページがバックグラウンドでサーバーと通信し、ページを再読み込みせずにデータを更新するための技術です。
AJAXの利点には以下のようなものがあります。
- ユーザーインターフェースの向上
- サーバーリクエストの効率化
- リアルタイムデータの取得
基本的なAJAXの使用方法
AJAXリクエストを送信するために、XMLHttpRequestオブジェクトや、より簡単に使えるfetchAPIを使用します。ここではfetchAPIを使用してAJAXリクエストを実装します。
AJAXを使ったフォームの送信
まずフォームのHTMLを少し変更し、AJAXリクエストを送信するためのボタンを追加します。
HTMLの修正
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カフェサイト - 非同期通信の実装</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>カフェサイトへようこそ</h1>
<nav>
<a href="#coffee">コーヒー</a>
<a href="#desserts">デザート</a>
<a href="#contact">お問い合わせ</a>
</nav>
</header>
<main>
<section id="coffee">
<h2>コーヒーメニュー</h2>
<p>エスプレッソ、カフェラテ、カプチーノなど、最高の一杯をどうぞ。</p>
</section>
<section id="desserts">
<h2>デザートメニュー</h2>
<p>自家製ケーキやパイ、季節のフルーツを使用したデザートをお楽しみください。</p>
</section>
</main>
<footer>
<section id="contact">
<h2>お問い合わせ</h2>
<form id="contact-form" action="/submit-form" method="POST">
<label for="name">お名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<label for="message">メッセージ:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">送信</button>
</form>
</section>
<p>© 2024 カフェサイト. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
AJAXによる非同期通信の実装
次にAJAX技術の中のひとつ、fetch APIを使ってフォームデータを非同期で送信するためのJavaScriptコードをscript.jsに追加します。
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault(); // フォームのデフォルト送信動作を無効化
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// バリデーションチェック
if (name.trim() === '' || email.trim() === '' || message.trim() === '') {
alert('すべてのフィールドを正しく入力してください。');
return;
}
// フォームデータをオブジェクトに格納
const formData = {
name: name,
email: email,
message: message
};
// fetch APIを使用して非同期通信を実行
fetch('/submit-form', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('送信に失敗しました。');
}
})
.then(data => {
alert('お問い合わせが送信されました。ありがとうございます！');
document.getElementById('contact-form').reset(); // フォームのリセット
})
.catch(error => {
alert('送信中にエラーが発生しました。再度お試しください。');
console.error('Error:', error);
});
});
まとめ
AJAXを使った非同期通信の基本を学びました。
最初は難しいと感じたかもしれませんが、少しずつ理解が進んできたのではないでしょうか。
うまくいかなくても、それは次の学びへの一歩です。
繰り返し練習して、自信をつけていきましょう。
これであなたのカフェサイトはさらに便利で魅力的なものになります。
これまでの努力が報われる瞬間を楽しみにしながら、次のチャレンジに進んでいきましょう！