5 つのトップ JavaScript Ajax コンポーネント ライブラリを共有する

AJAX は、サーバーへの非同期 HTTP 呼び出しを行うために使用される一連の Web 開発テクノロジ クライアント フレームワークです。この記事では、5 つの主要な JavaScript Ajax コンポーネント ライブラリを紹介します。

AJAX は、サーバー A への非同期呼び出しを行うために使用されます。 HTTP によって呼び出される一連の Web 開発テクノロジ クライアント フレームワーク。 AJAX は、Asynchronous JavaScript and XML の略です。 AJAX はかつて Web 開発の世界では一般的な名前であり、多くの人気のある JavaScript ウィジェットは AJAX を使用して構築されました。たとえば、特定のユーザー操作 (ボタンを押すなど) はサーバーへの非同期呼び出しを行い、サーバーはデータを取得してクライアントに返します。すべて Web ページをリロードする必要はありません。

AJAX

JavaScript の最新の再導入は進化しており、現在ではフロントエンド ライブラリや React、Angular、Vue などのフレームワークを使用して動的な Web サイトを構築しています。最新の非同期 JavaScript 呼び出しには XML ではなく JSON の取得が含まれるため、AJAX の概念も大幅に変更されました。クライアント アプリケーションからサーバーへの非同期呼び出しを可能にするライブラリが多数あります。ブラウザーの標準に組み込まれているものもありますが、柔軟で使いやすいため大規模なユーザーベースを持つものもあります。 Promise をサポートするものもあれば、コールバックを使用するものもあります。この記事では、サーバーからデータを取得するための AJAX ライブラリのトップ 5 を紹介します。

Fetch API

Fetch API は、サーバーからリソースを取得するための XMLHttpRequest に代わる最新の API です。 XMLHttpRequest とは異なり、より強力な機能セットとより意味のある名前が付いています。その構文と構造に基づいて、Fetch は柔軟で使いやすいです。ただし、他の AJAX HTTP ライブラリと異なるのは、最新のすべての Web ブラウザをサポートしていることです。 Fetch はリクエストとレスポンスのアプローチに従います。つまり、Fetch はリクエストを作成し、Response オブジェクトに解決される Promise を返します。

Request オブジェクトを渡して取得することも、取得したいリソースの URL を渡すこともできます。次の例は、Fetch を使用して単純な GET リクエストを作成する方法を示しています。

fetch('https://www.example.com', {
    method: 'get'
  })
  .then(response => response.json())
  .then(jsonData => console.log(jsonData))
  .catch(err => {      //error block
   })

ご覧のとおり、Fetch の then メソッドは応答オブジェクトを返し、一連の then をさらなる操作に使用できます。 .json() メソッドを使用して応答を JSON に変換し、コンソールに出力します。

フォーム データを POST する必要がある場合、または Fetch を使用して AJAX ファイル アップロードを作成する必要がある場合はどうすればよいでしょうか?この時点で、Fetch に加えて、入力フォームも必要になり、FormData ライブラリを使用してフォーム オブジェクトを保存します。

var input = document.querySelector('input[type="file"]')var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'blizzerand')
fetch('/avatars', {
  method: 'POST',
  body: data
})

Axios

Axios は、AJAX 呼び出しを行うための XMLHttpRequest に基づいて構築された最新の JavaScript ライブラリです。これにより、ブラウザやサーバーから HTTP リクエストを行うことができます。さらに、ES6 ネイティブ Promise API もサポートします。 Axios のその他の優れた機能には次のものがあります。

1. リクエストとレスポンスのインターセプト。

2. Promise を使用してリクエストとレスポンスのデータを変換します。

3. JSON データを自動的に変換します。

4. リアルタイムリクエストをキャンセルします。

5. Axios を使用するには、まずインストールする必要があります。

npm install axios

以下は、Axios の動作を示す基本的な例です。

// Make a request for a user with a given IDaxios.get('/user?ID=12345')
 .then(function (response) {  console.log(response);
 })
 .catch(function (error) {  console.log(error);
 });

Fetch と比較すると、Axios の構文は単純です。 Fetch を使用して前に作成した AJAX ファイル アップローダーのような、より複雑なことを実行してみましょう。

