JS AJAX

// AJAX: background request updates part of a page, no full reload
fetch("data.php")
  .then(response => response.json())
  .then(data => console.log(data)); // modern AJAX exchanges JSON, not XML

const xhr = new XMLHttpRequest();
xhr.addEventListener("load", () => console.log(xhr.responseText));
xhr.open("GET", "data.php");
xhr.send();

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => { if (xhr.readyState === 4) console.log(xhr.responseText); };
xhr.open("GET", "data.php");
xhr.send();

fetch("data.php").then(r => r.json()).then(data => console.log(data));

function search(term) {
  fetch(`search.php?term=${term}`).then(r => r.json()).then(results => console.log(results));
}
search("widgets");

fetch("data.php").then(r => r.json()).then(data => console.log(data)); // could be PHP, Node.js, Python, etc.

1. Assuming AJAX and XMLHttpRequest are obsolete and can be skipped entirely -- a significant amount of existing production code still uses XMLHttpRequest directly, especially in older libraries and frameworks.
2. Confusing AJAX (the general technique) with XMLHttpRequest (one specific, older API for implementing it) -- fetch is also a way of doing AJAX, just a newer one.
3. Writing new code with XMLHttpRequest out of habit or old tutorials, when fetch offers a cleaner, promise-based API for the same job in modern browsers.

• AJAX describes the technique of making a background HTTP request without a full page reload -- both XMLHttpRequest and fetch are ways of doing AJAX.
• XMLHttpRequest is the original browser API for AJAX, using an event-based callback style rather than promises.
• For new code, fetch() is generally preferred over XMLHttpRequest for its simpler, promise-based syntax -- but understanding XMLHttpRequest remains valuable for reading existing code.

XMLHttpRequest has been supported in every browser since the early 2000s; fetch is supported in all current browsers as the modern replacement.