JavaScriptでインターフェースを呼び出す方法

JavaScript は、API や Web サービスを呼び出すことで機能を拡張できる非常に強力なプログラミング言語です。この記事では、JavaScript を使用してインターフェイスを呼び出す方法について詳しく説明します。

1. インターフェイスの概念

インターフェイスは、API (アプリケーション プログラミング インターフェイス) とも呼ばれる、さまざまなソフトウェア システム間の通信チャネルです。 API を介して、プログラマは異なるプログラミング言語間の通信を可能にすることもできます。したがって、JavaScript を使用してインターフェイスを呼び出したい場合は、インターフェイスの基本概念を理解する必要があります。

2. メソッドの呼び出し

JavaScript はさまざまな方法で API を呼び出すことができます。最も一般的に使用されるメソッドは、AJAX (非同期 JavaScript および XML) と Fetch API です。 Fetch API は、最新のブラウザに組み込まれている新しい API で、HTTP リクエストをサーバー側に送信して応答を受信できます。

3. Fetch API

Fetch API は Promise ベースの API であるため、非同期環境での実行に非常に適しています。 Fetch API を使用すると、HTTP リクエストを送信し、解決関数と拒否関数を使用して応答の結果を処理できます。例:

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

上記のコードは、GET リクエストを https://api.example.com/data に送信し、応答 JSON を解析してブラウザ コンソールに出力します。リクエストが成功した場合は then コールバック関数がトリガーされ、エラーが発生した場合は catch コールバック関数がトリガーされます。

4. AJAX

AJAX は、バックエンド サーバー システムとフロントエンド Web ページと対話するテクノロジーであり、データを更新する必要がなく、非同期更新を実現できます。 Web ページが完全に読み込まれています。このテクノロジは XMLHttpRequest オブジェクトに基づいており、HTTP リクエストを送信してサーバーと対話し、サーバーからデータを受信し、JavaScript を使用してページ全体を更新せずに Web ページのコンテンツを更新します。例:

const xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

上記のコードは、XMLHttpRequest オブジェクトを作成し、GET リクエストを https://api.example.com/data に送信し、ブラウザ コンソールに応答を返します。リクエストが成功した場合は、応答テキスト出力が応答され、リクエストが失敗した場合は、ステータス テキスト出力が応答されます。

5. 基本的なインターフェイスの呼び出し

次に、JavaScript を使用してサンプル API を呼び出します。

fetch('https://swapi.dev/api/people/1/')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

上記のコードは https://swapi.dev/api/people/1/ を呼び出し、「スター ウォーズ」のキャラクターに関する情報を返します。応答が成功すると、コールバック関数がトリガーされ、応答の JSON が解析されてブラウザーのコンソールに出力されます。

6. API 認可

一部の API にはアクセスするために認可が必要です。 APIを呼び出す前に必ず完全な権限を取得してください。たとえば、多くの API は OAuth 2.0 認証フレームワークを使用してリソースを保護します。 OAuth 2.0 は、保護された API にアクセスするための一般的なオープン標準であり、これによりユーザーはアプリケーションを承認し、必要なリソースにアクセスできます。 OAuth 2.0 では、認可コード プロセス、暗黙的プロセス、パスワード認証情報プロセス、およびクライアント認証情報プロセスという 4 つの一般的な認証プロセスが可能です。

7. 概要

この記事では、JavaScript を使用して API を呼び出す方法について詳しく説明しました。 Fetch API と AJAX の 2 つのメソッドを紹介し、基本的なインターフェイス呼び出しの例を提供しました。インターフェイスは最新の Web 開発に不可欠な部分であるため、JavaScript を使用してインターフェイスを呼び出す方法を理解すると、より強力な Web アプリケーションを開発するのに役立ちます。同時に、API を使用する前に必ず十分な権限を取得してください。

以上がJavaScriptでインターフェースを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。