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


121

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


4
パフォーマンスについて(かろうじて回答):jsperfによると、通常のXMLHttpRequestを使用するとjQueryを経由するよりもはるかに高速です。
e2-e4

回答:


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

  • jQuery.ajax 任意のタイプおよびコンテンツ要求を実行できるjQueryの一般的なAjaxリクエスターです。

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

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

使用法

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

類推

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


パフォーマンスの点で$ .ajax()を使用する利点はありますか?
ロドリゲス

1
@ロドリゲス:そうではない。あなたが考える$.post$.get遅くなるのは、$.ajax呼び出される前の少量のコードだけです。ただし、XHRを直接使用して独自のルーチンを作成する場合、状況は少し最適化されますが、バグが多くなる可能性があります。jQuery側にいることをお勧めします。それはあなたの人生を容易にします。そして、非同期呼び出しがそれを発行するコードよりもはるかに時間がかかるという事実を考慮すると、これらの呼び出しの間に明らかな違いがないことに気付くでしょう。
Robert Koritnik、2011年

Robert Koritnikに感謝します。$ .postと$ .getで取得します。
ロドリゲス

$.ajax必要に応じて、どこでも通話を一貫させることもできます。XHRを直接使用しない限り、どちらの方法でも使用できます。
Robert Koritnik、2011年

1
@RobertKoritnik IEのキャッシュの問題はどうですか?XMLHttpRequestと$ .ajax()を使用しても同じですか?
Bhargavi Gunda 2013

28

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

$ .post$ .getはの省略形です$.ajax。それらはほとんど同じことを行いますが、AJAXリクエストの作成をより速くし$.postます-HTTP POSTリクエストを$.get作成し、HTTP GETリクエストを作成します。


アップロードとダウンロードの各機能のデータ転送制限についてはどう
Rodrigues

GETクライアント/サーバー(で制限することができます-リクエストは、URL文字列内のすべてのデータ送信しますstackoverflow.com/questions/2659952/...を)。POSTリクエスト(あなたが持っていない限り、ヘッダー内のすべてのデータを送信し、そのURLのサイズ制限が問題になることはありません、本当にスクリプトに長いファイル名やフォルダ名を!)。
Jonathon Bolster、2011年

OK。要するに、より多くのデータ使用ポストを送信し、より多くのデータ使用を取得するために、そうですか?
ロドリゲス

@Rodrigues-うん、かなり:)一般に、何かを読みたいだけの場合(たとえば、Twitterからツイートのリストを取得する要求)は、を使用しますGET。何かを送信したい場合(つぶやきを投稿する場合POSTなど)、を使用してください
Jonathon Bolster

7

jQuery.get のラッパーです jQuery.ajax XMLHttpRequestのラッパーです。

XMLHttpRequestとFetch API(現時点では試験運用中)はDOMでのみ存在するため、最速のはずです。

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

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

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

使い方自体もリンクにあります。


2

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

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


XMLHttpRequestオブジェクトxmlhttp.open、send()およびresponseTextを作成するよりもjqueryを使用する利点は何ですか。
ロドリゲス

XMLHttpRequestオブジェクトのインスタンス化は、現在のブラウザに応じて1つずつ異なります。XMLHttpRequestを使用して基本的なインターフェースを提供するために、JavaScriptの維持管理に少し手を加える必要があります。すでにjQueryをお持ちの場合は、それがすべて自動的に行われます。技術的にはどちらでも同じことができるので、実際には機能ではなく、利便性の問題です。言うまでもなく、jQueryはXMLHttpRequestオブジェクトをラップするので、何か特別なことをしたい場合に備えて、それを提供します。
Neil

わかりました。Neilからの提案に感謝します... phpまたはaspxでjqueryを使用およびデバッグするために利用できるビジュアルスタジオのようなIDEはありますか。
ロドリゲス

一方がサーバー側で他方がクライアント側であるという理由だけで、javascriptとphpまたはaspxの両方をデバッグできるIDEを見つけるのは困難です。残念ながら、JavaScriptを個別にデバッグする必要があります。ただし、Firebuggetfirebug.com)は、JavaScriptの一般的なデバッグに優れていることがわかりました。コールバック関数にブレークポイントを配置すると、サーバーから与えられたすべてのステップと、JavaScriptが実行するすべてのステップが表示されます。お役に立てば幸いです。
Neil

1

古いポスト。それでも答えたいのですが、Webワーカー(JavaScript)で作業中に直面した1つの違い

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

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


0

jQueryメソッドに関する限り、.postそして内部で.get行うだけの場合.ajax、その目的は、の不要なオプションの一部を抽象化.ajaxし、それぞれのタイプの要求に適切なデフォルトを提供することです。

3つのいずれかの間でパフォーマンスに大きな違いがあるとは思えません。

.ajax自身のメソッドはXMLHttpRequestを、それが重くjQueryの残りごとに最適化されますんが、あなたは全体の相互作用を自分で仕立てているかのように、おそらく効率的なようではありません..しかし、それは、コードの多くを書くかの違いです書いているjQuery.ajax


jQuery.ajaxをカスタマイズすることに利点はありますか
Rodrigues

私は、速記メソッドを介してそれを使用することを意味すると思いますが、私の経験では、必要なデータを取得する方法について非常に具体的にする必要がある場合、ほとんどのデフォルトが必要な場合は、速記メソッドが役立つと思います。通常、ajaxが適しています。
Steve

スティーブに感謝します。ポストを使用して取得します。uが.ajaxのいくつかの例を提供する場合、私はいくつかの比較を行うことができます。
ロドリゲス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.