XMLHttpRequestを使用してサーバーからデータを取得

JavaScript API

XMLHttpRequestとは

XMLHttpRequest（略してXHR）は、JavaScriptを使用してウェブブラウザとウェブサーバーの間でデータを非同期的にやり取りするためのAPIです。
これにより、ページを再読み込みすることなく、バックグラウンドでサーバーからデータを取得したり、サーバーにデータを送信したりすることができます。

主な用途には、以下のようなものがあります。

  • サーバーからデータを取得してページの一部を更新する（例：動的に読み込まれるコンテンツ）。
  • フォームデータをサーバーに送信して、応答を待たずにページの他の部分を操作する。
  • サーバーとのリアルタイムな通信を実現する（例：チャットアプリやライブフィード）。

基本的な使い方

以下は、XMLHttpRequestを使用してサーバーからデータを取得する基本的な例です。

// 新しいXMLHttpRequestオブジェクトを作成
var xhr = new XMLHttpRequest();

// リクエストの設定
xhr.open('GET', 'https://api.example.com/data', true);

// リクエストが完了した時の処理
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 成功した場合の処理
    console.log(xhr.responseText);
  } else {
    // エラーが発生した場合の処理
    console.error('Request failed with status: ' + xhr.status);
  }
};

// リクエストを送信
xhr.send();

主なメソッドとプロパティ

open(method, url, async)
リクエストの初期化を行います。
methodはGETやPOST、urlはリクエストするURL、asyncはリクエストが非同期であるかどうかを指定します。
send(data)
リクエストを送信します。
dataには送信するデータを指定します（GETリクエストの場合はnull）。
onload
リクエストが完了したときに呼び出されるイベントハンドラ。
onerror
リクエストがエラーになったときに呼び出されるイベントハンドラ。
status
HTTPステータスコードを返します（例：200は成功、404はリソースが見つからない）。
responseText
レスポンスデータをテキスト形式で返します。

近年では、XMLHttpRequestの代わりにFetch APIを使うことが増えています。
Fetch APIはよりシンプルで使いやすいインターフェースを提供し、Promiseをベースにしているため、非同期処理がより簡潔に書けます。

Fetch APIの例

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

Fetch APIの方がモダンで柔軟性が高いため、新しいプロジェクトではこちらを使用することが推奨されます。