132

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?

SharpC
  • 5,368
  • 3
  • 37
  • 36
Rodrigues
  • 1,423
  • 2
  • 10
  • 4
  • 4
    Regarding performances (barely answered): according to [jsperf](https://jsperf.com/native-xhr-vs-jquery-ajax/3) using the regular XMLHttpRequest is much faster than going through jQuery. – Breaking not so bad Oct 24 '17 at 06:25

6 Answers6

153

  • 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.

Ithar
  • 3,186
  • 3
  • 30
  • 35
Robert Koritnik
  • 97,460
  • 50
  • 267
  • 388
  • is is there any advantage in using $.ajax() in terms of performance? – Rodrigues Jan 13 '11 at 04:33
  • 1
    @Rodrigues: not really. If you think of `$.post` and `$.get` the only thing slower is a small amount of code before `$.ajax` gets called. But if you'd write your own routines using XHR directly things could be a bit optimised but could be more buggy. I suggest you keep yourself on the jQuery side. It will make your life easier. And considering the fact that async call is taking much longer than the code issuing it you will probably notice no obvious difference between these calls. – Robert Koritnik Jan 13 '11 at 16:29
  • Thanks Robert Koritnik. so i will got with $.post and $.get. – Rodrigues Jan 14 '11 at 17:30
  • You can as well go with `$.ajax` to make your calls consistent everywhere if you want to. As long as you don't use XHR directly you're good to do it either way. – Robert Koritnik Jan 14 '11 at 17:42
  • 1
    @RobertKoritnik what about the caching issue in IE?Is it the same by using XMLHttpRequest and $.ajax()? – Bhargavi Gunda Jun 26 '13 at 10:39
  • Like the Analogy, for-dummies language and example get to the bottom right away. – Jeb50 Feb 23 '17 at 19:10
  • If ajax is just a wrapper over xmlhttprequest - i cannot figure out, why i could not make ajax post request work (i directed it to WEB API Post method and [FromBody] input parameter was always NULL). However, when i used xmlhttprequest - it was ok, picking parameters from form as expected... How parameters for ajax should look like? I've tried $(form).serialize(), but no avail... Also, success method never been called in ajax. Now i use http.send(parameters) + http.onreadystatechange and it's fired perfectly. – Alexander Jun 20 '17 at 15:55
31

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.

Jonathon Bolster
  • 15,221
  • 3
  • 39
  • 46
  • what about data transfer limit of each functions for upload and download – Rodrigues Jan 13 '11 at 04:38
  • A `GET` request will send all the data in the URL string - which can be limited by client/server (http://stackoverflow.com/questions/2659952/maximum-length-of-http-get-request). A `POST` requests sends all the data in the headers, so the URL size limit shouldn't be a problem (unless you have *really* long file and folder names to your script!). – Jonathon Bolster Jan 13 '11 at 10:20
  • ok. so in short u mean, to send more data use post and to receive more data use get, right? – Rodrigues Jan 14 '11 at 17:42
  • @Rodrigues - Yup, pretty much :) Generally if you're just looking to read something (e.g. a request to get a list of tweets from twitter) use `GET`. If you're looking to send something (e.g. posting a tweet) then use `POST`, – Jonathon Bolster Jan 14 '11 at 19:36
8

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.

Floern
  • 31,495
  • 23
  • 98
  • 115
Sirius
  • 345
  • 4
  • 13
2

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.

Neil
  • 5,651
  • 23
  • 36
  • what is the advantage of using jquery over creating an XMLHttpRequest object xmlhttp.open, send() and responseText. – Rodrigues Jan 13 '11 at 04:45
  • XMLHttpRequest object is instantiated differently according to your current browser for one thing. It would require that you lug around a little bit of javascript upkeep to provide a basic interface using XMLHttpRequest. If you already have jQuery, it does it all for you. It's really a matter of convenience, not functionality since you can technically do the same thing with either. Not to mention that since jQuery wraps XMLHttpRequest object, it means it provides it to you in case you wanted to do something particular with it. – Neil Jan 13 '11 at 09:27
  • ok.. Thank you Neil for your suggestion... is there any IDE like visual studio available for using and debugging jquery with php or aspx. – Rodrigues Jan 14 '11 at 17:56
  • It's difficult to find an IDE which lets you debug both javascript and php or aspx simply because one is serverside while the other is clientside. It means that unfortunately, you have to debug the javascript separately. However, I've found that firebug (http://getfirebug.com/) is marvelous for debugging javascript in general. Place a breakpoint in the callback function and it shows you everything you're given by the server and step by step, everything your javascript does with it. Hope that helps. – Neil Jan 18 '11 at 16:42
1

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.

Mannan Bahelim
  • 1,263
  • 1
  • 9
  • 27
0

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.

Steve
  • 5,293
  • 3
  • 30
  • 47
  • is there is any advantage in customizing jQuery.ajax – Rodrigues Jan 13 '11 at 04:49
  • I assume by that you mean using it over the shorthand methods, in my experience I find that the shorthand ones are useful if most of the defaults are what you want, if you need to be very specific about how to get the data you need .ajax is usually the way to go. – Steve Jan 13 '11 at 13:24
  • Thanks Steve. will use post and get. if u give some examples of .ajax i can do some comparison,. – Rodrigues Jan 14 '11 at 17:33