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?
6 Answers
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
andjQuery.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 usejQuery.ajax
but they use particular settings that you don't have to set yourself thus simplifying GET or POST request compared to usingjQuery.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.
-
is is there any advantage in using $.ajax() in terms of performance? Commented Jan 13, 2011 at 4:33
-
2@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. Commented Jan 13, 2011 at 16:29 -
Thanks Robert Koritnik. so i will got with $.post and $.get. Commented Jan 14, 2011 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. Commented Jan 14, 2011 at 17:42 -
1@RobertKoritnik what about the caching issue in IE?Is it the same by using XMLHttpRequest and $.ajax()? Commented Jun 26, 2013 at 10:39
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.
-
what about data transfer limit of each functions for upload and download Commented Jan 13, 2011 at 4:38
-
A
GET
request will send all the data in the URL string - which can be limited by client/server (stackoverflow.com/questions/2659952/…). APOST
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!). Commented Jan 13, 2011 at 10:20 -
ok. so in short u mean, to send more data use post and to receive more data use get, right? Commented Jan 14, 2011 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 usePOST
, Commented Jan 14, 2011 at 19:36
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.
-
what is the advantage of using jquery over creating an XMLHttpRequest object xmlhttp.open, send() and responseText. Commented Jan 13, 2011 at 4:45
-
1XMLHttpRequest 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.– NeilCommented Jan 13, 2011 at 9: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. Commented Jan 14, 2011 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 (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.– NeilCommented Jan 18, 2011 at 16:42
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
.
-
-
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.– SteveCommented Jan 13, 2011 at 13:24
-
Thanks Steve. will use post and get. if u give some examples of .ajax i can do some comparison,. Commented Jan 14, 2011 at 17:33
Set-Cookie
. I experience that cookies work with jQuery.ajax, but not when I use XmlHttpRequest withxhr.withCredentials=true
.