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

Question

What’s the difference between $.ajax(), $.get() and $.load()?

Which is the best to use and under which conditions?

Answer 1

$.ajax() Serves to make asynchronous requests with any HTTP method, including GET

$.get() It’s the same as the previous one, but it’s only good for GET requests

The difference between the two above is that in the first you have to pass an additional parameter

$.load() It’s like the require/include from PHP, it will simply add the GET result to the element, use it to split the application into components and load them asynchronously

Answer 2

$.ajax is the generic function to send an AJAX request, all other functions use it behind the scenes (code);

The following function were created to facilitate programming, but they all call $.ajax (you can check in the code link of each of them).

• $.get(url [, data ] [, success ] [, dataType ]) (code). Equivalent to:

  $.ajax({
      url: url,
      data: data,
      success: success,
      dataType: dataType
  });
  

• $.post(url [, data ] [, success ] [, dataType ]) (code). Equivalent to:

  $.ajax({
      type: "POST",
      url: url,
      data: data,
      success: success,
      dataType: dataType
  });
  

• $.getJSON(url [, data ] [, success ]) (code). Equivalent to:

  $.ajax({
      url: url,
      data: data,
      success: success,
      dataType: "json"
  });
  

• $.getScript(url [, success ]) (code). Equivalent to:

  $.ajax({
      url: url,
      success: success,
      dataType: "script"
  });
  

---

• $.fn.load this function differs from the previous ones, since it is linked to a jQuery object and has a function of callback preset, which is to insert the ajax return as HTML of the element.

She calls the function $.ajax, receives an HTML and includes the received HTML in the element this function was called(code). Example:

$('body').load('https://alguma.url.com/');

It has the same effect as:

$.get('https://alguma.url.com/', function(data) {
    $('body').html(data);
})

Answer 3

The $.ajax accepts, in addition to GET, POST and PUT requests, several other options than $.get and the $.load do not have, because they are more simplified.

The $.ajax and the $.get have the same function, ie make an HTTP request, however, as said, the first can do GET, POST and PUT, while the second only GET. So if you need to, for example, do a POST or a PUT, the $.get will no longer be useful.

The $.load loads the contents of a page into a specified element in the selector:

$("#resultado").load("pagina.php");

Will replace the widget’s HTML #resultado (selector) by the content of pagina.php.

But it is also possible to use the $.load passing information via GET or POST:

Via GET (information passed directly to the URL):

$("#resultado").load("pagina.php?usuario=fulano");

Via POST (information passed via object {}):

$("#resultado").load("pagina.php", {usuario: "fulano"});

---

Determining which method to use will depend greatly on the need for your application. You should also note the jQuery version used, because some options and callbacks have become obsolete and may vary from certain versions.

It’s good to take a look at the documentation:

• $.ajax
• $.get
• $.load