Fetch API and AJAX in JavaScript: How to Load Data Without Reloading the Page

/**
 * io.thecodeforge: Comparing Legacy XHR vs Modern Fetch
 *
 * Both examples fetch the same user from the same endpoint.
 * Compare the error handling surface area — XHR requires
 * manual readyState + status checks in every callback.
 * Fetch centralizes the check with response.ok.
 */

// ─── THE OLD WAY: XMLHttpRequest ─────────────────────────────────────────────
// Verbose, event-driven, impossible to compose with Promise.all or async/await
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');

xhr.onreadystatechange = function () {
  // readyState 4 = DONE, status 200 = OK
  // You must check both — readyState 4 includes error states
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      const user = JSON.parse(xhr.responseText);
      console.log('XHR result:', user.name);
    } else {
      // HTTP errors require manual status checking here
      console.error('XHR HTTP error:', xhr.status, xhr.statusText);
    }
  }
};

xhr.onerror = function () {
  // Network error — separate handler required
  console.error('XHR network error — no connection to server');
};

xhr.send();

// ─── THE MODERN WAY: Fetch API ────────────────────────────────────────────────
// Promise-based, composable with async/await, AbortController, Promise.all
async function fetchUser(userId) {
  try {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/users/${userId}`
    );

    // response.ok is true for 200-299 only
    // fetch() does NOT throw on 404 or 500 — you must check
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    // Body parsing is also async — always await
    const user = await response.json();
    console.log('Fetch result:', user.name);
    return user;
  } catch (error) {
    // Catches both network errors AND the manual throw above
    console.error('Fetch error:', error.message);
    return null;
  }
}

fetchUser(1);

/**
 * io.thecodeforge: Production-grade Fetch wrapper pattern
 *
 * This wrapper centralizes four concerns that should never
 * be scattered across individual call sites:
 * 1. response.ok check (HTTP error detection)
 * 2. Body parsing (always async)
 * 3. Error logging (route to monitoring service)
 * 4. Request timeout (AbortController + setTimeout)
 */

const DEFAULT_TIMEOUT_MS = 10_000; // 10 seconds

/**
 * Centralized fetch wrapper.
 * Use this instead of raw fetch() throughout the application.
 * Throws on both network errors and HTTP errors.
 */
async function apiFetch(url, options = {}) {
  const controller = new AbortController();
  const timeoutId = setTimeout(
    () => controller.abort(),
    options.timeout ?? DEFAULT_TIMEOUT_MS
  );

  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal,
    });

    // CRITICAL: fetch() does NOT throw on 404/500/503
    // response.ok is true for status codes 200-299 only
    if (!response.ok) {
      // Read the error body for additional context
      // response.text() avoids a double-parse failure if body is not valid JSON
      const errorBody = await response.text();
      const error = new Error(
        `HTTP ${response.status}: ${response.statusText}`
      );
      error.status = response.status;
      error.body = errorBody;
      throw error;
    }

    // Body parsing is the second async step — the stream must be read
    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      // Could be our timeout or an external abort signal
      throw new Error(`Request timed out after ${options.timeout ?? DEFAULT_TIMEOUT_MS}ms`);
    }
    // Re-throw with context — let the caller decide how to handle
    throw error;
  } finally {
    clearTimeout(timeoutId);
  }
}

/**
 * Application-level function using the wrapper.
 * Business logic is clean — no fetch internals visible here.
 */
async function fetchUserProfile(userId) {
  try {
    const user = await apiFetch(
      `https://jsonplaceholder.typicode.com/users/${userId}`
    );
    return {
      name: user.name,
      email: user.email,
      city: user.address.city,
    };
  } catch (error) {
    // error.status is available for HTTP errors from apiFetch
    console.error(
      `[fetchUserProfile] Failed for userId=${userId}:`,
      error.message
    );
    // In production: report to Sentry or Datadog here
    return null;
  }
}

fetchUserProfile(1).then(data => console.log(data));

/**
 * io.thecodeforge: POST request with full production safety
 *
 * Three things this example enforces that most tutorials omit:
 * 1. Content-Type header — required, not auto-set by Fetch
 * 2. response.ok check — POST can return 400/422/500 silently
 * 3. Double-submission prevention — button disabled during in-flight request
 */

async function createBlogPost(postData, submitButton = null) {
  // Prevent double-submission: disable button before the request starts
  if (submitButton) submitButton.disabled = true;

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        // Required — Fetch does NOT auto-set this like Axios does
        // Without it: server returns 400 Bad Request or 415 Unsupported Media Type
        'Content-Type': 'application/json',

        // Authorization header — replace with your actual token mechanism
        // In production: read from a token store, not a hardcoded string
        'Authorization': `Bearer ${getAuthToken()}`,
      },
      // body must be a string — passing a raw object sends '[object Object]'
      body: JSON.stringify(postData),
    });

    // POST requests can return 400/422/500 — check.ok here too
    if (!response.ok) {
      // Attempt to read server error body for better error messages
      let serverMessage = response.statusText;
      try {
        const errorData = await response.json();
        serverMessage = errorData.message ?? errorData.error ?? serverMessage;
      } catch {
        // Server returned non-JSON error body — use statusText
      }
      throw new Error(`Failed to create post: HTTP ${response.status} — ${serverMessage}`);
    }

    const result = await response.json();
    console.log('Resource created with ID:', result.id);
    return result;
  } catch (error) {
    console.error('[createBlogPost] POST error:', error.message);
    // In production: report to Sentry with postData context (redact PII first)
    return null;
  } finally {
    // Re-enable in finally — not try — so it re-enables on both success and failure
    if (submitButton) submitButton.disabled = false;
  }
}

