Difference between .load() and .ajax() functions in Jquery [duplicate]

Answer 1

If you append .load() to an element, jQuery will put the contents of the ajax call in the element. It's kinda like a alias of .ajax() which returns the data for you instead of having to use a callback.

Answer 2

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

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

Answer 3

$.load puts the contents of a URL into a specific HTML element. Unlike $.ajax, it has a much more specific purpose (high-level).

$.ajax, on the other hand, is the low-level function. It accepts many more arguments, and as such, can be set to mimic the behavior of $.load, or many other high-level AJAX functions such as $.get and $.post.