Javascript

5つのトップJavaScriptAjaxコンポーネントとライブラリ



5 Top Javascript Ajax Components



（クリックいいえ。トップパブリックすばやく集中するには）

英語：Manjunath Mが尋ねた：コード地方の力/小さなピーク



www.codeceo.com/5-javascript-ajax-libs.html




この記事では、jQuery、Axios、Fetchなど、AJAX呼び出しに最適なJSライブラリのいくつかを紹介します。サンプルコードをチェックしてください！


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





AJAXモダンが再導入されました


JavaScriptは進化し、現在、フロントエンドデータベースを使用しているか、React、Angular、Vue、その他のフレームワークとして動的なWebサイトを構築しています。 XMLの代わりにJSONを取得することを含む最新の非同期JavaScript呼び出しのため、AJAXの概念は大幅に変更されました。クライアントアプリケーションからサーバーへの非同期呼び出しを行うことができる多くのライブラリがあります。標準の中にはブラウザに組み込まれているものもあれば、柔軟性があり使いやすいだけでなく、ユーザーベースが大きいものもあります。一部のサポートプロミス、その他はコールバックを使用します。この記事では、サーバーからデータを取得するための最初の5つのAJAXライブラリを紹介します。


フェッチAPI


Fetch API XMLHttpRequestは、サーバーリソースから取得するための最新の代替手段です。また、XMLHttpRequestの違いは、より堅牢な機能セットとより意味のある名前があることです。構文と構造に基づいて、Fetchは柔軟で使いやすいだけではありません。ただし、リザーバー領域と区別される他のAJAX HTTPとは異なり、最新のすべてのWebブラウザーをサポートしているということです。フェッチ要求は次のとおりです-応答メソッド、つまりフェッチ要求で、Promiseを解析するためにResponseオブジェクトを返します。


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


フェッチ（（「https://www.example.com」、 {{

方法：'取得する'

}）

。その後（（応答=>応答。json（））

。その後（（jsonData=>コンソール。ログ（（jsonData））

。キャッチ（（エラー=>{{

//エラーブロック

}）


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


POSTフォームデータのフェッチを使用する必要がある場合、またはAJAXファイルのアップロードを作成する必要がある場合はどうなりますか？このとき、Fetchに加えて、入力フォームも必要であり、FormDataライブラリを使用してフォームオブジェクトを格納します。


どこ 入力=資料。querySelector（（'input [type =' file ']'）。

どこ データ=新着 FormData（）

データ。追加（（'ファイル'、 入力。ファイル[0]）

データ。追加（（'ユーザー'、 「ブリゼランド」）。

フェッチ（（'/アバター'、 {{

方法：'役職'、

体：データ

}）


Fetch APIの詳細については、Mozillaの公式Webドキュメントを参照してください。


Axios


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


  • 要求と応答を傍受します。

  • promise変換要求および応答データを使用します。

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

  • リアルタイムのキャンセルリクエスト。


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


npm install axios


これは、Axiosアクションを示す基本的な例です。


//指定されたIDを持つユーザーにリクエストを送信します

axios。取得する（（'/ user？ID = 12345'）。

。その後（（関数 （（応答）。 {{

コンソール。ログ（（応答）。

}）

。キャッチ（（関数 （（エラー）。 {{

コンソール。ログ（（エラー）。

}）


Fetchと比較して、Axios構文は簡単です。作成したAJAXファイルアップローダーFetchを使用する前など、もっと複雑なことをしてみましょう。


どこ データ=新着 FormData（）

データ。追加（（「foo」、 'バー'）。

データ。追加（（'ファイル'、 資料。getElementById（（'ファイル'）。ファイル[0]）

どこ 設定={{

onUploadProgress：関数（（progressEvent）。 {{

どこ パーセント完了=数学。円形（（ （（progressEvent。ロード済み* 100）。/progressEvent。合計 ）。

}

}

axios。置く（（'/ upload / server'、 データ、 設定）。

。その後（（関数 （（牛肉）。 {{

出力。クラス名='コンテナ'

出力。innerHTML=牛肉。データ

}）

。キャッチ（（関数 （（エラー）。 {{

出力。クラス名=「コンテナテキスト-危険」

出力。innerHTML=エラー。メッセージ

}）


Axiosが読みやすくなりました。 Axiosは、非常に人気のあるReactVueやその他のモダンライブラリーでもあります。


jQuery


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


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


$。Ajax（{

URL：'/ users'、

タイプ：'取得する'、

データ・タイプ：'json'、

成功：関数 （（データ）。 {{

コンソール。ログ（（データ）。

}

不合格：関数 （） {{

コンソール。ログ（（「エラーが発生しました」）。

}

}）


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


どこ formData=新着 FormData（）

formData。追加（（'ファイル'、 $（'＃ファイル'）[0]。ファイル[0]）

$。Ajax（{

URL：'upload.php'、

タイプ：'役職'、

データ：formData、

processData：false、 //データを処理しないようにjQueryに指示します

contentType：false、 // contentTypeを設定しないようにjQueryに指示します

成功：関数（（データ）。 {{

コンソール。ログ（（データ）。

アラート（（データ）。

}

}）


スーパーエージェント


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


リクエスト

。役職（（'/ api / pet'）。

。送信（{ 名前：「マニー」、 種：'ネコ' }）

。セットする（（「X-APIキー」、 「foobar」）。

。セットする（（「受け入れる」、 'application / json'）。

。その後（（関数（（牛肉）。 {{

アラート（（「イェーイ得た」+JSON。stringify（（牛肉。体））

}）


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


リクエスト

。役職（（'/ upload'）。

。フィールド（（'user [name]'、 「トビ」）。

。フィールド（（'user [email]'、 'root @ xxxxx'）。

。フィールド（（「フレンズ[]」、 [「ロキ」、 「ジェーン」]）

。添付（（'画像'、 'path / to / tobi.png'）。

。その後（（折り返し電話）。


SuperAgentの詳細に興味がある場合は、この旅を始めるのに役立つ一連の非常に優れたドキュメントがあります。


リクエスト-HTTPクライアントを簡素化します


ライブラリへのHTTP呼び出しの要求は、最も簡単な方法の1つです。 Node.jsと非常によく似た方法で構造と構文の処理要求。現在、このプロジェクトはGitHubで18K週間ありますが、最も人気のあるHTTPライブラリの1つで利用できることは言及する価値があります。以下に例を示します。


どこ リクエスト=必要とする（（'リクエスト'）。

リクエスト（（「http://www.google.com」、 関数 （（エラー、 応答、 体）。 {{

コンソール。ログ（（'エラー：'、 エラー）。 //エラーが発生した場合はエラーを出力します

コンソール。ログ（（'statusCode：'、 応答&&応答。statusCode）。 //応答を受信した場合は、応答ステータスコードを出力します

コンソール。ログ（（'体：'、 体）。 // GoogleホームページのHTMLを印刷します。

}）


結論として


10年前に実施されたのは、クライアントからHTTP呼び出しを行うのは簡単なことではありません。フロントエンド開発者は、XMLHttpRequest実装に依存する必要があり、使用が困難です。最新のライブラリとHTTPクライアントにより、ユーザーインタラクション、アニメーション、非同期ファイルアップロード、その他のフロントエンド機能が簡単になります。


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


あなたの個人的なお気に入りのAJAXライブラリはどれですか？あなたの考えを共有することを歓迎します。



この論文はあなたを助けると思いますか？もっと多くの人と共有してください

フロントエンドのスキルを強化するために「フロントエンドDaquan」を見る