AJAX and JSON
AJAX (Asynchronous JavaScript And XML) is a set of browser technologies that let web pages exchange data with a server without reloading. Despite the name, modern AJAX usually transports JSON rather than XML. AJAX enabled the shift from server-rendered pages to interactive single-page applications.
Why AJAX?
Traditional web pages refresh entirely on every action. AJAX lets a page fetch only the small piece of data it needs, update the DOM, and keep other elements untouched. This dramatically improves responsiveness for autocomplete, infinite scroll, form validation, and live dashboards.
XMLHttpRequest
The XMLHttpRequest object was the original AJAX API. Its interface is based on callbacks with readystatechange events. While still supported, it is verbose and has been superseded by the Fetch API in most new code.
The Fetch API
The modern Fetch API returns promises and has cleaner syntax: fetch('/api/users').then(r => r.json()).then(data => ...). Options object controls method, headers, body, credentials, mode, and cache. async/await syntax makes sequential asynchronous code read almost like synchronous code.
JSON Data Format
JSON (JavaScript Object Notation) is a lightweight, human-readable data format with strings, numbers, booleans, arrays, objects, and null. JavaScript's JSON.stringify and JSON.parse convert between strings and objects. PHP's json_encode and json_decode do the same. JSON has displaced XML for most web APIs.
Server-Side JSON Endpoints
A PHP endpoint for AJAX sets the correct header and echoes JSON: header('Content-Type: application/json'); echo json_encode($data);. It should set an appropriate HTTP status (200 OK, 201 Created, 400 Bad Request, 404 Not Found, 500 Server Error) so the client can react.
CORS
Cross-Origin Resource Sharing (CORS) governs which origins may call an API. The server sets Access-Control-Allow-Origin and related headers. Misconfiguration causes requests to fail silently or exposes APIs to attack. Preflight OPTIONS requests precede non-simple requests.
Error Handling
Fetch rejects only on network failure, not on HTTP errors like 404 or 500. Always check response.ok and throw where appropriate. Provide user-friendly feedback and retry logic for transient errors. Log server errors for debugging.
Security Concerns
AJAX endpoints are full-fledged APIs and must authenticate, authorize, and validate every request. Rate limiting and CSRF tokens apply. Never trust request data. Avoid leaking sensitive information in error messages.
Long Polling, SSE, and WebSockets
AJAX is request–response. For real-time data, long polling, Server-Sent Events (SSE), and WebSockets provide push-style updates. WebSockets support bidirectional binary and text messages over a single TCP connection, used for chat, games, and collaborative editing.
Summary
AJAX transformed the web into an application platform. Modern development uses Fetch with JSON, handles CORS, and adopts WebSockets for real-time features. Understanding these APIs is required for building responsive user interfaces.