[JS/TS] xhr (非同期通信オブジェクト)を使ってみる

xhrとは

xhr（XMLHttpRequest）は、JavaScriptを使用して非同期にサーバーと通信するためのオブジェクトです。これにより、ページ全体を再読み込みすることなく、部分的にデータを更新することができます。

👉 ポイント: xhrはJavaScriptで非同期通信を行うためのオブジェクトです。

xhrの基本的な使い方

1. オブジェクトの作成: まず、XMLHttpRequestオブジェクトを作成します。

   const xhr = new XMLHttpRequest();
   

   👉 ポイント: new XMLHttpRequest()でxhrオブジェクトを生成します。

2. 通信の設定: 通信のタイプやURLを設定します。

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

   👉 ポイント: openメソッドで通信の方法やURLを指定します。

3. レスポンスの取得: サーバーからのレスポンスを受け取るための処理を設定します。

   xhr.onload = function() {
       if (xhr.status === 200) {
           console.log(xhr.responseText);
       } else {
           console.error('Request failed.');
       }
   };
   

   👉 ポイント: onloadイベントでレスポンスを処理します。

4. 通信の開始: 設定した通信を実際に開始します。

   xhr.send();
   

   👉 ポイント: sendメソッドで通信を開始します。