jQuery — AJAX

$.ajax()

The core AJAX method:

$.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.log("Error:", error);
    }
});

$.get()

$.get("https://api.example.com/users", function(data) {
    console.log(data);
});

$.post()

$.post("https://api.example.com/users", {
    name: "John",
    email: "john@example.com"
}, function(data) {
    console.log("Created:", data);
});

$.getJSON()

$.getJSON("https://api.example.com/data.json", function(data) {
    console.log(data);
});

load()

Load HTML into an element:

$("#content").load("page.html");
$("#content").load("page.html #main");

AJAX Events

$(document).ajaxStart(function() {
    $("#loading").show();
});

$(document).ajaxStop(function() {
    $("#loading").hide();
});

Error Handling

$.ajax({
    url: "/api/data",
    error: function(xhr, status, error) {
        if (status === "timeout") {
            console.log("Request timed out");
        }
    }
});

Mini Practice

1. Make a GET request to a public API
2. POST data to a server
3. Load HTML into a div
4. Show a loading indicator during requests

Up Next

Continue with Load — loading HTML content into elements.