XMLHttpRequest、Fetch、$.ajaxは、具体的に何が違うのか

Question

非同期通信で、サーバー上のデータを取得する方法としてXMLHttpRequest、Fetch、$.ajaxがありますが、
この三つについて調べてみてもなかなか違いがよくわかりません。
もしかするとこの三つの中でプロトタイプオブジェクトのようにもうあまり使うべきではないものもあるかもしれないし、今は、この三つの中でこれ一択だ、なのかもしれません。
この三つの違いと今どれを使うのが適宜なのか教えてください。

Answer 1

バックグラウンドの非同期通信処理はXMLHttpRequestが基本となって、
fetchはPromiseを返すところがより扱いやすくなっています
fetchはXHRからの代替を目指していると考えてよいでしょう。
逆に新しい技術なので古いブラウザでの実働が難しいということです。
jQueryのライブラリは、ブラウザ間の誤差を埋めてくれるものなので
汎用性は高くなりますが、無駄な処理も多く総じて低速になりがちです。

Comments

[aaaaaaaa]

ご回答ありがとうございます。fetchは、そのようなお題目があったのですね。勉強になりました。

fetchが返すpromiseオブジェクトというのは、jqueryのdeferredオブジェクトから状態の変化(pending,rezolved,rejected)ができないように設定されているpromiseオブジェクトの近いものですか。
もしjqueryのpromiseと同じだとして、なぜfetchがpromiseを返り値として返すことが、XMLHttpRequestと比べて優越というか、使いやすいのでしょうか。

[yambejp]

XHRは原則非同期のバックグラウンド処理で動作するだけでしかなく
複数タスクの順列処理や並行処理などの指定は困難で
それをコントロールするのがpromiseの役目です。
最近はasync,awaitなどコールバックに依存しない処理が主流になりつつありますが
タスク自体がpromiseを返してくれるというのは非同期処理をコントロールするのに
非常に便利です。

[aaaaaaaa]

ご回答ありがとうございました。

Answer 2

XMLHttpRequest, Fetch API, jQuery.ajax

非同期通信で、サーバー上のデータを取得する方法としてXMLHttpRequest、Fetch、$.ajaxがありますが、この三つについて調べてみてもなかなか違いがよくわかりません。

APIの呼び出し方法が違うだけで、どれも同じ機能です。
機能の優劣はありませんので、自分で決めた「動作対象ブラウザ」で実装されているかだけ注意すれば、好みで選んで問題ありません。
あえていえば、jQuery.ajax はライブラリの機能なので、ビルトイン関数の方が高速に動作しますね。

class と prototype

もしかするとこの三つの中でプロトタイプオブジェクトのようにもうあまり使うべきではないものもあるかもしれないし、今は、この三つの中でこれ一択だ、なのかもしれません。

class構文はただの糖衣構文であり、Foo.prototype と書くのが非推奨なわけではありません。
Object.create() や Object.defineProperty で利用する機会はあるでしょう。
そもそも、プロトタイプチェーンの概念は依然として生きています。

Re: aaaaaaaa さん