JavaScriptで接続する方法-フロントエンドQ&A-php.cn

JavaScriptで接続する方法

王林

リリース： 2023-05-05 22:58:07

オリジナル

837 人が閲覧しました

JavaScript は、Web フロントエンド開発、Web アプリケーション、サーバーサイド開発に使用できるスクリプト言語です。高級プログラミング言語として、多くの重要かつ実用的な機能を備えています。その 1 つは、他のソフトウェアやサービスへの接続です。この記事では、JavaScript が他のソフトウェアやサービスにどのように接続するかを詳しく見ていきます。

基本

他のソフトウェアやサービスに接続する方法について説明する前に、いくつかの基本を理解する必要があります。

HTTP プロトコル

HTTP (Hypertext Transfer Protocol) は、Web 上の通信プロトコルであり、クライアント/サーバープロトコルです。クライアントが HTTP リクエストを開始し、サーバーが HTTP レスポンスで応答します。 HTTP はトランスポートプロトコルとして TCP/IP を使用し、通常はポート 80 を使用します。

HTTP プロトコルは、リクエストメソッドとレスポンスステータスコードに分かれています。一般的なリクエストメソッドは、GET、POST、PUT、DELETE などです。一般的な応答ステータスコードは、200 (OK)、400 (不正なリクエスト)、404 (見つからない)、500 (内部サーバーエラー) などです。

REST API

REST (Representational State Transfer) は、Web 上の HTTP プロトコルを使用してクライアントとサーバー間の対話を実現する設計スタイルです。 RESTful API (RESTful Application Programming Interface) は、REST 設計スタイルに基づいて記述された API です。 RESTful API を使用すると、クライアントは HTTP リクエストを使用して Web サービスにアクセスできます。

RESTful API の機能には、形式化された URL、HTTP リクエストメソッドの使用、データ送信形式としての JSON の使用などが含まれます。

AJAX

AJAX (Asynchronous JavaScript and XML) は、Web ページにデータを非同期的に読み込むために使用されるテクノロジです。これにより、Web ページは JavaScript 経由で HTTP リクエストを発行し、ページ全体を更新せずにページコンテンツの一部を更新できるようになります。

他のソフトウェアやサービスに接続する方法

HTTP リクエストを介して他のサービスに接続する

HTTP リクエストは、他のサービスに接続する一般的な方法です。 JavaScript には、HTTP リクエストを送信するための次のようなメソッドがいくつか用意されています。オブジェクトは、HTTP リクエストを送信し、サーバーからの応答を受信してデータを取得できるネイティブ JavaScript API です。 XMLHttpRequest オブジェクトの例を次に示します。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
  else {
    console.log('Request failed.  Returned status of ' + xhr.status);
  }
};
xhr.send();

ログイン後にコピー

Fetch API
Fetch API は、XMLHttpRequest よりも HTTP リクエストを送信するための最新の方法です。以下は Fetch API の例です。

fetch('https://api.example.com/data')
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    console.log('Request successful.  Response:', text);
  })
  .catch(function(error) {
    console.log('Request failed.  Error:', error);
  });

ログイン後にコピー

Fetch API は Promise を使用して非同期リクエストを処理します。これにより、あらゆる種類のリクエストを送信し、リクエストヘッダー情報とリクエスト本文を設定し、サーバーから返されたデータを処理することができます。

RESTful API を使用して他のサービスに接続する

RESTful API は、HTTP プロトコルを使用して対話する API であり、JavaScript はそれを使用して他のサービスに接続できます。以下は、RESTful API への接続の例です:

fetch('https://api.example.com/products', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'iPhone X',
    price: 999.99
  })
})
.then(function(response) {
  return response.json();
})
.then(function(data) {
  console.log('Success:', data);
})
.catch(function(error) {
  console.error('Error:', error);
});

ログイン後にコピー

上記のコードは、POST リクエストを「https://api.example.com/products」に送信し、製品の名前と価格を渡すことができます。サーバーに送信します。サーバーから返される応答は JSON 形式のデータであり、Promise チェーン呼び出しを通じてデータが正常に返された後に処理できます。

サードパーティライブラリを使用して他のサービスに接続する

JavaScript には、jQuery や Axios など、他のサービスに接続するために使用できるサードパーティライブラリが多数あります。

jQuery

jQuery は、他のサービスへの接続など、多くの便利な機能を提供する人気のある JavaScript ライブラリです。以下は、jQuery を使用して HTTP リクエストを送信する例です。

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});

ログイン後にコピー

上記のコードは、GET リクエストを「https://api.example.com/data」に送信でき、応答テキストは次のようになります。リクエストが成功したときに出力されます。

Axios

Axios は、HTTP リクエストの送信に使用できる最新の JavaScript ライブラリであり、使いやすい API を提供します。以下は、Axios を使用して HTTP リクエストを送信する例です。

axios.get('https://api.example.com/data')
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.log(error);
  });

ログイン後にコピー

上記のコードは、GET リクエストを 'https://api.example.com/data' に送信し、成功後に応答データを出力できます。戻る。

概要

JavaScript はさまざまな方法で他のソフトウェアやサービスに接続しますが、最も一般的な方法は HTTP リクエストを送信することです。これに加えて、RESTful API とサードパーティライブラリを使用して他のサービスに接続することもできます。どの方法を使用するかに関係なく、JavaScript は他のサービスやデータにアクセスするための強力なコネクタとして機能します。

以上がJavaScriptで接続する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。