web-dev-qa-db-ja.com

XMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.getの違いは何ですか

状況に最適な方法を見つけるにはどうすればよいですか?誰かが機能とパフォーマンスの面で違いを知るためにいくつかの例を提供できますか?

113
Rodrigues
  • XMLHttpRequestは、jQueryがより使いやすく簡素化されたフォームとクロスブラウザの一貫した機能にラップする生のブラウザオブジェクトです。

  • jQuery.ajaxは、jQueryの一般的なAjaxリクエスターであり、あらゆるタイプおよびコンテンツリクエストを実行できます。

  • jQuery.getおよびjQuery.postは、GETおよびPOSTリクエスト。これらが何であるかわからない場合は、 HTTPプロトコル を確認し、少し学ぶ必要があります。内部的にこれらの2つの関数はjQuery.ajaxを使用しますが、独自に設定する必要がない特定の設定を使用するため、jQuery.ajaxを使用する場合と比較してGETまたはPOSTリクエストを簡素化します。とにかくGETおよびPOSTが最もよく使用されるHTTPメソッドです(DELETE、PUT、HEADまたは他のめったに使用されないエキゾチックと比較して)。

すべてのjQuery関数はバックグラウンドでXMLHttpRequestオブジェクトを使用しますが、自分で行う必要のない追加機能を提供します。

使用法

したがって、jQueryを使用している場合は、jQuery機能onlyを使用することを強くお勧めします。 XMLHttpRequestを忘れてください。適切なjQuery要求関数のバリエーションを使用し、他のすべての場合は$.ajax()を使用します。他の jQuery Ajax関連の一般的な関数 to $.get()$.post()および$.ajax()があることを忘れないでください。すべてのリクエストに$.ajax()を使用できますが、呼び出しにはもう少しオプションが必要なので、もう少しコードを書く必要があります。

類推

自動車のエンジンを購入して、ステアリング、ブレーキなどを使って車全体を作成する必要があるようです。自動車メーカーは、使いやすいインターフェイス(ペダル、ステアリングホイールなど)を備えた完成車を生産します。そのため、すべてを自分で行う必要はありません。

135
Robert Koritnik

それぞれがXMLHttpRequestを使用します。これは、ブラウザーが要求を行うために使用するものです。 jQueryは単なるJavaScriptライブラリであり、XMLHttpRequestを作成するために $。ajax メソッドが使用されます。

$。post および $。get は、$.ajaxの単なる短縮形です。それらはほとんど同じことをしますが、AJAXリクエストを書くことをより速くします-$.postはHTTP POSTリクエストを作成し、$.getはHTTP GETリクエストを作成します。

26

jQuery.getは、XMLHttpRequestのラッパーであるjQuery.ajaxのラッパーです。

XMLHttpRequestとFetch API(現時点では実験的)はDOMでのみであるため、最速でなければなりません。

私はもう正確ではない多くの情報を見たので、誰もがいつでも最高のバージョンからバージョンをテストできるテストページを作成しました。

https://jsperf.com/xhr-vs-jquery-ajax-vs-get-vs-fetch

今日の私のテストでは、jQueryだけがクリーンなソリューションでも高速なソリューションでもないことが示されています。モバイルまたはデスクトップでの結果は、jQueryがXHR2よりも少なくとも80%遅いことを示しています。モバイルでは、単純なサイトをロードするのに時間がかかります。

使用法自体もリンクにあります。

5
Sirius

jQuery.postとjQuery.getは、一般的なページの読み込みをシミュレートします。つまり、送信ボタンをクリックすると、新しいページに移動します(または同じページを再読み込みします)。 postとgetは、データがサーバーに送信される方法がわずかに異なります(それに関する良い記事は here にあります)。

jQuery.ajaxおよびXMLHttpRequestは、ページが変更されないことを除いて、postおよびgetと同様のページ読み込みです。サーバーが返す情報は、JavaScriptによってローカルで使用され、ページレイアウトの変更など、あらゆる方法で使用されます。これらは通常、ユーザーがページをナビゲートできる間に非同期作業を行うために使用されます。これの良い例は、データベース値から動的にロードしてテキストフィールドを完成させることによる自動補完機能です。 jQuery.ajaxとXMLHttpRequestの根本的な違いは、jQuery.ajaxがXMLHttpRequestを使用して同じ効果を実現するが、よりシンプルなインターフェースを使用することです。 jQueryを使用する場合は、jQuery.ajaxを使用することをお勧めします。

2
Neil

古い投稿。しかし、まだ答えたいと思いますWeb Workers(javascript)での作業中に直面した1つの違い

ウェブワーカーはUIレベルのアクセス権を持ちません。つまり、ウェブワーカーを使用して実行するJavaScriptコードのDOM要素にはアクセスできません。ウィンドウ、ドキュメント、親などのオブジェクトには、ウェブワーカーコードではアクセスできません。

jQueryライブラリはHTML DOMに関連付けられており、許可すると「DOMアクセスなし」ルールに違反します。 jQuery.ajax、jQuery.post、jQuery.getなどのメソッドはWebワーカーでは使用できないため、これは少し苦痛です。幸いなことに、XMLHttpRequestオブジェクトを使用してAjaxリクエストを作成できます。

1
Mannan Bahelim

JQueryメソッドに関する限り、.postおよび.getは内部で.ajaxを実行するだけであり、その目的は.ajaxの不要なオプションの一部を抽象化し、適切なデフォルトを提供することです。それぞれそのタイプのリクエストに。

3つのうちのどれにもパフォーマンスに大きな違いがあるとは思いません。

.ajaxメソッド自体はXMLHttpRequestを実行し、残りのjQueryごとに大幅に最適化されますが、おそらく対話全体を自分で調整した場合ほど効率的ではないでしょう。しかし、それは違いです。大量のコードを書くかjQuery.ajaxを書く。

0
Steve