APIs & Browser

AJAX & XMLHttpRequest

The original way to make asynchronous HTTP requests

Find videos you like?

Save to resource drawer for future reference!

What is AJAX?

AJAX (Asynchronous JavaScript And XML) is a technique for making HTTP requests without reloading the page. It uses XMLHttpRequest (XHR) to communicate with servers asynchronously, enabling dynamic content updates and better user experience.

Historical Note

While XMLHttpRequest is older technology, it's still used in legacy codebases. Modern code should usefetch() instead.

How XMLHttpRequest Works

Understanding the XHR lifecycle

XMLHttpRequest goes through several states during a request:

Ready States

UNSENT - XHR created, not opened yet

OPENED - open() called

HEADERS_RECEIVED - send() called, headers received

LOADING - Downloading response data

DONE - Operation complete ✅

Basic GET Request

Making a simple request with XHR

Step-by-Step GET Request

// 1. Create XMLHttpRequest object
const xhr = new XMLHttpRequest();

// 2. Configure: GET request to URL
xhr.open('GET', 'https://api.example.com/data');

// 3. Set up callback for when response arrives
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('Error:', xhr.status);
  }
};

// 4. Handle network errors
xhr.onerror = function() {
  console.error('Network error');
};

// 5. Send the request
xhr.send();

Explanation:

• open() - Configure method and URL
• onload - Fires when request completes successfully
• onerror - Fires on network errors
• send() - Initiates the request

POST Request with Data

Sending data to the server

Sending JSON Data

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/users');

// Set Content-Type header for JSON
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status === 201) {
    console.log('Created:', JSON.parse(xhr.responseText));
  }
};

// Send JSON data
const data = { name: 'John', email: 'john@example.com' };
xhr.send(JSON.stringify(data));

Sending Form Data

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/upload');

const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('file', fileInput.files[0]);

// No need to set Content-Type - automatically set for FormData
xhr.send(formData);

Note: When sending FormData, don't set Content-Type header - the browser sets it automatically with the correct boundary.

Event Handlers & Monitoring Progress

Tracking request progress and handling events

Common Event Handlers

onload - Request completed
onerror - Network error
onabort - Request aborted
ontimeout - Request timed out
onprogress - Progress updates

Response Properties

status - HTTP status code
statusText - Status message
responseText - Response as text
responseXML - Response as XML
readyState - Current state

Upload Progress Tracking

const xhr = new XMLHttpRequest();

// Track upload progress
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`Upload: ${percentComplete.toFixed(2)}%`);
  }
};

// Track download progress
xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`Download: ${percentComplete.toFixed(2)}%`);
  }
};

Advanced Features

Timeouts, aborting, and request configuration

Setting Timeout

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');

// Set timeout to 5 seconds
xhr.timeout = 5000;

xhr.ontimeout = function() {
  console.error('Request timed out');
};

xhr.send();

Aborting a Request

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');

xhr.onabort = function() {
  console.log('Request aborted');
};

xhr.send();

// Cancel the request
xhr.abort();

Custom Headers & Authentication

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');

// Set custom headers
xhr.setRequestHeader('Authorization', 'Bearer token123');
xhr.setRequestHeader('X-Custom-Header', 'value');

// Send credentials (cookies)
xhr.withCredentials = true;

xhr.send();

Fetch API vs XMLHttpRequest

Understanding the differences

Feature	XMLHttpRequest	Fetch API
Promise-based	No (callbacks)	Yes ✅
Async/Await support	No	Yes ✅
Syntax	Verbose	Clean ✅
Progress events	Yes ✅	Limited
Browser support	All browsers ✅	Modern browsers ✅
Recommended	Legacy only	Yes ✅

Migration Tip

For new projects, always use Fetch API. Only use XMLHttpRequest when maintaining legacy code or when you need upload progress tracking.

Complete Example: Weather Widget with Progress Tracking

XMLHttpRequest with upload/download progress monitoring

JavaScript Code

XHR

