JavaScriptでxhrを使いこなす!6つのステップ

JavaScript xhrの使い方を解説するイラスト JS
この記事は約7分で読めます。

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

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

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

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

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

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

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

はじめに

この記事を読むことで、JavaScriptでxhrを使いこなす方法が身につくでしょう。

xhrはウェブページとサーバー間でデータを送受信する際に使用される技術です。

初心者でも簡単に理解できるよう、基本的な使い方から応用例、注意点まで徹底的に解説していきます。

各ステップには実用的なサンプルコードも掲載しているので、ぜひ実践しながら学んでみてください。

●JavaScriptとは

JavaScriptは、ウェブページにインタラクティブ性をもたらすプログラミング言語です。

HTMLでページ構造を作り、CSSでデザインを整えた後、JavaScriptを使って動的な要素を追加することができます。

例えば、ユーザーがボタンをクリックしたときにアクションが起こるようにしたり、データを非同期的にサーバーから取得したりするのに役立ちます。

●XMLHttpRequest(xhr)とは

○xhrの基本概念

XMLHttpRequest(xhr)は、JavaScriptを使ってウェブページとサーバー間でデータを送受信するためのオブジェクトです。

xhrを使うことで、ページのリロードなしにサーバーからデータを取得し、ウェブページに反映させることができます。

これにより、ユーザーエクスペリエンスが向上し、よりスムーズな操作が可能になります。

○xhrの生成方法

JavaScriptでxhrオブジェクトを生成するには、次のコードを使用します。

const xhr = new XMLHttpRequest();

これで、xhrオブジェクトを生成し、さまざまなメソッドとプロパティを使用してリクエストを行うことができます。

●xhrの使い方

○サンプルコード1:GETリクエストの基本

このコードでは、GETリクエストを使ってサーバーからデータを取得する方法を紹介しています。

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

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.txt', true);
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/submit', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
const formData = 'key1=value1&key2=value2';
xhr.send(formData);

○サンプルコード3:リクエストのエラーハンドリング

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

この例では、リクエストが失敗した場合にエラーメッセージを表示しています。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.txt', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('リクエストに失敗しました:' + xhr.statusText);
    }
  }
};
xhr.send();

●xhrの応用例

○サンプルコード4:JSONデータの取得

このコードでは、JSONデータを取得する方法を紹介しています。

この例では、サーバーからJSONデータを取得し、JavaScriptオブジェクトに変換して利用しています。

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

○サンプルコード5:画像データの取得

このコードでは、画像データを取得する方法を紹介しています。

この例では、サーバーから画像データを取得し、ページ上に表示しています。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/image.jpg', true);
xhr.responseType = 'blob';
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(xhr.response);
    document.body.appendChild(img);
  }
};
xhr.send();

○サンプルコード6:ファイルアップロード

このコードでは、ファイルをアップロードする方法を紹介しています。

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

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
  const file = input.files[0];
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://example.com/upload', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('ファイルのアップロードに成功しました');
    }
  };
  const formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
});

●注意点と対処法

  1. セキュリティ:クロスオリジンリソース共有(CORS)によって、異なるオリジンからのリクエストが制限されることがあります。
    CORSの設定を適切に行うことで、安全にデータの送受信ができます。
  2. 古いブラウザ対応:古いブラウザでは、XMLHttpRequestの一部の機能がサポートされていないことがあります。
    対応するために、代替手段(例:jQuery)を利用するか、機能検出を行ってください。
  3. エラーハンドリング:ネットワークエラーやタイムアウトなど、様々な問題が発生する可能性があります。
    適切なエラーハンドリングを行い、ユーザーにフィードバックを提供してください。

まとめ

この記事では、JavaScriptのXMLHttpRequest(xhr)を使って、ウェブページとサーバー間でデータを送受信する方法を解説しました。

基本的なGETリクエストやPOSTリクエストから、応用例としてJSONデータや画像データの取得、ファイルアップロードまで、幅広いテーマを取り上げました。

これらの知識を活用して、インタラクティブなウェブページを作成してください。

最後に、セキュリティやエラーハンドリングの重要性を念頭に置いて開発を進めることが大切です。