function getAuthToken() {
  // In production: read from secure storage, not a hardcoded literal
  return sessionStorage.getItem('auth_token') ?? '';
}

// Usage — pass the button reference for double-submission prevention
const submitBtn = document.querySelector('#submit-post');
createPostButton.addEventListener('click', () => {
  createBlogPost(
    { title: 'Async JS in 2026', body: 'Fetch is the baseline.', userId: 1 },
    submitBtn
  );
});

/**
 * io.thecodeforge: Three-layer fetch + DOM pattern
 *
 * Data Layer:   fetchPosts() — knows how to talk to the API
 * Render Layer: renderPosts() — knows how to update the DOM
 * Controller:   initApp() — orchestrates them, manages UI state
 *
 * Each layer is independently testable.
 * fetchPosts can be tested with a mocked fetch.
 * renderPosts can be tested with sample data and a real DOM node.
 * initApp integration test uses both.
 */

// ─── DATA LAYER ───────────────────────────────────────────────────────────────
async function fetchPosts(limit = 3) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_limit=${limit}`
  );
  if (!response.ok) {
    throw new Error(`Failed to load posts: HTTP ${response.status}`);
  }
  return response.json();
}

// ─── RENDER LAYER ────────────────────────────────────────────────────────────
function renderPosts(posts, container) {
  if (!posts.length) {
    container.innerHTML = '<p class="empty-state">No posts available.</p>';
    return;
  }
  // Template literals — sanitize user-generated content in production
  // Use DOMPurify or textContent assignment for untrusted data
  container.innerHTML = posts
    .map(
      post => `
        <article class="card" data-post-id="${post.id}">
          <h4 class="card__title">${post.title}</h4>
          <p class="card__body">${post.body}</p>
          <footer class="card__meta">Post #${post.id}</footer>
        </article>
      `
    )
    .join('');
}

function renderError(message, container) {
  container.innerHTML = `
    <div class="error-state" role="alert">
      <p>⚠ ${message}</p>
      <button onclick="initApp()">Retry</button>
    </div>
  `;
}

function setLoadingState(isLoading, container, spinner) {
  // Spinner and container managed separately for accessibility
  spinner.hidden = !isLoading;
  spinner.setAttribute('aria-busy', String(isLoading));
  if (isLoading) container.innerHTML = '';
}

// ─── CONTROLLER ───────────────────────────────────────────────────────────────
async function initApp() {
  // In a real browser environment:
  // const container = document.getElementById('post-list');
  // const spinner   = document.getElementById('spinner');
  // const timestamp = document.getElementById('last-updated');

  // Simulated DOM nodes for demonstration
  const container = { innerHTML: '', setAttribute: () => {} };
  const spinner   = { hidden: false, setAttribute: () => {} };

  setLoadingState(true, container, spinner);

  try {
    const posts = await fetchPosts(3);
    renderPosts(posts, container);

    // Show last-updated timestamp — lets users detect stale data
    // timestamp.textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
    console.log('[App] Posts loaded at', new Date().toLocaleTimeString());
  } catch (error) {
    renderError(error.message, container);
    console.error('[App] Failed to load posts:', error.message);
    // In production: report to Sentry with request context
  } finally {
    // CRITICAL: always in finally — not try
    // A failed request must hide the spinner too
    setLoadingState(false, container, spinner);
  }
}

initApp();

// ─── PARALLEL FETCH PATTERN ───────────────────────────────────────────────────
// When a page needs multiple independent data sources on load,
// use Promise.all — not sequential awaits.
//
// Sequential (slow — total time = sum of all requests):
// const users    = await fetchUsers();
// const posts    = await fetchPosts();
// const comments = await fetchComments();
//
// Parallel (fast — total time = slowest single request):
async function initDashboard() {
  try {
    const [users, posts, comments] = await Promise.all([
      fetch('https://jsonplaceholder.typicode.com/users?_limit=5').then(r => {
        if (!r.ok) throw new Error(`Users: HTTP ${r.status}`);
        return r.json();
      }),
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=5').then(r => {
        if (!r.ok) throw new Error(`Posts: HTTP ${r.status}`);
        return r.json();
      }),
      fetch('https://jsonplaceholder.typicode.com/comments?_limit=5').then(r => {
        if (!r.ok) throw new Error(`Comments: HTTP ${r.status}`);
        return r.json();
      }),
    ]);

    console.log('Dashboard data loaded:', {
      users: users.length,
      posts: posts.length,
      comments: comments.length,
    });
  } catch (error) {
    // Promise.all rejects on the first failure
    // Use Promise.allSettled() if you want partial success
    console.error('[Dashboard] Parallel fetch failed:', error.message);
  }
}

initDashboard();