JavaScript XMLHttpRequest オブジェクト詳解：作成と AJAX リクエストの使用方法
この文章では、JavaScript の XMLHttpRequest オブジェクトについて、基本から応用まで解説していきます。XHR オブジェクトの作成方法、非同期リクエストの送信、サーバーからのレスポンス処理まで、AJAX 技術を習得するための情報を網羅しています。
1. XMLHttpRequest オブジェクトとは？
XMLHttpRequest（XHR）オブジェクトは、JavaScript からサーバーと通信するための API です。AJAX の基盤となる技術であり、ページ全体をリロードすることなく、Web ページの一部を動的に更新することができます。
- サーバーとの HTTP 通信を可能にする。
- ページ遷移なしで、コンテンツを部分的に更新できる。
- ユーザーエクスペリエンスの向上に貢献する。
XHR は、従来の ActiveXObject から XMLHttpRequest へと進化を遂げ、現在では主要なブラウザで広くサポートされています。
2. XMLHttpRequest オブジェクトの作成
XHR オブジェクトを作成するには、XMLHttpRequest() コンストラクタを使用します。
let xhr = new XMLHttpRequest();
上記のコードは、新しい XHR オブジェクトを作成し、xhr 変数に代入しています。
ブラウザ互換性
Internet Explorer 5 や 6 などの古いブラウザでは、ActiveXObject を使用して XHR オブジェクトを作成する必要があります。
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE5, IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
3. AJAX リクエストの送信
XHR オブジェクトを使用して AJAX リクエストを送信する手順は以下のとおりです。
open()メソッドでリクエストを初期化する。send()メソッドでリクエストを送信する。
open() メソッド
open() メソッドは、リクエストの HTTP メソッド、URL、非同期フラグなどを設定します。
xhr.open("GET", "https://example.com/api/data", true);
上記のコードは、GET メソッドで https://example.com/api/data に非同期リクエストを送信する準備をしています。
| 引数 | 説明 |
|---|---|
| method | HTTP メソッド (GET, POST, PUT, DELETE など) |
| url | リクエスト先の URL |
| async | 非同期フラグ (true: 非同期, false: 同期) |
send() メソッド
send() メソッドは、リクエストをサーバーに送信します。
xhr.send();
POST リクエストの場合、リクエストボディを send() メソッドに渡します。
xhr.open("POST", "https://example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=john&age=30");
4. サーバーからのレスポンス処理
サーバーからのレスポンスは、XHR オブジェクトのプロパティを使用して取得できます。
| プロパティ | 説明 |
|---|---|
readyState |
リクエストの状態 (0: 未初期化, 4: 完了) |
status |
HTTP ステータスコード (200: 成功, 404: Not Found など) |
responseText |
テキスト形式のレスポンス本文 |
responseXML |
XML 形式のレスポンス本文 |
readystatechange イベントを监听することで、リクエストの状態が変化したときに処理を実行できます。
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText); // レスポンス本文を出力
}
};
まとめ
この記事では、JavaScript の XMLHttpRequest オブジェクトを使用して AJAX リクエストを送信し、サーバーからのレスポンスを処理する方法について解説しました。XHR は、Web 開発において重要な技術であり、理解することで、より高度な Web アプリケーションを開発することができます。
参考資料
関連する質問と回答
Q1: AJAX とは？
A1: AJAX (Asynchronous JavaScript and XML) は、JavaScript の非同期通信技術を使って、ページ遷移なしでサーバーとデータのやり取りを行い、Web ページの一部を動的に更新する手法です。
Q2: XMLHttpRequest の使いどころは？
A2: フォーム送信時の入力値チェック、検索結果の動的表示、チャットアプリケーションのリアルタイム更新など、ユーザー体験を向上させるために、ページ全体をリロードせずに一部だけ更新したい場合に利用されます。
Q3: Fetch API と XMLHttpRequest の違いは？
A3: Fetch API は、XMLHttpRequest よりも新しい API で、より簡潔な記述で非同期通信を実現できます。Promise ベースで処理を記述できる点も大きな違いです。ただし、古いブラウザではサポートされていない場合があります。