Mastering AJAX: From XMLHttpRequest to CORS and JSON

Evolution of AJAX

Before AJAX, browsers fetched full HTML pages (V1.0), causing a complete page refresh. Around 1999, IE 5 introduced XMLHttpRequest , but it only gained attention after Gmail (2004) and Google Maps (2005). In 2005, Jesse James Garrett coined the term AJAX (Asynchronous JavaScript + XML), enabling partial page updates without full reloads.

XMLHttpRequest Basics

The XMLHttpRequest object enables data exchange between browser and server. Typical usage involves creating an instance, calling

open(method, URL, async)

, then

send()

. The readyState property progresses from 0 (UNSENT) to 4 (DONE), where 4 indicates a completed response.

Key properties and events:

open(method, URL, async) : method can be GET, POST, PUT, DELETE, etc.; async defaults to true.

send() : returns immediately for async requests; blocks for synchronous calls.

readyState : 0‑4 values indicate request status.

responseText : the textual response body.

onreadystatechange : callback triggered when

readyState

changes, typically handling the case when it becomes 4.

JSON as a Data Format

JSON (JavaScript Object Notation) is a lightweight, language‑independent data interchange format derived from JavaScript. It is easy for humans to read and write and for machines to parse. The global

window.JSON.parse(string)

method converts a JSON string into a JavaScript object.

Cross‑Origin Resource Sharing (CORS)

Browsers enforce the same‑origin policy (same protocol, host, and port). AJAX requests to a different origin are blocked, whereas form submissions are allowed. CORS is a W3C standard that lets servers indicate which origins may access resources.

Typical server header:

<code>response.setHeader('Access-Control-Allow-Origin', 'http://example.com')</code>

Client-side request example:

<code>request.open('GET', 'http://wushao.com:8001/xxx');</code>

Additional AJAX Knowledge

Request headers consist of four parts, and responses also have four parts; diagrams (shown below) illustrate these structures.

Typical HTTP request and response structures are also illustrated with images.

jQuery AJAX Wrapper

A simple jQuery‑style wrapper called

ajax(options)

accepts an object containing request headers, a success callback, and a failure callback. It demonstrates handling multiple arguments, promise‑like

then

chaining, and ES6 destructuring.

Example usage (simplified):

<code>ajax({
  url: '/api/data',
  method: 'GET',
  success: function(data) { console.log(data); },
  error: function(err) { console.error(err); }
});</code>

The wrapper also shows how

then

can receive two functions (success and failure) and be chained for sequential asynchronous operations.