What is the difference between XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get

How can I find out which method is best for a situation? Can anybody provide some examples to know the difference in terms of functionality and performance?

• XMLHttpRequest is the raw browser object that jQuery wraps into a more usable and simplified form and cross browser consistent functionality.

• jQuery.ajax is a general Ajax requester in jQuery that can do any type and content requests.

• jQuery.get and jQuery.post on the other hand can only issue GET and POST requests. If you don't know what these are, you should check HTTP protocol and learn a little. Internally these two functions use jQuery.ajax but they use particular settings that you don't have to set yourself thus simplifying GET or POST request compared to using jQuery.ajax. GET and POST being the most used HTTP methods anyway (compared to DELETE, PUT, HEAD or even other seldom used exotics).

All jQuery functions use XMLHttpRequest object in the background, but provide additional functionality that you don't have to do yourself.

Usage

So if you're using jQuery I strongly recommend that you use jQuery functionality only. Forget about XMLHttpRequest altogether. Use suitable jQuery request function variations and in all other cases use $.ajax(). So don't forget there are other common jQuery Ajax related functions to $.get(), $.post() and $.ajax(). Well you can just use $.ajax() for all of your request, but you will have to write a little more code, because it needs a bit more options to call it.

Analogy

It's like you would be able to buy yourself a car engine that you'd have to create a whole car around it with steering, brakes etc... Car manufacturers produce completed cars, with a friendly interface (pedals, steering wheel etc.) so you don't have to do it all yourself.

Each one of them uses XMLHttpRequest. This is what the browser uses to make the request. jQuery is just a JavaScript library and the $.ajax method is used to make a XMLHttpRequest.

$.post and $.get are just shorthand versions of $.ajax. They do pretty much the same thing but makes it quicker to write an AJAX request - $.post makes a HTTP POST request and $.get makes a HTTP GET request.

jQuery.get is a wrapper for jQuery.ajax, which is a wrapper to XMLHttpRequest.

XMLHttpRequest and Fetch API (experimental at this time) are the only in DOM, so should be the fastest.

I saw a lot of information that is not accurate anymore, so I made a test page where anyone can test version from version which one is best at any time:

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

From my tests today shows that only jQuery isn't a clean or even a fast solution, the results for me in mobile or desktop shows that jQuery are, at least, 80% slower than XHR2, if you're using too much ajax, in mobile it will be take a lot of time to load a simple site.

The usage itself is in the link too.

jQuery.post and jQuery.get simulate typical page loads, which is to say, you click on a submit button and it takes you to a new page (or reloads the same page). post and get differ slightly in the manner in which the data is sent to the server (good article about it can be found here.

jQuery.ajax and XMLHttpRequest are page loads similar to post and get, except that the page doesn't change. Whatever information the server returns can be used by javascript locally to be used in any way, including modifying the page layout. They're normally used to do asynchronous work while the user can still navigate the page. Good example of this would be autocomplete capabilities by dynamically loading from a database values to complete a text field. The fundamental difference between jQuery.ajax and XMLHttpRequest is that jQuery.ajax uses XMLHttpRequest to achieve the same effect but with a simpler interface. If you use jQuery I'd encourage you to stick with jQuery.ajax.

Old post. but still want to answer,one difference that I faced while working with Web Workers(javascript)

web workers can’t have any UI-level access. That means you can’t access any DOM elements in the JavaScript code that you intend to run using web workers.Objects such as window, document, and parent can’t be accessed in the web-worker code.

As we know jQuery library is tied to the HTML DOM, and allowing it would violate the “no DOM access” rule. This can be a little painful because methods such as jQuery.ajax, jQuery.post, jQuery.get can’t be used in web workers. Luckily, you can use the XMLHttpRequest object to make Ajax requests.

As far as the jQuery methods go, .post and .get simply do .ajax internally, their purpose is to abstract away some of the unnecessary options of .ajax and provide some defaults appropriate to that type of request respectively.

I doubt there's much difference in performance between any of the 3.

The .ajax method in itself does an XMLHttpRequest, it'll be heavily optimised as per the rest of jQuery, but it probably won't be as efficient as if you tailored the whole interaction yourself.. but that's the difference between writing lots of code or writing jQuery.ajax.