XMLHttpRequestオブジェクトの使用 | 非同期通信 Ajax | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

非同期通信とは？

非同期通信とは、ブラウザがサーバーにデータをリクエストし、そのデータをバックグラウンドで取得しつつ、ユーザーがページ上で別の操作を続けられる仕組みのことです。

通常、ブラウザがサーバーにデータを要求（リクエスト）すると、ページ全体が再読み込みされることがあります。しかし、非同期通信を使うと、ページをリロードせずに、必要なデータだけを取得することが可能です。これにより、ページの一部だけが更新されるため、ユーザーは他の操作をしながらスムーズに情報を得ることができます。

Ajax（Asynchronous JavaScript and XML）はこの非同期通信の技術の1つで、JavaScriptを使ってサーバーとの通信を行います。代表的な技術としてXMLHttpRequestオブジェクトがあり、このオブジェクトを使用すると、ページのリロードなしにサーバーとデータのやり取りができます。

XMLHttpRequestオブジェクトとは？

XMLHttpRequest（XHR）オブジェクトは、JavaScriptで非同期通信を行うためのオブジェクトです。これにより、ユーザーがフォームを送信したり、ボタンを押したりしたときに、ページを再読み込みせずにデータをサーバーから取得したり送信したりできます。例えば、チャットアプリやリアルタイムでニュースが更新されるウェブサイトなどでこの技術が使われています。

XHRを使用すると、ユーザーの操作に応じてバックグラウンドでサーバーから必要な情報だけを取得し、画面に反映することができます。この技術によって、ウェブページはよりスムーズで直感的な動作を実現できます。

XMLHttpRequestオブジェクトの基本的な使い方

XMLHttpRequestの基本的な流れは次のようになります。

  1. リクエストを作成するためにXMLHttpRequestオブジェクトを作成します。
  2. open()メソッドを使ってリクエストの設定を行います。このメソッドでは、リクエストの種類（GETやPOST）と、リクエストを送るURLを指定します。
  3. onloadイベントを定義して、サーバーからデータが返ってきたときの処理を指定します。
  4. send()メソッドを使って、リクエストを送信します。

以下は基本的なコードの例です。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

この例では、サーバーからデータを取得し、ステータスコードが200（成功）の場合に、データを表示しています。

具体的なXMLHttpRequestの例

次に、具体的な例として、ボタンをクリックしてサーバーからデータを取得し、ページに表示する実装を紹介します。この例では、リクエストが成功した場合には取得したデータを表示し、失敗した場合はエラーメッセージを表示します。

非同期通信の例

結果: ボタンをクリックすると、サーバーからデータが取得されて画面に表示されます。

HTMLコード

<button onclick="fetchData()">データを取得する</button>
<div id="response"></div>

JavaScriptコード

function fetchData() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('response').innerHTML = xhr.responseText;
        } else {
            document.getElementById('response').innerHTML = 'データの取得に失敗しました。';
        }
    };
    xhr.onerror = function() {
        document.getElementById('response').innerHTML = 'リクエストエラーが発生しました。';
    };
    xhr.send();
}

このコードでは、ボタンをクリックするたびに、サーバーからデータを非同期で取得し、ページに反映します。エラーが発生した場合には、エラーメッセージが表示されるように設定しています。

XMLHttpRequestのポイント

XMLHttpRequestを使う際には、いくつかのポイントがあります。

  • 非同期処理: XMLHttpRequestはデフォルトで非同期に動作します。これは、サーバーからの応答を待つ間、ブラウザが他の操作を続けることができるという意味です。ユーザー体験の向上に役立ちます。
  • ステータスコードの確認: サーバーからのレスポンスは、HTTPステータスコードで結果が返ってきます。たとえば、200は成功、404はリソースが見つからない、500はサーバーエラーを意味します。
  • エラーハンドリング: サーバーにアクセスできなかったり、レスポンスが正しく受信できなかった場合に備え、エラー処理を行うことが重要です。エラーハンドリングを実装して、適切なメッセージをユーザーに表示しましょう。
  • 非同期リクエスト: XMLHttpRequestは非同期通信が可能ですが、リクエストを同期で行うこともできます。同期リクエストはページ全体をロックしてしまうため、非同期でのリクエストを推奨します。

まとめ

XMLHttpRequestオブジェクトを使うことで、JavaScriptを通じて非同期通信を実現し、ページの一部を動的に更新することができます。非同期通信により、ページの再読み込みを防ぎつつ、リアルタイムでサーバーからデータを取得したり、ユーザーの操作に応じて情報を表示したりすることが可能になります。非同期処理やエラーハンドリングに注意しながら、この技術を使うことで、スムーズで使いやすいWebアプリケーションを構築できます。

スポンサーリンク