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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <

タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページ コンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

Ajax セキュリティを向上させるには、いくつかの方法があります。 CSRF 保護: トークンを生成してクライアントに送信し、それを検証リクエストのサーバー側に追加します。 XSS 保護: htmlspecialchars() を使用して入力をフィルタリングし、悪意のあるスクリプトの挿入を防ぎます。 Content-Security-Policy ヘッダー: 悪意のあるリソースの読み込みを制限し、スクリプトとスタイル シートの読み込みを許可するソースを指定します。サーバー側の入力を検証する: Ajax リクエストから受け取った入力を検証して、攻撃者による入力の脆弱性の悪用を防ぎます。安全な Ajax ライブラリを使用する: jQuery などのライブラリによって提供される自動 CSRF 保護モジュールを利用します。
