AJAX

Topics Covered

HTTP Requests

• HTTP requests have three parts: protocol (how to handle), domain (who has info), resource path (what info)
• Browsers send HTTP requests when following hyperlinks or submitting forms
• Form method: GET appends data as query parameters, POST includes data in the request body

<form method="GET" action="/signup">
    <label for="unameBox">Name:</label>
    <input type="text" name="username" id="unameBox">
    <button type="submit">Sign up!</button>
</form>
// GET submits as: /signup?username=value

AJAX

• AJAX = Asynchronous JavaScript And XML
• A technique for having JavaScript code send an HTTP request, rather than the browser
• Allows fetching data without reloading the page

XML vs JSON

• XML (EXtensible Markup Language): generalized syntax for structured content with custom tags
• JSON (JavaScript Object Notation): lighter-weight data format, standard for modern web APIs
• Legacy XMLHttpRequest object is verbose and complicated — use fetch() instead

fetch()

• fetch(url) sends an HTTP request and returns a Promise
• AJAX requests are asynchronous — the next line executes immediately without waiting for the response

fetch(url); // sends request, returns a Promise
// next line runs immediately (doesn't wait)

Promises

• A Promise is an "IOU" for data that will arrive in the future
• Use .then() with a callback to handle the fulfilled value
• response.json() parses the response body as JSON — but returns another Promise
• If .then() returns a Promise, you can chain another .then()

fetch(url)
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error.message);
    });

async/await

• ES2017 syntax for writing Promise-based code in a synchronous style
• await pauses execution until the Promise fulfills — only usable inside async functions

async function fetchData() {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
}

fetch() in React

• Use fetch() inside event handlers or effect hooks
• Assign the response data to state with the setter function to trigger a re-render

useEffect Hook

• useEffect(callback, []) runs the callback once after the component's first render
• The empty array [] as the second argument means the effect only runs once (on mount)
• Used for fetching data, setting up subscriptions, or other side effects
• Return a cleanup function from the effect to disconnect listeners when the component unmounts

import { useEffect, useState } from 'react';

function MyComponent() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(data => setData(data))
            .catch(err => console.error(err));

        // optional cleanup function
        return () => { /* disconnect listeners */ };
    }, []); // empty array = run once on mount

    return <div>{JSON.stringify(data)}</div>;
}