AJAX Request (Asynchronous JavaScript and XML)

  • The name is historical, but is often used with JSON/HTML instead of XML.

  • AJAX request is essentially an HTTP request , but with a specific context and behavior.

  • AJAX is not a new protocol; it’s a technique to send HTTP requests asynchronously and handle responses in JS without full page reload.

  • Modern AJAX is usually done with fetch()  or libraries like Axios.

  • HTMX uses AJAX under the hood when it issues hx-get , hx-post , etc., but wraps it in HTML declaratives.

  • Pros :

    • Asynchronous → page stays responsive.

    • Fetch only needed data → reduces bandwidth compared to full reloads.

    • Enables SPA-style apps and partial updates.

  • Cons :

    • Caching: AJAX responses may bypass browser caching unless managed.

    • Error handling: Must handle network errors manually; normal navigation leaves error pages to the browser.

    • SEO: Search engines may not execute JS; AJAX-loaded content can be invisible unless server-side rendering is used.

    • History / bookmarking: AJAX alone doesn’t update URL; need pushState  for proper navigation.

    • Browser support: Modern browsers fully support fetch/XHR; very old browsers may not.

  • AJAX is safe and standard in modern browsers, but it does not magically solve rendering, routing, or SEO problems.

  • It’s a tool for asynchronous HTTP and DOM updates.

Which type of Request is being made? HTTP or AJAX

  • HTTP Request :

    • Is triggered by a standard link or form submission.

    • Dev Tools -> Network tab: Requests labeled Document  are normal page navigation.

  • AJAX Request :

    • Is triggered by JavaScript ( fetch() , XMLHttpRequest , HTMX, Axios, jQuery.ajax).

    • Dev Tools -> Network tab: Requests labeled XHR / Fetch  are AJAX.

AJAX and SPAs

  • AJAX is in large part the core of SPA apps.

  • SPAs rely on:

    • AJAX requests  to fetch new data or HTML fragments.

    • Client-side routing  to change the view without reloading the page.

    • DOM updates  handled by JS frameworks (React, Vue, etc.) rather than the browser’s default page reload.

  • AJAX is the mechanism SPAs use to asynchronously fetch server data. Without it, a SPA can’t update content dynamically without a full reload.

AJAX and URLs

  • Changing the URL is separate  from AJAX.

  • SPAs often use history.pushState()  to update the URL without reloading.

  • You can make an AJAX request that changes the DOM but does not  change the URL.

  • You can also do a normal navigation that doesn’t fully reload if the server returns the same HTML (rare).

  • The DOM update  is the true technical difference; URL is mostly a UX/consistency concern.

Usage of AJAX

  • Any framework doing partial DOM updates without full reload uses AJAX.

  • See JavaScript  for information on how frameworks and libraries interact with AJAX.

Normal HTTP Request vs AJAX Request

  • The key distinction  is whether the browser fully reloads the DOM.

Normal HTTP request

  • Browser navigates to a new page.

  • Full page reload → all DOM replaced, browser re-parses HTML.

  • Ex1 : 

    <form action="/data" method="GET">
  <input name="q">
  <button type="submit">Search</button>
</form>

    • Clicking the button navigates to /data?q=... .

    • Whole page reloads.

AJAX request (fetch)

  • Browser stays on the current page and handles the response via JS.

  • Partial DOM update → only certain elements replaced via JS.

  • Ex1 : 

    const res = await fetch("/data?q=test");
const html = await res.text();
document.getElementById("result").innerHTML = html;

    • Sends GET to /data?q=test .

    • Page does not reload .

    • Only updates #result  div.