💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、参加者は AJAX（Asynchronous JavaScript and XML）の力強い世界を探り、XMLHttpRequest を使って動的な Web アプリケーションを作成する方法を学びます。包括的なチュートリアルでは、非同期 Web 通信の基本概念をカバーし、ページの再読み込みなしでサーバーからデータを送信および受信するプロセスを学習者に案内します。
参加者は、XMLHttpRequest オブジェクトの作成、HTTP 要求メソッドの構成、サーバー応答状態の処理、および基本的な AJAX データ取得技術の実装において実践的なスキルを習得します。これらのコアな原則を理解することで、開発者は、ユーザーの関与度とアプリケーションのパフォーマンスを向上させる、より応答性が高く対話性のある Web 体験を構築することができます。
このステップでは、AJAX（Asynchronous JavaScript and XML）について学び、Web 通信をどのように革新的に変えるかを学びます。AJAX を使うことで、Web ページはページ全体を再読み込みすることなく、動的にコンテンツを更新でき、スムーザーで応答性の高いユーザー体験を提供します。
AJAX は、Web アプリケーションがサーバーからデータを非同期（バックグラウンドで）で送信および受信し、既存のページの表示と動作に干渉しないようにする Web 開発技術です。これは、ページ全体を更新することなく、Web ページの一部を更新できることを意味します。
非同期要求の概念を説明するために、単純な HTML ファイルを作成しましょう。この例を作成するには WebIDE を使用します。
WebIDE を開き、新しいファイル ~/project/ajax-demo.html を作成します。
<!doctype html>
<html>
<head>
<title>AJAX Demonstration</title>
</head>
<body>
<h1>AJAX Example</h1>
<button id="loadData">Load Data</button>
<div id="result"></div>
<script>
document
.getElementById("loadData")
.addEventListener("click", function () {
console.log("Button clicked: Initiating AJAX request");
// 非同期要求は後のステップで実装します
});
</script>
</body>
</html>非同期要求は、いくつかの Web 開発上の課題を解決します。
このステップでは、JavaScript で非同期要求を行うためのコアメカニズムである XMLHttpRequest オブジェクトを作成する方法を学びます。前のステップの HTML ファイルを基にして、XMLHttpRequest 機能を追加します。
WebIDE で ~/project/ajax-demo.html ファイルを開き、XMLHttpRequest オブジェクトを作成するようにスクリプトセクションを更新します。
<!doctype html>
<html>
<head>
<title>XMLHttpRequest Demonstration</title>
</head>
<body>
<h1>AJAX Request Example</h1>
<button id="loadData">Load Data</button>
<div id="result"></div>
<script>
document
.getElementById("loadData")
.addEventListener("click", function () {
// XMLHttpRequest オブジェクトを作成する
var xhr = new XMLHttpRequest();
// XMLHttpRequest オブジェクトの作成をコンソールに表示する
console.log("XMLHttpRequest object created:", xhr);
});
</script>
</body>
</html>XMLHttpRequest（XHR）オブジェクトは、ブラウザに組み込まれた API で、次のことができます。
open()：新しい要求を初期化するsend()：要求をサーバーに送信するonreadystatechange：要求の状態を追跡するXMLHttpRequest はすべての最新ブラウザでサポートされており、AJAX 通信に信頼できる選択肢になっています。最近の Web 開発では Fetch API も使用されますが、XMLHttpRequest は依然として広く使用されています。
「Load Data」ボタンをクリックすると、XMLHttpRequest オブジェクトの作成がコンソールに表示されます。
XMLHttpRequest object created: XMLHttpRequest {...}このステップでは、XMLHttpRequest を使用して HTTP 要求メソッドを構成する方法を学びます。さまざまな種類の HTTP 要求を設定する方法を示すために、ajax-demo.html ファイルを更新します。
WebIDE で ~/project/ajax-demo.html ファイルを開き、スクリプトセクションを変更します。
<!doctype html>
<html>
<head>
<title>HTTP Request Methods</title>
</head>
<body>
<h1>AJAX Request Methods</h1>
<button id="getButton">GET Request</button>
<button id="postButton">POST Request</button>
<div id="result"></div>
<script>
// GET 要求の設定
document
.getElementById("getButton")
.addEventListener("click", function () {
var xhr = new XMLHttpRequest();
// GET 要求を設定する
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// 要求ヘッダーを設定する
xhr.setRequestHeader("Content-Type", "application/json");
// 要求の詳細をログに出力する
console.log("GET Request Configured");
// 要求を送信する
xhr.send();
});
// POST 要求の設定
document
.getElementById("postButton")
.addEventListener("click", function () {
var xhr = new XMLHttpRequest();
// POST 要求を設定する
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
// 要求ヘッダーを設定する
xhr.setRequestHeader("Content-Type", "application/json");
// 送信するデータを準備する
var data = JSON.stringify({
title: "foo",
body: "bar",
userId: 1
});
// 要求の詳細をログに出力する
console.log("POST Request Configured");
// データ付きで要求を送信する
xhr.send(data);
});
</script>
</body>
</html>最も一般的な HTTP 要求メソッドは次のとおりです。
open(method, url, async)：
method：HTTP メソッド（GET、POST など）url：サーバーエンドポイントasync：非同期要求用のブール値（通常は true）setRequestHeader()：要求ヘッダーを設定する
send()：要求を送信する（オプションのデータ付き）
ボタンをクリックすると、コンソールにログが表示されます。
GET Request Configured
POST Request Configuredこのステップでは、XMLHttpRequest のさまざまな状態を処理し、サーバー応答を処理する方法を学びます。応答処理を示すために、ajax-demo.html ファイルを更新します。
WebIDE で ~/project/ajax-demo.html ファイルを開き、スクリプトセクションを変更します。
<!doctype html>
<html>
<head>
<title>Server Response Handling</title>
</head>
<body>
<h1>AJAX Response States</h1>
<button id="fetchData">Fetch Data</button>
<div id="result"></div>
<script>
document
.getElementById("fetchData")
.addEventListener("click", function () {
var xhr = new XMLHttpRequest();
var resultDiv = document.getElementById("result");
// 要求状態を追跡する
xhr.onreadystatechange = function () {
// 現在の準備状態をログに出力する
console.log("Ready State:", xhr.readyState);
// 要求が完了し、成功したかどうかを確認する
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 成功した応答
try {
var data = JSON.parse(xhr.responseText);
resultDiv.innerHTML = `
<h3>Data Received:</h3>
<pre>${JSON.stringify(data, null, 2)}</pre>
`;
console.log("Request Successful");
} catch (error) {
resultDiv.innerHTML = "Error parsing response";
console.error("Parsing Error:", error);
}
} else {
// エラー処理
resultDiv.innerHTML = `Error: ${xhr.status}`;
console.error("Request Failed", xhr.status);
}
}
};
// 要求を設定して送信する
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
xhr.send();
});
</script>
</body>
</html>XMLHttpRequest には 5 つの準備状態があります。
onreadystatechange を使用して要求の進行状況を追跡するreadyState === 4 を確認するstatus === 200 を検証するresponseText または responseXML を使用してデータにアクセスする「Fetch Data」をクリックすると、コンソールにログが表示されます。
Ready State: 1
Ready State: 2
Ready State: 3
Ready State: 4
Request Successfulこのステップでは、AJAX を使って API からデータを取得し表示する方法を学びます。ユーザー情報を取得し表示するシンプルなユーザー管理アプリケーションを作成します。
WebIDE で ~/project/ajax-demo.html ファイルを開き、その内容を次のコードに置き換えます。
<!doctype html>
<html>
<head>
<title>User Management App</title>
<style>
#userList {
margin-top: 20px;
border: 1px solid #ddd;
padding: 10px;
}
</style>
</head>
<body>
<h1>User Management</h1>
<button id="fetchUsers">Fetch Users</button>
<div id="userList"></div>
<script>
document
.getElementById("fetchUsers")
.addEventListener("click", function () {
var xhr = new XMLHttpRequest();
var userListDiv = document.getElementById("userList");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
var users = JSON.parse(xhr.responseText);
// 以前のコンテンツをクリアする
userListDiv.innerHTML = "<h2>User List</h2>";
// ユーザーリストを作成する
users.forEach(function (user) {
var userDiv = document.createElement("div");
userDiv.innerHTML = `
<p>
<strong>Name:</strong> ${user.name}<br>
<strong>Email:</strong> ${user.email}<br>
<strong>Company:</strong> ${user.company.name}
</p>
`;
userListDiv.appendChild(userDiv);
});
} catch (error) {
userListDiv.innerHTML = "Error parsing user data";
}
} else {
userListDiv.innerHTML = `Error fetching users: ${xhr.status}`;
}
}
};
// JSONPlaceholder API からユーザーを取得する
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xhr.send();
});
</script>
</body>
</html>「Fetch Users」をクリックすると、ユーザーの詳細が表示されたリストが表示されます。
User List
Name: Leanne Graham
Email: [email protected]
Company: Romaguera-Crona
Name: Ervin Howell
Email: [email protected]
Company: Deckow-Crist
... (more users)この実験では、参加者は AJAX と非同期 Web 通信の基本を学び、ページ全体を再読み込みすることなく動的な Web 体験を作成する方法を学びます。この実験では、非同期要求、バックグラウンドデータ交換、部分的なページ更新などの重要な概念を紹介し、XMLHttpRequest が Web クライアントとサーバー間の円滑な相互作用を可能にする方法を示します。
実際の例を通して AJAX の核心となる原理を理解することで、学習者はデータを動的に取得し表示できる応答性の高い Web アプリケーションを実装するための洞察を得ます。この実験では、XMLHttpRequest オブジェクトを作成するための基本的な技術、HTTP メソッドを構成する方法、サーバー応答を処理する方法、および非同期でデータを取得する方法をカバーしており、現代の Web 開発手法の包括的な基礎を提供します。
