初心者でも安心！JavaScript XMLHttpRequestの使い方10選

はじめに

この記事を読めば、初心者でもJavaScriptのXMLHttpRequestを使ってデータ通信ができるようになります。

本記事では、XMLHttpRequestの基本から応用例まで、分かりやすいサンプルコードを交えながら詳しく解説していきます。

●JavaScriptのXMLHttpRequestとは

XMLHttpRequestは、JavaScriptを使用してHTTPリクエストを行うことができるオブジェクトです。

Webページとサーバーとの間でデータをやり取りする際に使用されます。

例えば、フォームデータの送信や、外部APIとの通信などが挙げられます。

○XMLHttpRequestの基本

XMLHttpRequestを使用するためには、まず新しいXMLHttpRequestオブジェクトを作成します。

const xhr = new XMLHttpRequest();

次に、リクエストの初期化を行います。

これには、HTTPメソッド（GETやPOSTなど）と、リクエスト先のURLを指定します。

xhr.open("GET", "https://example.com/data");

最後に、リクエストを送信します。

xhr.send();

●XMLHttpRequestの使い方

ここでは、XMLHttpRequestを使ったデータ通信の基本的な使い方をサンプルコードと共に紹介します。

○サンプルコード1：基本的なGETリクエスト

このコードでは、GETメソッドを使ってデータを取得するリクエストを紹介しています。

この例では、サーバーからテキストデータを取得してコンソールに表示しています。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

○サンプルコード2：基本的なPOSTリクエスト

このコードでは、POSTメソッドを使ってデータを送信するリクエストを紹介しています。

この例では、フォームデータをサーバーに送信しています。

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/data");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send("key1=value1&key2=value2");

○サンプルコード3：JSONデータの送受信

このコードでは、JSONデータを送受信するためのリクエストを紹介しています。

この例では、サーバーから取得したJSONデータをパースしてコンソールに表示し、JSONデータをサーバーに送信しています。

// JSONデータの取得
const xhrGet = new XMLHttpRequest();
xhrGet.open("GET", "https://example.com/data");
xhrGet.onreadystatechange = function () {
  if (xhrGet.readyState === 4 && xhrGet.status === 200) {
    const jsonData = JSON.parse(xhrGet.responseText);
    console.log(jsonData);
  }
};
xhrGet.send();

// JSONデータの送信
const xhrPost = new XMLHttpRequest();
xhrPost.open("POST", "https://example.com/data");
xhrPost.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhrPost.onreadystatechange = function () {
  if (xhrPost.readyState === 4 && xhrPost.status === 200) {
    console.log(xhrPost.responseText);
  }
};
const data = {
  key1: "value1",
  key2: "value2",
};
xhrPost.send(JSON.stringify(data));

○サンプルコード4：エラーハンドリング

このコードでは、リクエスト中に発生するエラーを処理する方法を紹介しています。

この例では、ステータスコードに応じてエラーメッセージを表示しています。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error("リクエストに失敗しました。ステータスコード：" + xhr.status);
    }
  }
};
xhr.onerror = function () {
  console.error("通信エラーが発生しました。");
};
xhr.send();

●XMLHttpRequestの応用例

ここでは、XMLHttpRequestを用いた実用的な応用例をいくつか紹介します。

○サンプルコード5：プログレスバーの表示

このコードでは、データの送受信状況に応じてプログレスバーを表示する方法を紹介しています。

この例では、ダウンロードの進捗をプログレスバーに反映させています。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/large-file");
xhr.responseType = "blob";
xhr.onprogress = function (event) {
  const progress = (event.loaded / event.total) * 100;
  console.log("ダウンロード進捗：" + progress + "%");
};
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("ダウンロード完了");
  }
};
xhr.send();

○サンプルコード6：画像のアップロード

このコードでは、画像ファイルをアップロードするためのリクエストを紹介しています。

この例では、フォームから選択された画像をサーバーにアップロードしています。

// HTML要素
// <input type="file" id="image" accept="image/*">

document.getElementById("image").addEventListener("change", function (event) {
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/upload");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("アップロード成功");
    }
  };

  const formData = new FormData();
  formData.append("image", event.target.files[0]);
  xhr.send(formData);
});

○サンプルコード7：ファイルのダウンロード

このコードでは、ファイルのダウンロードを行うリクエストを紹介しています。

この例では、サーバーからファイルをダウンロードし、ブラウザでダウンロードリンクを生成しています。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/file");
xhr.responseType = "blob";
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const blob = xhr.response;
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "file.ext";
    a.click();
    URL.revokeObjectURL(url);
  }
};
xhr.send();

○サンプルコード8：CORS対応のリクエスト

このコードでは、CORS（Cross-Origin Resource Sharing）対応のリクエストを紹介しています。

この例では、別オリジンのサーバーからデータを取得しています。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

○サンプルコード9：同期リクエストの使用

このコードでは、同期リクエストの方法を紹介しています。

この例では、データを取得した後に次の処理を実行しています。

ただし、同期リクエストは現在非推奨となっているため、非同期リクエストの利用が推奨されます。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data", false);
xhr.send();
if (xhr.status === 200) {
  console.log(xhr.responseText);
}

○サンプルコード10：リクエストのキャンセル

このコードでは、実行中のリクエストをキャンセルする方法を紹介しています。

この例では、5秒後にリクエストをキャンセルしています。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error("リクエストがキャンセルされました。");
    }
  }
};
xhr.send();

setTimeout(() => {
  xhr.abort();
}, 5000);

●注意点と対処法

XMLHttpRequestを使用する際にはいくつかの注意点があります。

1. 同期リクエストは非推奨：同期リクエストはUIのブロックやパフォーマンスの低下を招く可能性があるため、非同期リクエストの利用が推奨されます。
2. エラーハンドリングを適切に行う：ネットワークエラーやサーバーエラーが発生する可能性があるため、適切なエラーハンドリングを実装してください。
3. CORSを意識する：異なるオリジンのリソースへのアクセスにはCORS対応が必要です。サーバー側で適切なCORS設定を行ってください。

●カスタマイズ方法

XMLHttpRequestは、カスタマイズが可能です。

例えば、タイムアウトの設定やリクエストヘッダーの追加、レスポンスタイプの指定などができます。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data");
xhr.timeout = 10000; // タイムアウトを10秒に設定
xhr.setRequestHeader("X-Custom-Header", "customValue"); // カスタムヘッダーの追加
xhr.responseType = "json"; // レスポンスタイプをJSONに設定
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.response);
  }
};
xhr.send();

まとめ

この記事では、XMLHttpRequestの基本的な使い方や応用例をいくつか紹介しました。

注意点やカスタマイズ方法も確認し、適切にリクエストを実行できるようになりましょう。

ただし、最近ではFetch APIがXMLHttpRequestの代替として推奨されており、より簡単かつ柔軟なAPIを提供しています。

今後のプロジェクトでは、Fetch APIの利用も検討してみてください。