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

// ─────────────────────────────────────────────────────────────
// THE OLD WAY: XMLHttpRequest — notice how noisy this is
// ─────────────────────────────────────────────────────────────
const xhr = new XMLHttpRequest();

// You must specify the method and URL before anything else
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');

// Attach a handler — this fires every time readyState changes (0 through 4)
xhr.onreadystatechange = function () {
  // readyState 4 means the request is complete
  if (xhr.readyState === 4 && xhr.status === 200) {
    const user = JSON.parse(xhr.responseText); // response is a raw string — must parse manually
    console.log('XHR result:', user.name);
  }
};

xhr.send(); // kick off the request


// ─────────────────────────────────────────────────────────────
// THE MODERN WAY: Fetch API — same result, dramatically cleaner
// ─────────────────────────────────────────────────────────────
fetch('https://jsonplaceholder.typicode.com/users/1')
  // fetch() returns a Promise that resolves to a Response object
  .then(response => response.json()) // .json() parses the body — it also returns a Promise
  .then(user => {
    console.log('Fetch result:', user.name);
  })
  .catch(error => {
    // This catches network failures (no internet, DNS error, etc.)
    console.error('Network error:', error.message);
  });

// A reusable async function that handles BOTH network failures
// AND HTTP error responses (404, 500, etc.) correctly
async function fetchUserProfile(userId) {
  try {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/users/${userId}`
    );

    // ⚠️  Critical check: fetch() does NOT throw on 404 or 500
    // response.ok is true only for status codes 200-299
    if (!response.ok) {
      // Create a real error so our catch block handles it uniformly
      throw new Error(
        `Server returned ${response.status}: ${response.statusText}`
      );
    }

    // Now we parse the JSON body — this is the second async step
    const userProfile = await response.json();

    // Destructure only the fields we care about
    const { name, email, address } = userProfile;

    return {
      name,
      email,
      city: address.city, // nested access from the API response
    };
  } catch (networkOrHttpError) {
    // This catches BOTH network errors AND our manually thrown HTTP errors
    console.error('Failed to fetch user profile:', networkOrHttpError.message);
    return null; // return null so callers can check gracefully
  }
}

// ─────────────────────────────────────────────────────────────
// Usage: run two fetches — one valid, one for a user that doesn't exist
// ─────────────────────────────────────────────────────────────
async function demonstrateFetch() {
  console.log('--- Fetching valid user (ID: 3) ---');
  const validUser = await fetchUserProfile(3);
  if (validUser) {
    console.log(`Name: ${validUser.name}`);
    console.log(`Email: ${validUser.email}`);
    console.log(`City: ${validUser.city}`);
  }

  console.log('\n--- Fetching non-existent user (ID: 9999) ---');
  const missingUser = await fetchUserProfile(9999);
  if (!missingUser) {
    console.log('User not found — showing fallback UI.');
  }
}

demonstrateFetch();

// Real-world pattern: posting a new blog article to a REST API
async function createBlogPost(title, body, authorId) {
  const newPost = {
    title: title,
    body: body,
    userId: authorId,
  };

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',                  // Tell the server we're creating a resource
      headers: {
        'Content-Type': 'application/json',  // Tell the server the body is JSON
        'Authorization': 'Bearer my-api-token-here', // Many APIs require auth
      },
      body: JSON.stringify(newPost),   // JavaScript objects MUST be serialized to a string
    });

    if (!response.ok) {
      throw new Error(`Post creation failed with status: ${response.status}`);
    }

    // The server returns the newly created post with its assigned ID
    const createdPost = await response.json();
    console.log('Post created successfully!');
    console.log('Server-assigned ID:', createdPost.id);
    console.log('Title:', createdPost.title);
    console.log('Author ID:', createdPost.userId);

    return createdPost;
  } catch (error) {
    console.error('Could not create post:', error.message);
    return null;
  }
}

// Simulating a form submission handler
async function handleFormSubmit(event) {
  // In a browser, you'd call event.preventDefault() here to stop page reload
  // event.preventDefault();

  const submitButton = { disabled: true };  // In real DOM: document.querySelector('button')
  submitButton.disabled = true;             // Prevent double-submissions while waiting

  const result = await createBlogPost(
    'Why JavaScript Async/Await Changed Everything',
    'Before async/await, chaining promises was the gold standard...',
    42
  );

  submitButton.disabled = false;            // Re-enable after response arrives

  if (result) {
    console.log(`\nRedirecting to post #${result.id}...`);
  }
}

handleFormSubmit();

// ─────────────────────────────────────────────────────────────
// Mini-app: Fetch blog posts and render them into the DOM
// In a browser, this runs after the HTML has loaded
// ─────────────────────────────────────────────────────────────

// ── DATA LAYER: handles fetching only, no DOM touches here ──
async function fetchLatestPosts(limit = 5) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_limit=${limit}`
  );

  if (!response.ok) {
    throw new Error(`API error: ${response.status}`);
  }

  return response.json(); // returns a Promise<Array>
}

// ── RENDER LAYER: handles DOM only, no fetch logic here ──
function renderPosts(posts, containerElement) {
  // Build all HTML as a string for a single DOM write (better performance than
  // appending elements one-by-one in a loop)
  const postListHTML = posts
    .map(
      post => `
      <article class="post-card">
        <h3>${escapeHtml(post.title)}</h3>
        <p>${escapeHtml(post.body)}</p>
        <small>Post #${post.id}</small>
      </article>
    `
    )
    .join('');

  containerElement.innerHTML = postListHTML;
}

// Prevent XSS: never inject user/API data into innerHTML without escaping it
function escapeHtml(unsafeString) {
  return unsafeString
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

// ── CONTROLLER: orchestrates loading state, fetching, and rendering ──
async function initPostList() {
  // In a real browser app these would be actual DOM elements:
  // const container = document.getElementById('post-list');
  // const loadingSpinner = document.getElementById('loading');
  // Simulating with plain objects here so this runs in Node.js too
  const container = { innerHTML: '' };
  const loadingSpinner = { hidden: false };

  // Step 1: Show the loading state immediately
  loadingSpinner.hidden = false;
  console.log('[UI] Showing loading spinner...');

  try {
    // Step 2: Go get the data
    const posts = await fetchLatestPosts(3);
    console.log(`[Data] Received ${posts.length} posts from API`);

    // Step 3: Render data into the DOM
    renderPosts(posts, container);
    console.log('[UI] Posts rendered to DOM');
    console.log('[Preview] First post title:', posts[0].title);
  } catch (error) {
    // Step 4: If anything went wrong, show an error state — never a blank screen
    container.innerHTML = `<p class="error">Failed to load posts: ${error.message}</p>`;
    console.error('[UI] Displayed error message to user:', error.message);
  } finally {
    // Step 5: Always hide the spinner — whether success or failure
    loadingSpinner.hidden = true;
    console.log('[UI] Spinner hidden');
  }
}

initPostList();