jQuery.ajax, the classic XMLHttpRequest (XHR), and the modern Fetch API. Understanding the differences between these methods helps you choose the right approach for your project’s performance and maintenance needs.1. jQuery.ajax()
The jQuery.ajax method was designed to simplify asynchronous requests by providing a unified API that handled cross-browser inconsistencies automatically.
Here is a typical jQuery.ajax GET request:
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
type: 'POST',
data: {
name : "Name",
email : "email@gmail.com"
},
dataType: 'json',
success: function(data) {
console.log('Data received:', data);
},
error: function(xhr, status, error) {
console.error('Request failed:', error);
}
});
Key features of jQuery.ajax:
- Automatic JSON Parsing: It automatically parses JSON responses when the expected data type is set or detected.
- Cross-Browser Compatibility: Handles legacy browser quirks out of the box.
- Built-in Error Handling: Automatically triggers the error callback for HTTP error statuses (like 404 or 500).
- Dependency Requirement: Requires the entire jQuery library to be loaded in your project.
2. XMLHttpRequest (XHR)
XMLHttpRequest (XHR) is the traditional Vanilla JavaScript API for making HTTP requests without external dependencies. It relies on event listeners to track the request lifecycle.
Here is how the same POST request looks using XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
var data = JSON.parse(xhr.responseText);
console.log('Data received:', data);
} else {
console.error('Request failed with status:', xhr.status);
}
};
xhr.onerror = function() {
console.error('Network request failed');
};
var postData = {
name: "Name",
email: "email@gmail.com"
};
var formData = new URLSearchParams(postData).toString();
xhr.send(formData);
Key features of XMLHttpRequest:
- Zero Dependencies: Native browser support with no external libraries required.
- Event-Based Architecture: Uses onload and onerror events to process responses.
- Manual Data Processing: Requires manually setting headers, encoding POST parameters, and parsing JSON responses using JSON.parse().
- Verbose Syntax: Requires significant boilerplate code for basic requests.
3. Fetch API
The Fetch API is the modern standard in Vanilla JavaScript for sending network requests. It uses Promises and provides a much cleaner, more readable syntax, especially when combined with async/await.
Here is the same POST request implemented with Fetch API:
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
name: 'Name',
email: 'email@gmail.com'
})
})
.then(function(response) {
if (!response.ok) {
throw new Error('Network response was not ok: ' + response.status);
}
return response.json();
})
.then(function(data) {
console.log('Data received:', data);
})
.catch(function(error) {
console.error('Request failed:', error);
});
Key features of Fetch API:
- Promise-Based: Fits naturally into modern asynchronous JavaScript patterns.
- Clean Syntax: Streamlined API with built-in helpers like URLSearchParams and response.json().
- HTTP Error Handling: Does not reject the Promise on HTTP status errors (like 404 or 500); you must explicitly check response.ok.
- Native Support: Supported across all modern browsers without needing external scripts.
4. Comparison Table
If you are maintaining an existing WordPress project where jQuery is already loaded by the core or theme, using $.ajax remains a practical choice. However, for new development, custom Gutenberg blocks, or lightweight plugins, switching to Fetch API reduces dependencies and keeps your codebase modern.
Be sure to check out our previous tutorials on WordPress development:
Building Custom Gutenberg Blocks Without Webpack: A Practical Dynamic Block Example
Building a Custom Widget for Elementor: Step-by-Step Guide
Developer Guide: Custom WPBakery Widgets for WordPress
If you have any questions, feel free to contact us. We’re here to help! Drop us a message with your project details, and our team will get back to you as soon as possible.
