What’s the difference between jQuery.ajax(), jQuery.get() and jQuery.post()?

jQuery Logo

jQuery offers three Ajax calls that are simple and painless

Although it is a good idea to understand Ajax in the context of native JavaScript, leveraging the power of JavaScript libraries for your Ajax calls is not a bad idea. Depending on the size and complexity of your application, it can often minimize the amount of code you need to write in order to provide the best cross-browser experience.

Question: “What is the difference between jQuery.ajax(), jQuery.get() and jQuery.post() ?”

Answer: jQuery.get() and jQuery.post() contain features that are subsets of jQuery.ajax().

jQuery.ajax() is the method that provides the most flexibility of the three. The biggest difference from an implementation standpoint is that you pass an object to jQuery.ajax(), which contains the necessary parameters. For jQuery.get() and jQuery.post(), you pass in arguments. You might say that jQuery.get() and jQuery.post() are both shorthand for jQuery.ajax().

Important Note: Because of the “Same origin policy” enforced by all browsers, I could not make a jsfiddle example for this post. But you can copy and paste these code examples into a simple html file, and just make sure that is a file named test.txt in the same folder. Put a simple message in that text file (i.e. “hello from the text file”).

jQuery.ajax()

Example # 1

In example # 1, we use the jQuery.ajax() method. There are certainly more configurable parameters, but here we are using the bare minimum.

There is not much going on here. We pass an object into the jQuery.ajax() method. That object has four properties: “url,” “dataType,” “type,”  and “success.” Here are the details for each property:

  • url: This is the URL of the file that you want to grab via your ajax call.
  • dataType: This determines how the return data will be treated (i.e. pure text, html, XML, etc.).
  • type: This the the request type. Choose “GET” or “POST.” This is actually optional, if you omit it, jQuery will default to “GET.”
  • success: This is a callback function that is fired after a successful http request has completed. The first argument to the function is the data returned from the server. There are other arguments that can be passed in as well.

As long as you have a file named “test.txt” that has some kind of message, and it is in the same folder as your html file, the contents of that text file will appear in your JavaScript console (don’t forget to open the console! : – ). Of course, you can put that file anywhere you want, as long as it is on the same domain as the requesting file.

jQuery.get()

Example # 2

In example # 2, we use the .get() method, which is a kind of shorthand for jQuery.ajax(). When using jQuery.get(), instead of passing in an object, you pass in arguments. At minium, you’ll need the first two arguments, which are the URL of the file you want to retrieve (i.e. ‘test.txt’) and a success callback. In this example, we also passed in a third argument: ‘text,’ which told jQuery that we wanted to treat the return message as text.

The jQuery.get() method is recommended when you want to make a quick and dirty Ajax call and you are sure it will be a GET. There’s not much more to it. Short and sweet.

jQuery.post()

Example # 3

In example # 3, we used jQuery.post(). In exactly the same manner as jQuery.get(), this method is like using jQuery.ajax(), and specifying a “type” of “POST.” This method is recommended if you need to make a quick Ajax call via POST, and don’t need to make a lot of configuration decisions.

A video tutorial, explaining the difference between jQuery.ajax(), jQuery.get() and jQuery.post()

In this video I briefly explain the difference between these three AJAX utilities. I demonstrate how jQuery.get() and jQuery.post() are ver similar and jQuery.AJAX is a more generalized method that allows you to make either GET or POST AJAX requests.

What About Multiple AJAX Calls?

When you have code that depends on the mutual success of multiple Ajax calls, things can get messy. Quite often, a developer might implement an AJAX call inside the success function of another one. This can work, but what if there are a total of three AJAX calls? or even four? What you wind up with is a pattern called the “Pyramid of Doom”:

The Pyramid of Doom is a JavaScript anti-pattern that should be avoided. If you are already using jQuery, you can leverage the power of the jQuery.when() method, which can be leveraged to treat multiple AJAX calls as one asyncronous event:

To learn more  about using the jQuery.when() method to manage multiple AJAX calls in JavaScript, you can read these posts:

http://blog.kevinchisholm.com/javascript/jquery/using-jquery-deferred-to-manage-multiple-ajax-calls/

http://blog.kevinchisholm.com/javascript/jquery/using-the-jquery-promise-interface-to-avoid-the-ajax-pyramid-of-doom/

 

 

Summary

If you are wondering whether you should use jQuery.ajax(), jQuery.get() or jQuery.post(), it is really up to you. One way to approach it might be to ask yourself: “Am I writing a multi-purpose function that will be able to perform either a GET or a POST, and I do I want this function to accommodate dynamic settings such as dataType or data?” If the answer to this question is “yes,” then use jQuery.ajax(), and wrap it with your own custom function that takes an object as an argument. If you are thinking “nah, I just need to make a quick GET or POST Ajax call, then get the data, do something with it, and use jQuiery.get() or jQuery.post().

Helpful Links for jQuery.ajax(), jQuery.get() and jQuery.post()

http://api.jquery.com/jQuery.ajax/

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

http://api.jquery.com/jQuery.get/

http://api.jquery.com/jQuery.post/

What is the difference between GET and POST?

Depending on what you are trying to accomplish, GET and POST are used in different ways.

What is a GET?

In short, a GET is appended to the URL while a POST is embedded in the body of the request. Maybe from time to time, you have noticed something similar to this in your address bar: ?name=something&choice=something-else&category=something-more. This is a GET. Everything after the question mark is a query string. The page that processes this request strips out these values, parses them and acts upon them. The most notable thing here is that your request is public: it appears in the address bar of the browser.

A GET is very simple and easy to implement and parse, but it is 100% not secure. Also, each browser imposes its own limit on the length of an URL. There is no limit specified by a W3C RFC, but it is best to avoid depending on URLs that exceed 255 characters. So, there is a limit to how much data you can pass using a GET. Also you must take care in how you handle special characters. One advantage of a GET is that you could actually save the complete URL, including query string for later retrieval, or you could send that URL to a friend. At times, this can be useful.

What is a POST?

A POST is embedded in the actual body of the message. While not 100% secure, this is more secure than using a GET because the data passed does not appear in the address bar. Also, there is no limit to the amount of data passed. One downside to a POST request is that a page refresh looses the POST data and you cannot save or send a saved URL to a friend.