Difference between $.ajax() and $.get() and $.load()
JqueryAjaxJquery Problem Overview
What is the difference between $.ajax() and $.get() and $.load()?
Which is better to use and in what conditions?
Jquery Solutions
Solution 1 - Jquery
$.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/
Solution 2 - Jquery
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 AjaxGETrequest. The returned data (which can be any data) will be passed to your callback handler. -
$(selector).load()will execute an AjaxGETrequest 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().
Solution 3 - Jquery
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.
Solution 4 - Jquery
http://api.jquery.com/jQuery.ajax/
> jQuery.ajax()
>
> Description: Perform an asynchronous HTTP (Ajax) request.
The full monty, lets you make any kind of Ajax request.
http://api.jquery.com/jQuery.get/
> jQuery.get()
>
> Description: Load data from the server using a HTTP GET request.
Only lets you make HTTP GET requests, requires a little less configuration.
> .load()
>
> Description: Load data from the server and place the returned HTML into the matched element.
Specialized to get data and inject it into an element.
Solution 5 - Jquery
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" ] } );
Solution 6 - Jquery
$.get = $.ajax({type: 'GET'});
$.load() is a helper function which only can be invoked on elements.
$.ajax() gives you most control. you can specify if you want to POST data, got more callbacks etc.
Solution 7 - Jquery
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.
Solution 8 - Jquery
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.
$(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.
Solution 9 - Jquery
Both are used to send some data and receive some response using that data.
GET: Get information stored in the server. (i.e. search, tweet, person information). If you want to send information then get request send request using process.php?name=subroto So it basically sends information through url. Url cannot handle more than 2036 char. So for blog post can you remember it is not possible?
POST: Post do same thing as GET. User registration, User login, Big data send, Blog Post. If you need to send secure information then use post or for big data as it not go through url.
AJAX: $.get() and $.post() contain features that are subsets of $.ajax(). It has more configuration.
$.get () method, which is a kind of shorthand for $.ajax(). When using $.get (), instead of passing in an object, you pass in arguments. At minimum, you’ll need the first two arguments, which are the URL of the file you want to retrieve (eg. test.txt) and a success callback.