XHR(エックスエイチアール)とは | 意味や読み方など丁寧でわかりやすい用語解説

XHRとは、XMLHttpRequestの略称であり、Webブラウザ上で動作するJavaScriptからサーバーと非同期に通信を行うための技術のことだ。Webページ全体をリロードすることなく、データの送受信が可能になるため、動的なWebアプリケーションを構築する上で不可欠な要素となっている。

従来のWebアプリケーションでは、ユーザーがフォームを送信したり、リンクをクリックしたりするたびに、Webページ全体がサーバーから再読み込みされていた。これはユーザーエクスペリエンスの低下を招き、操作性の悪いWebアプリケーションを生み出す要因となっていた。しかし、XHRの登場により、Webページの一部分だけを更新することが可能になり、スムーズな操作性とインタラクティブなUIを実現できるようになった。

XHRの基本的な仕組みは、以下の通りだ。まず、JavaScriptでXMLHttpRequestオブジェクトを生成する。このオブジェクトは、サーバーとの通信を管理するための窓口となる。次に、XMLHttpRequestオブジェクトのopen()メソッドを使って、HTTPリクエストの種類（GET、POSTなど）とURLを指定する。例えば、GETリクエストでデータを取得する場合、open("GET", "https://example.com/data")のように記述する。

続いて、setRequestHeader()メソッドを使って、HTTPリクエストヘッダーを設定する。リクエストヘッダーは、サーバーに送信する付加情報であり、例えば、Content-Typeヘッダーでデータの形式を指定したり、Authorizationヘッダーで認証情報を送信したりする。

リクエストの準備が整ったら、send()メソッドを使ってサーバーにリクエストを送信する。GETリクエストの場合は、send()メソッドに引数を渡す必要はないが、POSTリクエストの場合は、送信するデータを引数として渡す。例えば、JSON形式のデータを送信する場合、send(JSON.stringify(data))のように記述する。

サーバーからのレスポンスは、XMLHttpRequestオブジェクトのreadyStateプロパティとstatusプロパティで確認できる。readyStateプロパティは、リクエストの状態を表す整数値であり、0から4までの値を取る。0は未初期化、1はオープン、2はリクエストヘッダー受信完了、3はレスポンスボディ受信中、4はレスポンス完了を意味する。statusプロパティは、HTTPステータスコードを表す整数値であり、200は成功、404はNot Found、500はInternal Server Errorなどを意味する。

レスポンスが正常に完了した場合（readyStateが4でstatusが200の場合）、responseTextプロパティまたはresponseXMLプロパティでレスポンスデータを受け取ることができる。responseTextプロパティは、レスポンスデータを文字列として取得する場合に使用し、responseXMLプロパティは、レスポンスデータをXMLドキュメントとして取得する場合に使用する。

XHRは、Ajax（Asynchronous JavaScript + XML）の中核技術として広く利用されている。Ajaxは、Webページ全体をリロードすることなく、サーバーと非同期に通信を行うことで、ユーザーエクスペリエンスを向上させるためのWeb開発手法だ。XHRを使用することで、フォームの入力チェック、データのリアルタイム更新、動的なコンテンツの表示など、さまざまな機能をWebアプリケーションに実装することができる。

近年では、XHRに代わる技術として、Fetch APIが登場している。Fetch APIは、よりシンプルで強力なAPIを提供し、Promiseベースの非同期処理をサポートするため、よりモダンなWeb開発に適している。しかし、XHRは依然として広く利用されており、Web開発者にとって重要な知識の一つだ。

XHRを使用する際には、クロスオリジンリクエストの問題に注意する必要がある。クロスオリジンリクエストとは、異なるドメイン間でリクエストを送信することであり、セキュリティ上の理由から制限されている。クロスオリジンリクエストを許可するためには、サーバー側でCORS（Cross-Origin Resource Sharing）の設定を行う必要がある。

また、XHRを使用する際には、セキュリティ対策を徹底する必要がある。特に、ユーザーからの入力をそのままサーバーに送信する場合には、クロスサイトスクリプティング（XSS）などの脆弱性につながる可能性があるため、エスケープ処理や入力検証を行うことが重要だ。

XHRは、Webアプリケーション開発において基本的な技術であり、理解しておくことで、より高度なWebアプリケーションを開発することができるようになる。Fetch APIなどの新しい技術も登場しているが、XHRの基本的な仕組みを理解しておくことは、Web開発者にとって不可欠なスキルと言えるだろう。