JavaScript

JavaScript's XMLHttpRequest is an object that allows web pages to perform asynchronous communication with the server, enabling data exchange without reloading the page.

XMLHttpRequest [object]

　XMLHttpRequest（XHR）は、Webページがサーバーと非同期通信を行うために使用されるオブジェクトです。これにより、ページ全体を再読み込みせずに特定のデータをサーバーから取得または送信できます。この機能は、Webアプリケーションがより速く、反応性が高いものになるため、ユーザーエクスペリエンスを向上させます。

XMLHttpRequestの基本的な使用方法

XMLHttpRequestオブジェクトの作成: 最初に、通信を行うための XMLHttpRequestオブジェクトを新しく作成します。
リクエストの設定: 次に、作成したオブジェクトを使って、どのようなリクエストを送るのか（取得するデータの種類や送信先の URLなど）を設定します。
イベントハンドラの設定: サーバーからの応答を受け取った後に実行される処理（コールバック関数）を定義します。これにより、応答に基づいて特定のアクションを行うことができます。
リクエストの送信: 最後に、設定されたリクエストをサーバーに送信します。

基本的なメソッド

open(method, url[, async, user, password])

リクエストを初期化します。

method: HTTPメソッド（例: "GET", "POST"）
url: リクエストを送るURL
async: 非同期実行するかどうか（デフォルトはtrue）
user, password: 認証が必要な場合に使用します

send([body])

リクエストを実際に送信します。bodyは POSTメソッドなどでサーバーに送信するデータです。

abort()

進行中のリクエストを中止します。

setRequestHeader(header, value)

送信するHTTPリクエストヘッダを設定します。

getResponseHeader(name)

指定したレスポンスヘッダーの値を取得します。

getAllResponseHeaders()

全てのレスポンスヘッダーを CRLFで区切られた文字列として取得します。

イベントハンドラ用のメソッド

　XMLHttpRequestはイベントドリブンな APIであり、以下のイベントハンドラプロパティを提供しています。

onreadystatechange: readyStateプロパティが変化したときに発生します。リクエストの状態追跡に使用されます。
onloadstart: リクエストが開始されたときに発生します。
onprogress: リクエストが進行中に定期的に発生します。進捗状況の追跡に使用されます。
onabort: リクエストが中断されたときに発生します。
onerror: リクエストがエラーにより失敗したときに発生します。
onload: リクエストが成功したときに発生します。
ontimeout: リクエストがタイムアウトしたときに発生します。
onloadend: リクエストが完了したとき（成功または失敗）に発生します。

　これらのメソッドとイベントハンドラを適切に使用することで、非同期通信を含む複雑なウェブアプリケーションの開発が可能になります。

Sample

　XMLHttpRequestを使って、特定の URLからデータを非同期に取得し、その結果を Webページ上に表示する簡単な例です。

HTML

<button id="loadButton">データをロード</button>
<div id="dataDisplay"></div>

JavaScript

document.getElementById('loadButton').addEventListener('click', function() {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

	xhr.onload = function() {
		if (xhr.status >= 200 && xhr.status < 300) {
			// レスポンスが成功した場合の処理
			var data = JSON.parse(xhr.responseText);
			document.getElementById('dataDisplay').textContent = data.title;
		} else {
			// エラー処理
			document.getElementById('dataDisplay').textContent = 'データのロードに失敗しました。';
		}
	};

	xhr.onerror = function() {
		// 通信エラー処理
		document.getElementById('dataDisplay').textContent = 'リクエスト中にエラーが発生しました。';
	};

	xhr.send();
});

CSS

button {
	display: inline-block;
	padding: 1ex 2ex;
	margin: 1ex;
	font-size: larger;
	box-shadow: 0.2ex 0.2ex 0.3ex;
}

　このサンプルでは、ボタンをクリックすることでサーバーからデータを取得し、その結果をページ上の div要素に表示します。XMLHttpRequestを使用する際は、クロスオリジンリソースシェアリング（CORS）ポリシーに注意する必要があります。CORSポリシーに違反している場合、ブラウザはリクエストをブロックします。このサンプルコードは、CORSポリシーを守るために公開 APIを使用しています。