function fetchWeatherData(city) {
  const xhr = new XMLHttpRequest();
  const statusDiv = document.getElementById('status');
  const weatherDiv = document.getElementById('weather');
  
  // Configure request
  xhr.open('GET', 
    `https://api.weather.com/data?city=${city}`, 
    true
  );
  
  // Track upload progress
  xhr.upload.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
      const percent = (e.loaded / e.total) * 100;
      statusDiv.innerHTML = 
        `Uploading: ${percent.toFixed(0)}%`;
    }
  });
  
  // Track download progress
  xhr.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
      const percent = (e.loaded / e.total) * 100;
      statusDiv.innerHTML = 
        `Loading: ${percent.toFixed(0)}%`;
    }
  });
  
  // Handle response
  xhr.onload = function() {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      weatherDiv.innerHTML = `
        <div class="weather-card">
          <h2>${data.city}</h2>
          <p>Temperature: ${data.temp}°C</p>
          <p>Condition: ${data.condition}</p>
        </div>
      `;
      statusDiv.innerHTML = 'Loaded!';
    } else {
      weatherDiv.innerHTML = `Error: ${xhr.status}`;
    }
  };
  
  // Handle errors
  xhr.onerror = function() {
    weatherDiv.innerHTML = 'Network error occurred';
  };
  
  // Send request
  xhr.send();
}

// Call the function
fetchWeatherData('London');

Expected Output

Success

📤 Status: Uploading: 45%

📥 Status: Loading: 78%

✓ Status: Loaded!

London

Temperature: 18°C

Condition: Partly Cloudy

❌ Error state (if API fails):

"Error: 404" or "Network error occurred"

What This Shows

✅ Progress tracking (upload/download)

✅ Multiple event handlers

✅ Success rendering

✅ Error handling

Key Takeaways

Legacy API

Older, callback-based approach

Progress Tracking

Good for upload/download progress

Ready States

0-4 states tracking request lifecycle

Use Fetch Instead

Modern alternative for new code

Previous Topic

Fetch API

Modern HTTP requests with fetch, handling JSON, and error management.

Next Topic

Working with REST APIs

Consuming RESTful APIs with JavaScript.

Ask a Question

Have a question about AJAX & XMLHttpRequest? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

APIs & Browser

AJAX & XMLHttpRequest

The original way to make asynchronous HTTP requests

Find videos you like?

Save to resource drawer for future reference!

What is AJAX?

Historical Note

While XMLHttpRequest is older technology, it's still used in legacy codebases. Modern code should usefetch() instead.

How XMLHttpRequest Works

Understanding the XHR lifecycle

XMLHttpRequest goes through several states during a request:

Ready States

UNSENT - XHR created, not opened yet

OPENED - open() called

HEADERS_RECEIVED - send() called, headers received

LOADING - Downloading response data

DONE - Operation complete ✅

Basic GET Request

Making a simple request with XHR

Step-by-Step GET Request

// 1. Create XMLHttpRequest object
const xhr = new XMLHttpRequest();

// 2. Configure: GET request to URL
xhr.open('GET', 'https://api.example.com/data');

// 3. Set up callback for when response arrives
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('Error:', xhr.status);
  }
};

// 4. Handle network errors
xhr.onerror = function() {
  console.error('Network error');
};

// 5. Send the request
xhr.send();

Explanation:

• open() - Configure method and URL
• onload - Fires when request completes successfully
• onerror - Fires on network errors
• send() - Initiates the request

POST Request with Data

Sending data to the server

Sending JSON Data

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/users');

// Set Content-Type header for JSON
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status === 201) {
    console.log('Created:', JSON.parse(xhr.responseText));
  }
};

// Send JSON data
const data = { name: 'John', email: 'john@example.com' };
xhr.send(JSON.stringify(data));

Sending Form Data

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/upload');

const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('file', fileInput.files[0]);

// No need to set Content-Type - automatically set for FormData
xhr.send(formData);

Note: When sending FormData, don't set Content-Type header - the browser sets it automatically with the correct boundary.

Event Handlers & Monitoring Progress

Tracking request progress and handling events

Common Event Handlers

onload - Request completed
onerror - Network error
onabort - Request aborted
ontimeout - Request timed out
onprogress - Progress updates

Response Properties

status - HTTP status code
statusText - Status message
responseText - Response as text
responseXML - Response as XML
readyState - Current state

Upload Progress Tracking

const xhr = new XMLHttpRequest();

// Track upload progress
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`Upload: ${percentComplete.toFixed(2)}%`);
  }
};

// Track download progress
xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`Download: ${percentComplete.toFixed(2)}%`);
  }
};

Advanced Features

Timeouts, aborting, and request configuration

