Send Ajax GET and POST requests

The answer: GET

async function getJSON(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Response status: ${response.status}`);
  }
  return response.json();
}

const item = await getJSON("https://example.test/api/items/1");
console.log(item.title);   // "hello"

fetch() starts the request and resolves to a Response as soon as the headers are in¹. The body is read by a second asynchronous call: json(), text(), blob(), formData() or arrayBuffer(), and json() throws if the body is not valid JSON². The ok property is true for a status from 200 to 299³.

The answer: POST

async function postJSON(url, payload) {
  const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload),
  });
  if (!response.ok) {
    throw new Error(`Response status: ${response.status}`);
  }
  return response.json();
}

const saved = await postJSON("https://example.test/api/items", { p1: 1, p2: "Hello World" });
console.log(saved.received.p2);   // "Hello World"

The Content-Type header tells the server the format of the body; set headers through the headers option as a plain object². To send a form the way a browser would, pass a FormData object as the body and set no Content-Type at all; the browser writes the multipart header itself. FormData, URLSearchParams, a string, a Blob and a File are all accepted body types².

<form id="signup"><input name="email" value="[email protected]"></form>

const form = document.querySelector("#signup");
const response = await fetch("https://example.test/api/signup", {
  method: "POST",
  body: new FormData(form),
});
console.log(response.status);   // 200

In jQuery

$.getJSON("https://example.test/api/items/1", function (item) {
  console.log(item.title);
});

$.post("https://example.test/api/items", { p1: 1, p2: "Hello World" }, function (saved) {
  console.log(saved.method);
});

jQuery’s $.ajax() and its shorthands guess the response type from the MIME type unless dataType says otherwise, always add the header X-Requested-With: XMLHttpRequest, and return a jqXHR object that has implemented the Promise interface since jQuery 1.5⁵.

Browser support fetch() is Baseline widely available: across browsers since March 2017¹. AbortSignal.timeout(), used below, is widely available since April 2024⁴. The 2015 version of this page used XMLHttpRequest with an ActiveXObject fallback for Internet Explorer 6; none of that is needed.

Differs from jQuery A 404 or a 500 does not reject the fetch() promise; only a badly formed URL or a network error does, so the ok check is not optional¹². Nothing is parsed for you: jQuery guesses JSON from the MIME type⁵, fetch hands you a body you read once with json()². No X-Requested-With header is sent; jQuery always adds one⁵, and a server that detects Ajax by it needs the header set in headers. A body can be read only once; call response.clone() before the first read if you need it twice².

Timeouts and cancelling

try {
  const response = await fetch("https://example.test/api/slow", { signal: AbortSignal.timeout(500) });
  console.log(response.status);
} catch (err) {
  if (err.name === "TimeoutError") console.log("gave up after 500 ms");
  else throw err;
}

AbortSignal.timeout(ms) returns a signal that aborts on its own after the given time, with a TimeoutError⁴. For a cancel button, create an AbortController, pass its signal, and call controller.abort(); the promise then rejects with an AbortError².

const controller = new AbortController();
const request = fetch("https://example.test/api/items", { signal: controller.signal });
controller.abort();
try {
  await request;
} catch (err) {
  console.log(err.name);   // "AbortError"
}

Security Never build a URL or a body from user input without encoding it: put query values through URLSearchParams and send JSON through JSON.stringify(), as above. Credentials for another origin are not sent unless you ask, and that is the right default.

Sources