Advanced Ajax techniques using Javascript and jQuery

January 1, 2026 by Narayan N
Advanced Ajax techniques using Javascript and jQuery

AJAX stands for Asynchronous JavaScript and XML. It is not a programming language itself, but a technique used to create fast and dynamic web pages.

The Core Concept: Normally, when a webpage needs new data from a server, the entire page has to reload. With AJAX, JavaScript communicates with the server in the background. This allows you to update specific parts of a webpage (like a news feed, a comment section, or a search result) without the user ever seeing a “loading” screen or a page refresh.

  • Asynchronous: The browser doesn’t stop waiting for the server; the user can keep interacting with the page while the data is being fetched.
  • JavaScript: The engine that handles the request and updates the HTML.
  • XML: Originally used for data, but today JSON (JavaScript Object Notation) is used almost exclusively because it is lighter and easier to use.

Basic AJAX Tutorial
In this tutorial, we will use the JSONPlaceholder API, a free service that provides fake data for testing.

1. Using Modern Vanilla JavaScript (fetch API)
The fetch API is the modern standard for making AJAX calls. It uses “Promises,” which makes the code much cleaner than older methods.

// Fetch data from a URL
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // Convert the response to JSON
})
.then(data => {
console.log(data.title); // Use the data
document.getElementById("content").innerHTML = data.body;
})
.catch(error => {
console.error('There was an error:', error);
});

2. Using jQuery AJAX
Many developers use jQuery because it simplifies the syntax and handles older browser compatibility automatically.

First, include jQuery in your HTML:



The $.ajax() Method: This is the most flexible way to write an AJAX call in jQuery.

$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
type: 'GET',
success: function(data) {
$('#content').html(data.title);
},
error: function(error) {
console.log("Error:", error);
}
});

Shorthand Methods: jQuery also provides shorter versions for simple tasks.

// Quick GET request
$.get('https://jsonplaceholder.typicode.com/posts/1', function(data) {
console.log(data);
});

// Quick POST request (Sending data)
$.post(‘https://jsonplaceholder.typicode.com/posts’, { title: ‘Hello’, body: ‘World’ }, function(response) {
console.log(‘Post created with ID:’, response.id);
});

Summary Checklist:

  1. The Trigger: Usually an event like a button click (onclick) or a page load (onload).
  2. The Request: Use fetch() (Vanilla JS) or $.ajax() (jQuery) to send a request to a URL.
  3. The Server Processing: The server (PHP, Node.js, Python) receives the request and sends back data (usually JSON).
  4. The Callback/Handling: Your JavaScript receives the data and uses DOM manipulation (like .innerHTML or .html()) to update the page.

Which one should you use?

  • Use Vanilla JS (fetch) for modern projects, React, Vue, or when you want to keep your website lightweight without external libraries.
  • Use jQuery AJAX if you are working on a legacy project or if you are already using jQuery for other UI animations and effects.