AJAX

Load data from a server without reloading the page, using $.getJSON, $.ajax and $.post.

Lesson 6 of 90% of the track complete

What you'll learn

How to request data in the background with $.getJSON and $.ajax, show it on the page, and handle success, failure and completion.

Why it matters

AJAX (Asynchronous JavaScript and XML) is what lets a page update without a full reload: search suggestions, live comments, "load more" buttons. jQuery made it a one-liner long before fetch existed, and a huge amount of existing code still uses it.

Explanation

The main helpers:

$.getJSON(url): GET a URL and parse the JSON reply.
$.get(url) and $.post(url, data): plain GET and POST.
$.ajax({ url, method, data, dataType }): the full-control version.

They return a promise-like object. You attach handlers:

.done(function (data) { ... }): runs when the request succeeds.
.fail(function () { ... }): runs when it fails.
.always(function () { ... }): runs in both cases.

The request is asynchronous: the line after $.getJSON(...) runs immediately, and the callback runs later, when the data arrives.

Example

Step-by-step walkthrough

Clicking the button sets the status to Loading... right away.
$.getJSON(url) starts the request and returns at once.
When the data arrives, .done runs. We empty the list, then loop with $.each and append an item per user.
The status becomes Loaded 2 users, and the list shows Asha from Pune and Ravi from Delhi.
If the request failed, .fail would run and show an error message instead.

Try it yourself

Click Load users in the preview. Then add a third user to the JSON and click again.

getJSONjQuery

Ctrl+Enter to run

Common mistakes

Using the result right after the call. The data is not there until .done runs.
No .fail handler, so users see nothing when it breaks.
Building HTML from untrusted data, which allows script injection. Use .text() for user content.
Cross-origin requests blocked because the server does not allow them (CORS).

Quick quiz

Question 1 of 3

Which handler runs when the request succeeds?

.done().fail().always()

Question 2 of 3

Why can you not use the data on the line after $.getJSON()?

The request is asynchronous and has not finished yetjQuery blocks itThe data is encrypted

Question 3 of 3

Which sends data to a server?

$.post(url, data)$.getJSON(url)$.each()

Summary

$.getJSON, $.get, $.post and $.ajax fetch and send data in the background.
Handle results with .done, .fail and .always.
Never use the response outside its callback.

Next: moving around the DOM and chaining commands.

HTML

<button id="load">Load users</button>
<ul id="users"></ul>
<p id="status"></p>

<script>
  const json = JSON.stringify([
    { name: "Asha", city: "Pune" },
    { name: "Ravi", city: "Delhi" },
  ]);
  const url = "data:application/json," + encodeURIComponent(json);

  $("#load").on("click", function () {
    $("#status").text("Loading...");
    $.getJSON(url)
      .done(function (users) {
        $("#users").empty();
        $.each(users, function (i, u) {
          $("#users").append("<li>" + u.name + " from " + u.city + "</li>");
        });
        $("#status").text("Loaded " + users.length + " users");
      })
      .fail(function () {
        $("#status").text("Something went wrong");
      });
  });
</script>