var data = new FormData();
  data.append('foo', 'bar');
  data.append('file', document.getElementById('file').files[0]);  var config = {
    onUploadProgress: function(progressEvent) {     var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
    }
  };
  axios.put('/upload/server', data, config)
   .then(function (res) {
    output.className = 'container';
    output.innerHTML = res.data;
   })
   .catch(function (err) {
    output.className = 'container text-danger';
    output.innerHTML = err.message;
   });

Axios の方が読みやすいです。 Axios は、React や Vue などの最新のライブラリでも非常に人気があります。

jQuery

jQuery は、かつては JavaScript の最前線のライブラリであり、AJAX 呼び出しから DOM コンテンツの操作まであらゆる処理に使用されていました。他のフロントエンド ライブラリの「影響」によりその関連性は低下しましたが、引き続き jQuery を使用して非同期呼び出しを行うことができます。

以前に jQuery を使用したことがある場合は、これがおそらく最も簡単な解決策です。ただし、$.ajax メソッドを使用するには、jQuery ライブラリ全体をインポートする必要があります。このライブラリには $.getJSON、$.get、$.post などのドメイン固有のメソッドがありますが、その構文は他の AJAX ライブラリほど単純ではありません。次のコードは、基本的な GET リクエストを作成するために使用されます。

$.ajax({
 url: '/users',
 type: "GET",
 dataType: "json",
 success: function (data) {   console.log(data);
 }
 fail: function () {   console.log("Encountered an error")
 }
});

jQuery の良いところは、質問がある場合に多くのサポートとドキュメントを見つけることができることです。 FormData() と jQuery を使用した AJAX ファイルのアップロードの例をたくさん見つけました。最も簡単な方法は次のとおりです。

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url : 'upload.php',
    type : 'POST',
    data : formData,
    processData: false, // tell jQuery not to process the data
    contentType: false, // tell jQuery not to set contentType
    success : function(data) {      console.log(data);
      alert(data);
    }
});

SuperAgent

SuperAgent は、読みやすさと柔軟性に重点を置いた軽量で進歩的な AJAX ライブラリです。また、SuperAgent は、他のライブラリとは異なり、学習曲線が緩やかです。同じ Node.js API のモジュールがあります。 SuperAgent には、GET、POST、PUT、DELETE、HEAD などのメソッドを受け入れるリクエスト オブジェクトがあります。その後、.then()、.end()、または新しい .await() メソッドを呼び出して応答を処理できます。たとえば、次のコードは SuperAgent を使用した単純な GET リクエストです。

request
  .post('/api/pet')
  .send({ name: 'Manny', species: 'cat' })
  .set('X-API-Key', 'foobar')
  .set('Accept', 'application/json')
  .then(function(res) {
   alert('yay got ' + JSON.stringify(res.body));
  });

この AJAX ライブラリを使用してファイルをアップロードするなど、さらに多くのことを実行したい場合はどうすればよいですか?こちらも超簡単。

request
  .post('/upload')
  .field('user[name]', 'Tobi')
  .field('user[email]', 'tobi@learnboost.com')
  .field('friends[]', ['loki', 'jane'])
  .attach('image', 'path/to/tobi.png')
  .then(callback);

Request - 簡素化された HTTP クライアント

Request ライブラリは、HTTP 呼び出しを行う最も簡単な方法の 1 つです。構造と構文は、Node.js でリクエストが処理される方法と非常によく似ています。現在、このプロジェクトには GitHub 上に 18,000 個のスターがあり、利用可能な中で最も人気のある HTTP ライブラリの 1 つであることは言及する価値があります。以下に例を示します。

var request = require('request');
request('http://www.google.com', function (error, response, body) {
 console.log('error:', error); // Print the error if one occurred
 console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
 console.log('body:', body); // Print the HTML for the Google homepage.
});

私の個人的なお気に入りは Axios です。読みやすく、見た目も楽しいからです。また、Fetch には十分に文書化されており、標準化されたソリューションがあるため、Fetch に忠実であり続けることができます。

上記はこの章の全内容です。その他の関連チュートリアルについては、JavaScript ビデオ チュートリアルをご覧ください。

以上が5 つのトップ JavaScript Ajax コンポーネント ライブラリを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。