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

JavaScript XMLHttpRequest 使い方 10選 サンプルコード JS
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、初心者でも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の利用も検討してみてください。