AJAX Trainer

The technique before the API. What changes when a page updates without reloading, what the browser does with a request from JavaScript, and the full lifecycle from issue to render. Then XMLHttpRequest as the original interface — creating a request, readyState progression, status handling and reading response text.

Topics: What AJAX is, and what the name no longer means · The request lifecycle from JavaScript to server and back · Creating an XMLHttpRequest and the browser support check · readyState, status and the response event model · Sending form data with GET and POST · Reading response text and inserting it into the page · Where AJAX belongs and where a full navigation is still correct

• Assignments: (1) Build a request by hand with XMLHttpRequest and log every readyState transition; (2) Convert a full-page form submission into an in-page update
• Capstone: Deliver a dynamic form whose field validation is checked against the server without a reload

The format nearly all of this traffic is in. JSON structure and permitted types against JavaScript object literals, parsing and serialising, validating and linting a payload, rendering it into the document, and the escaping discipline that stops an API response from becoming a cross-site scripting vector.

Topics: Introduction to JSON, and JavaScript objects and arrays versus JSON · JSON structure and data types — string, number, boolean, array, object, null · JSON.stringify and JSON.parse · Loading a JSON file over AJAX and reading the response · Building markup from JSON data, and why innerHTML is risky · Validating and linting JSON, and working from a sample source · Handling missing, null and unexpected fields at the boundary · Content types and what the server actually sent

• Assignments: (1) Render a quiz or list entirely from a JSON file fetched at runtime; (2) Harden a renderer against a payload containing markup and script
• Capstone: Build a data-driven page section with validation and escaping at the parse boundary

What new code should use. The fetch function and its options, promises and async and await, the Request and Response objects, reading a body as JSON, text or blob, status handling that is not what most people assume, and cancellation with AbortController.

Topics: The fetch API and its options object · GET and POST, headers and request bodies · Promises, then chains and async and await with arrow function syntax · The Response object — ok, status, headers and body readers · Why fetch does not reject on a 404 or 500 · Uploading single and multiple files with FormData · AbortController, timeouts and cancellation · Streaming responses and progressive rendering

• Assignments: (1) Write a fetch wrapper that throws on non-2xx responses and applies a default timeout; (2) Upload files with progress feedback and handle a rejected upload
• Capstone: Produce a small typed HTTP client used by the rest of the course labs

The single largest source of AJAX support tickets. Same-origin policy and why it exists, simple against preflighted requests, the response headers that grant access, credentials and cookies, then debugging from the actual evidence in the network panel rather than by guessing or by making the policy permissive.

Topics: Same-origin policy and what it protects · Simple requests, preflight and the OPTIONS exchange · Access-Control-Allow-Origin, Headers, Methods and Credentials · Cookies, credentials mode and third-party cookie behaviour · Tokens in headers versus cookies, and CSRF implications · Reading a failed request in the DevTools network panel · Proxies and development-time workarounds, and their limits · Why a wildcard origin is not a fix

• Assignments: (1) Debug three deliberately broken cross-origin requests and state the exact cause of each; (2) Configure a server so a credentialed cross-origin request succeeds correctly
• Capstone: Document a CORS policy for a real API that is permissive enough to work and no more

The two wrappers most existing codebases use. jQuery's ajax method and shorthand calls with output into an element, Axios with instances, interceptors and defaults, an honest comparison against plain fetch, and the mapping you need when porting from one to another.

Topics: Introduction to jQuery and AJAX with jQuery · jQuery shorthand methods and outputting a response to an element · jQuery post and multi-item API calls · Introduction to Axios — get, post and response handling · Axios instances, defaults and interceptors · Looping multiple items in a response object · Error handling differences across jQuery, Axios and fetch · Choosing a library, or choosing none

• Assignments: (1) Implement the same API call three times — jQuery, Axios and fetch — and compare error behaviour; (2) Add an Axios interceptor that attaches authentication and logs failures
• Capstone: Port an Ajax module from jQuery to fetch or Axios with behaviour proven identical

Public and internal endpoints behave nothing like a tutorial. Reading API documentation, authentication schemes, query parameters, pagination and loading all pages, rate limits and backoff, error contracts, and using Postman and a local JSON server to explore and to develop without depending on a live backend.

Topics: Reading API documentation and choosing endpoints · Authentication — API keys, bearer tokens and where they must not live · Query parameters, filtering and sorting · Pagination, cursors and loading all pages · Rate limits, 429 responses and backoff · Error contracts and reading a structured error payload · Postman as an exploration and debugging tool · Setting up a local JSON server as a development database · Creating, searching and updating records against it

• Assignments: (1) Consume a paginated public API and assemble a complete dataset; (2) Stand up a local JSON server and build create, list and search interactions against it
• Capstone: Build a comments feature — list, create and search — against a local JSON database

The interaction design that turns requests into a usable interface. Loading, empty and error states, debounced search, optimistic updates and rollback, caching and revalidation, concurrent requests, and the race conditions that let a stale response overwrite a newer one.

Topics: Loading, empty and error states as first-class UI · Debouncing and throttling search-as-you-type · Optimistic updates and rolling back on failure · Client-side caching, staleness and revalidation · Concurrent requests and ordering guarantees · Race conditions and cancelling superseded requests · Infinite scroll and incremental loading · Polling, backoff and when to reach for server-sent events or WebSockets · Accessible feedback — focus management and live regions

• Assignments: (1) Build a search field that cancels superseded requests and never renders a stale result; (2) Add optimistic update and rollback to a create action
• Capstone: Deliver a list interface with search, pagination, optimistic updates and complete state handling

Making the client half of the contract defensible. Timeouts and retry with exponential backoff and jitter, idempotency for retried writes, concurrency limits, then the security posture — token handling, storage decisions, escaping responses, content security policy and the risks of trusting an API payload.

Topics: Timeouts, retry with exponential backoff and jitter · Idempotency keys and safely retrying writes · Concurrency limits and request queues · Circuit-breaking behaviour on the client · Token storage — memory, cookies and why localStorage is usually wrong · Escaping and sanitising response data before insertion · Content Security Policy and its effect on AJAX · Payload size, compression and HTTP caching headers · What must never be trusted from a response

• Assignments: (1) Add timeout, retry and a concurrency limit to a batch of unreliable calls; (2) Review an AJAX module against a security checklist and fix every finding
• Capstone: Harden a data-loading module so it degrades predictably on a throttled, failing network

How this code gets verified before it ships and watched after it does. Mocking HTTP so tests do not depend on a live API, unit and end-to-end coverage in CI, contract testing against a schema, then monitoring failed requests, measuring latency from the browser, and the performance budget the network layer has to hold.

Topics: Mocking HTTP in unit tests with a service worker or interceptor · Testing loading, error, timeout and cancellation paths deliberately · End-to-end tests with network stubbing in Playwright · Contract testing against an OpenAPI or JSON Schema definition · Running the whole suite in CI without a live backend · Client-side error reporting and failed-request monitoring · Measuring request latency and payload size from the browser · Performance budgets, preconnect and caching strategy · Detecting contract drift before release

• Assignments: (1) Write tests that cover the failure paths of an HTTP module, not just the happy path; (2) Add contract validation to CI so an API schema change fails the build
• Capstone: Deliver an AJAX feature with mocked tests, contract validation and failed-request monitoring wired in