Difference between $.ajax() and $.get() and $.load

Question

What is the difference between $.ajax() and $.get() and $.load()?

Which is better to use and in what conditions?

Answer 1

Everyone explained the topic very well. There is one more point i would like add about .load() method.

As per Load document if you add suffixed selector in data url then it will not execute scripts in loading content.

Working Plunker

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html #content");
            })

On the other hand, after removing selector in url, scripts in new content will run. Try this example

after removing #content in url in index.html file

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html");
            })

There is no such in-built feature provided by other methods in discussion.

Answer 2

Everyone has it right. Functions .load, .get, and .post, are different ways of using the function .ajax.

Personally, I find the .ajax raw function very confusing, and prefer to use load, get, or post as I need it.

POST has the following structure:

$.post(target, post_data, function(response) { });

GET has the following:

$.get(target, post_data, function(response) { });

LOAD has the following:

$(*selector*).load(target, post_data, function(response) { });

As you can see, there are little differences between them, because its the situation that determines which one to use. Need to send the info to a file internally? Use .post (this would be most of the cases). Need to send the info in such a way that you could provide a link to the specific moment? Use .get. Both of them allow a callback where you can handle the response of the files.

An important note is that .load acts in two different manners. If you only provide the url of the target document, it will act as a get (and I say act because I tested checking for $_POST in the called PHP while using default .load behaviour and it detects $_POST, not $_GET; maybe it would be more precise to say it acts as .post without any arguments); however, as http://api.jquery.com/load/ says, once you provide an array of arguments to the function, it will POST the information to the file. Whatever the case is, .load function will directly insert the information into a DOM element, which in MANY cases is very legible, and very direct; but still provides a callback if you want to do something more with the response. Additionally, .load allows you to extract a certain block of code from a file, giving you the possibility to save a catalog, for example, in a html file, and retrieve pieces of it (items) directly into DOM elements.

Answer 3

Very basic but

• $.load(): Load a piece of html into a container DOM.
• $.get(): Use this if you want to make a GET call and play extensively with the response.
• $.post(): Use this if you want to make a POST call and don’t want to load the response to some container DOM.
• $.ajax(): Use this if you need to do something when XHR fails, or you need to specify ajax options (e.g. cache: true) on the fly.

Answer 4

Important note : jQuery.load() method can do not only GET but also POST requests, if data parameter is supplied (see: http://api.jquery.com/load/)

data Type: PlainObject or String A plain object or string that is sent to the server with the request.

Request Method The POST method is used if data is provided as an object; otherwise, GET is assumed.

Example: pass arrays of data to the server (POST request)
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

Answer 5

$.ajax() is the most configurable one, where you get fine grained control over HTTP headers and such. You're also able to get direct access to the XHR-object using this method. Slightly more fine-grained error-handling is also provided. Can therefore be more complicated and often unecessary, but sometimes very useful. You have to deal with the returned data yourself with a callback.

$.get() is just a shorthand for $.ajax() but abstracts some of the configurations away, setting reasonable default values for what it hides from you. Returns the data to a callback. It only allows GET-requests so is accompanied by the $.post() function for similar abstraction, only for POST

.load() is similar to $.get() but adds functionality which allows you to define where in the document the returned data is to be inserted. Therefore really only usable when the call only will result in HTML. It is called slightly differently than the other, global, calls, as it is a method tied to a particular jQuery-wrapped DOM element. Therefore, one would do: $('#divWantingContent').load(...)

It should be noted that all $.get(), $.post(), .load() are all just wrappers for $.ajax() as it's called internally.

More details in the Ajax-documentation of jQuery: http://api.jquery.com/category/ajax/

Answer 6

The methods provide different layers of abstraction.

• $.ajax() gives you full control over the Ajax request. You should use it if the other methods don't fullfil your needs.

• $.get() executes an Ajax GET request. The returned data (which can be any data) will be passed to your callback handler.

• $(selector).load() will execute an Ajax GET request and will set the content of the selected returned data (which should be either text or HTML).

It depends on the situation which method you should use. If you want to do simple stuff, there is no need to bother with $.ajax().

E.g. you won't use $.load(), if the returned data will be JSON which needs to be processed further. Here you would either use $.ajax() or $.get().