Setting Timeout

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');

// Set timeout to 5 seconds
xhr.timeout = 5000;

xhr.ontimeout = function() {
  console.error('Request timed out');
};

xhr.send();

Aborting a Request

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');

xhr.onabort = function() {
  console.log('Request aborted');
};

xhr.send();

// Cancel the request
xhr.abort();

Custom Headers & Authentication

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');

// Set custom headers
xhr.setRequestHeader('Authorization', 'Bearer token123');
xhr.setRequestHeader('X-Custom-Header', 'value');

// Send credentials (cookies)
xhr.withCredentials = true;

xhr.send();

Fetch API vs XMLHttpRequest

Understanding the differences

Feature	XMLHttpRequest	Fetch API
Promise-based	No (callbacks)	Yes ✅
Async/Await support	No	Yes ✅
Syntax	Verbose	Clean ✅
Progress events	Yes ✅	Limited
Browser support	All browsers ✅	Modern browsers ✅
Recommended	Legacy only	Yes ✅

Migration Tip

For new projects, always use Fetch API. Only use XMLHttpRequest when maintaining legacy code or when you need upload progress tracking.

Complete Example: Weather Widget with Progress Tracking

XMLHttpRequest with upload/download progress monitoring

JavaScript Code

XHR

function fetchWeatherData(city) {
  const xhr = new XMLHttpRequest();
  const statusDiv = document.getElementById('status');
  const weatherDiv = document.getElementById('weather');
  
  // Configure request
  xhr.open('GET', 
    `https://api.weather.com/data?city=${city}`, 
    true
  );
  
  // Track upload progress
  xhr.upload.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
      const percent = (e.loaded / e.total) * 100;
      statusDiv.innerHTML = 
        `Uploading: ${percent.toFixed(0)}%`;
    }
  });
  
  // Track download progress
  xhr.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
      const percent = (e.loaded / e.total) * 100;
      statusDiv.innerHTML = 
        `Loading: ${percent.toFixed(0)}%`;
    }
  });
  
  // Handle response
  xhr.onload = function() {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      weatherDiv.innerHTML = `
        <div class="weather-card">
          <h2>${data.city}</h2>
          <p>Temperature: ${data.temp}°C</p>
          <p>Condition: ${data.condition}</p>
        </div>
      `;
      statusDiv.innerHTML = 'Loaded!';
    } else {
      weatherDiv.innerHTML = `Error: ${xhr.status}`;
    }
  };
  
  // Handle errors
  xhr.onerror = function() {
    weatherDiv.innerHTML = 'Network error occurred';
  };
  
  // Send request
  xhr.send();
}

// Call the function
fetchWeatherData('London');

Expected Output

Success

📤 Status: Uploading: 45%

📥 Status: Loading: 78%

✓ Status: Loaded!

London

Temperature: 18°C

Condition: Partly Cloudy

❌ Error state (if API fails):

"Error: 404" or "Network error occurred"

What This Shows

✅ Progress tracking (upload/download)

✅ Multiple event handlers

✅ Success rendering

✅ Error handling

Key Takeaways

Legacy API

Older, callback-based approach

Progress Tracking

Good for upload/download progress

Ready States

0-4 states tracking request lifecycle

Use Fetch Instead

Modern alternative for new code

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Fetch API

Working with REST APIs

JavaScript Code Editor

Building Your Learning Module...

AJAX & XMLHttpRequest

What is AJAX?

Historical Note

Ready States

Step-by-Step GET Request

Sending JSON Data

Sending Form Data

Common Event Handlers

Response Properties

Upload Progress Tracking

Setting Timeout

Aborting a Request

Custom Headers & Authentication

Migration Tip

JavaScript Code

Expected Output

London

What This Shows

Key Takeaways

Legacy API

Progress Tracking

Ready States

Use Fetch Instead

Fetch API

Working with REST APIs

JavaScript Code Editor

AJAX & XMLHttpRequest

What is AJAX?

Historical Note

Ready States

Step-by-Step GET Request

Sending JSON Data

Sending Form Data

Common Event Handlers

Response Properties

Upload Progress Tracking

Setting Timeout

Aborting a Request

Custom Headers & Authentication

Migration Tip

JavaScript Code

Expected Output

London

What This Shows

Key Takeaways

Legacy API

Progress Tracking

Ready States

Use Fetch Instead