How to make AJAX calls with JavaScript

Creating dynamic, responsive web applications often requires exchanging data with a server. AJAX (Asynchronous JavaScript and XML) is a powerful technique for achieving this, enabling asynchronous communication without reloading the page.

In this guide, I’ll walk you through making AJAX calls with JavaScript using the XMLHttpRequest (XHR) object and the newer Fetch API.

Mastering these methods will allow you to send HTTP requests, handle server responses, and work with data formats like JSON (JavaScript Object Notation).

By the end, you’ll be equipped to enhance your web applications with AJAX, making them more interactive and user-friendly.

Benefits of Using Ajax

Improved User Experience

Asynchronous communication with the server

Ajax allows for asynchronous communication with the server, which means your web page can send and receive data in the background without interrupting what the user is doing. This eliminates the need for full page reloads and keeps your application responsive, providing a seamless user experience.

Updating web pages without reloading

One of the major advantages of using Ajax is the ability to update parts of a web page without requiring a full reload. This can vastly improve load times and make your web application feel more dynamic. For example, content can be fetched and updated on the fly, making the interaction smoother and faster.

Enhanced interactivity and responsiveness

With Ajax, the user experience becomes much more interactive and responsive. For instance, when a user submits a form or clicks a button, they get immediate feedback instead of waiting for the entire page to reload. This leads to improved user satisfaction and engagement, as the interface feels more like a native application.

Common Uses of Ajax

Form submissions without page reloads

Ajax is commonly used for form submissions. Instead of causing a full page refresh, the form data is sent to the server asynchronously. This is particularly useful for processes like user registrations, login forms, and feedback sections, where you want to confirm the action quickly without taking the user away from the current page.

Autocomplete features

Autocomplete is a feature that benefits immensely from Ajax. As users begin to type into a search box, Ajax can send queries to the server and display suggestions without reloading the page. This makes searching faster and more intuitive.

Live content updates (e.g., chat applications, voting, rating)

Real-time applications, such as chat applications, voting systems, and rating functionalities, rely heavily on Ajax for live updates. Ajax enables these features to refresh the content dynamically, keeping it live and updated without the need for manual refreshing of the web pages. This provides a richer and more engaging user experience.

Core Concepts of Ajax

Asynchronous Communication

Definition and importance of asynchronous communication

Asynchronous communication means that the client can send a request to the server and continue executing other tasks while waiting for the server’s response. This is crucial for creating a smooth, seamless user experience, as it allows the web page to remain interactive and responsive.

Differences between synchronous and asynchronous requests

Synchronous requests block the execution of code until the server responds, which can freeze the user interface and create a poor experience. In contrast, asynchronous requests don’t block code execution, allowing other operations to proceed while waiting for the server.

XMLHttpRequest Object

Creation and initialization

The XMLHttpRequest object is one of the traditional ways to make Ajax calls. You initialize it by creating a new instance:

var xhr = new XMLHttpRequest();

Methods and properties of XMLHttpRequest

The XMLHttpRequest object has several methods like open(), send(), and abort(), as well as properties such as readyState, status, and responseText. These methods and properties are essential for configuring the request and handling the response.

Event handling with XMLHttpRequest

Event listeners are crucial for managing the state of an Ajax request. For example, you can use onreadystatechange to execute code when the state changes:

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

Fetch API

Introduction to Fetch API

The Fetch API is a modern alternative to XMLHttpRequest for making Ajax calls. It’s more powerful and flexible, providing a simpler and cleaner syntax for handling network requests.

Syntax and structure of Fetch requests

Using the Fetch API, you can make requests with a straightforward syntax. For example, a GET request looks like this:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Handling responses with promises

The Fetch API uses promises to handle responses, allowing you to easily manage asynchronous operations. This makes it simpler to handle success and error cases through chaining .then() and .catch() methods.

JSON vs. XML

Advantages of using JSON over XML

JSON has become the preferred format for data exchange over XML due to its simplicity and ease of use. JSON is lightweight, easier to parse, and works seamlessly with JavaScript objects, making it more efficient for client-server communication.

Examples of JSON and XML data structures

A JSON data structure might look like this:

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

In contrast, an equivalent XML data structure would be:

<person>
  <name>John</name>
  <age>30</age>
  <city>New York</city>
</person>

Making Ajax Calls

Using XMLHttpRequest

Performing GET requests

To make a GET request using XMLHttpRequest, you first create an instance of the object, configure the request, and then send it. Here’s a basic example:

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

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send();

Performing POST requests

POST requests require you to set the request header and include data in the request body. Here’s an example:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send(JSON.stringify({ key: 'value' }));

Example code snippets and explanations

In these snippets, xhr.open() configures the request, while xhr.send() sends it. The onreadystatechange event handler processes the response when the request state changes. For POST requests, xhr.setRequestHeader specifies the data format.

Using Fetch API

Performing GET requests with Fetch

The Fetch API simplifies GET requests with a cleaner syntax:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Performing POST requests with Fetch

POST requests with Fetch are also straightforward. You include the method and body in the options:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Example code snippets and explanations

In these examples, fetch() sends the request and returns a promise. The .then() method handles the response, converting it to JSON if successful, while .catch() manages any errors.

Using jQuery

Introduction to jQuery for Ajax

jQuery provides a simpler and more cross-browser-compatible way to handle Ajax calls. It abstracts away many of the details, making the process more streamlined.

Performing GET and POST requests with jQuery

To perform a GET request:

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  },
});

For a POST request:

$.ajax({
  url: 'https://api.example.com/data',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ key: 'value' }),
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  },
});

Example code snippets and explanations

jQuery’s $.ajax method takes an options object to configure the request. url specifies the endpoint, method determines the HTTP method, and success and error callbacks handle the response.

Advanced Ajax Techniques

Handling Errors and Responses

Error handling mechanisms in XMLHttpRequest

Handling errors in XMLHttpRequest involves checking the readyState and status properties. Here’s a basic example:

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

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Error occurred:', xhr.status, xhr.statusText);
    }
  }
};

xhr.send();

Error handling with Fetch API

With the Fetch API, error handling is more straightforward using promises. Here’s how to catch errors while making a request:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

Best practices for handling server responses

• Always check status and statusText for XMLHttpRequest.
• Use .ok property in the Fetch API response to check for success.
• Implement retry mechanisms for transient errors.
• Log errors on the server for further analysis.
• Notify users gracefully about errors and possible solutions.

Working with Promises

Understanding promises in JavaScript

Promises are a fundamental part of modern JavaScript, providing a more flexible way to handle asynchronous operations. They represent an eventual completion (or failure) of an asynchronous operation and its resulting value.

Using promises with Fetch API

The Fetch API is built on promises, which makes it cleaner and more powerful for async operations. Here’s a simple usage example:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

Chaining promises for sequential Ajax calls

You can chain multiple promises to manage sequential requests efficiently:

fetch('https://api.example.com/data1')
  .then(response => response.json())
  .then(data1 => {
    console.log(data1);
    return fetch('https://api.example.com/data2');
  })
  .then(response => response.json())
  .then(data2 => console.log(data2))
  .catch(error => console.error('Chained fetch error:', error));

Using Axios

Introduction to Axios library

Axios is a promise-based HTTP client for the browser and Node.js, which simplifies both creating and handling HTTP requests. It offers a clean and concise API for making HTTP requests.

Performing GET and POST requests with Axios

Axios simplifies GET and POST requests. Here’s how you can make a GET request:

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('GET request error:', error));

And a POST request:

axios.post('https://api.example.com/data', {
    key: 'value'
  })
  .then(response => console.log(response.data))
  .catch(error => console.error('POST request error:', error));

Example code snippets and explanations

Axios abstracts many of the details involved in making HTTP requests. For GET requests, axios.get() initiates the call, and .then() and .catch() handle the response and errors respectively. For POST requests, axios.post() sends data alongside the HTTP request.

Using SuperAgent

Introduction to SuperAgent library

SuperAgent is a small, progressive HTTP request library for Node.js and the browser. It provides an intuitive API and supports promises, making it easier to manage async tasks.

Performing GET and POST requests with SuperAgent

Making a GET request with SuperAgent:

superagent
  .get('https://api.example.com/data')
  .then(response => console.log(response.body))
  .catch(error => console.error('GET request error:', error));

For a POST request:

superagent
  .post('https://api.example.com/data')
  .send({ key: 'value' })
  .then(response => console.log(response.body))
  .catch(error => console.error('POST request error:', error));

Example code snippets and explanations

SuperAgent’s fluent API style allows chaining methods for clean and readable code. Both .then() and .catch() methods handle success and error responses, making it convenient for tasks requiring robust error handling and response management in Ajax calls.

Practical Examples of Ajax Implementation

Search Application with Real-Time Results

HTML form setup

Setting up the HTML form is straightforward. Here’s a simple form structure:

<form id="searchForm">
  <input type="text" id="searchInput" name="query" placeholder="Search...">
  <input type="submit" value="Search">
</form>
<div id="results"></div>

JavaScript function for Ajax call

Using JavaScript to handle the Ajax call, we can make the search dynamic:

document.getElementById('searchForm').addEventListener('submit', function(e) {
  e.preventDefault();
  var query = document.getElementById('searchInput').value;

  fetch('search.php?query=' + query)
    .then(response => response.json())
    .then(data => {
      let output = '<ul>';
      data.forEach(item => {
        output += `<li>${item}</li>`;
      });
      output += '</ul>';
      document.getElementById('results').innerHTML = output;
    })
    .catch(error => console.error('Error:', error));
});

PHP server-side script for handling requests

Here’s a simple PHP script (search.php) to handle the search requests:

<?php
if (isset($_GET['query'])) {
  $query = $_GET['query'];
  // Simulated database result set
  $results = ['result1', 'result2', 'result3']; 
  $filteredResults = array_filter($results, function($item) use ($query) {
    return stripos($item, $query) !== false;
  });
  echo json_encode(array_values($filteredResults));
}
?>

Autocomplete Feature

Setting up the HTML input field

For the autocomplete feature, you’ll want an input field:

<input type="text" id="autocompleteInput" placeholder="Start typing...">
<div id="suggestions"></div>

JavaScript function for sending and receiving Ajax requests

The accompanying JavaScript to make the Ajax request:

document.getElementById('autocompleteInput').addEventListener('keyup', function() {
  var query = this.value;

  if (query.length > 2) {
    fetch('autocomplete.php?query=' + query)
      .then(response => response.json())
      .then(data => {
        let output = '<ul>';
        data.forEach(item => {
          output += `<li>${item}</li>`;
        });
        output += '</ul>';
        document.getElementById('suggestions').innerHTML = output;
      })
      .catch(error => console.error('Error:', error));
  } else {
    document.getElementById('suggestions').innerHTML = '';
  }
});

Server-side script for generating suggestions

PHP script for generating autocomplete suggestions (autocomplete.php):

<?php
if (isset($_GET['query'])) {
  $query = $_GET['query'];
  // Simulated database suggestions
  $suggestions = ['apple', 'banana', 'grape', 'orange']; 
  $filteredSuggestions = array_filter($suggestions, function($item) use ($query) {
    return stripos($item, $query) !== false;
  });
  echo json_encode(array_values($filteredSuggestions));
}
?>

Voting and Rating System

HTML and CSS for the voting interface

Create a basic voting interface with HTML and some styling:

<div class="vote">
  <button class="vote-up" data-id="1">Upvote</button>
  <span id="vote-count-1">10</span>
  <button class="vote-down" data-id="1">Downvote</button>
</div>

<style>
.vote { display: flex; align-items: center; }
.vote button { margin: 0 5px; }
</style>

JavaScript functions for handling user input

JavaScript to manage votes:

document.querySelectorAll('.vote button').forEach(button => {
  button.addEventListener('click', function() {
    var action = this.classList.contains('vote-up') ? 'upvote' : 'downvote';
    var id = this.getAttribute('data-id');

    fetch(`vote.php?action=${action}&id=${id}`, { method: 'POST' })
      .then(response => response.json())
      .then(data => {
        document.getElementById(`vote-count-${id}`).textContent = data.newCount;
      })
      .catch(error => console.error('Error:', error));
  });
});

Server-side processing and response handling

The accompanying PHP script (vote.php) to process votes:

<?php
if (isset($_POST['action']) && isset($_POST['id'])) {
  $id = $_POST['id'];
  $action = $_POST['action'];

  // Simulated vote processing
  $currentVotes = 10; 
  $newVotes = $action === 'upvote' ? $currentVotes + 1 : $currentVotes - 1;

  echo json_encode(['newCount' => $newVotes]);
}
?>

FAQ On How To Make AJAX Calls With JavaScript

How do I make a simple AJAX call with XMLHttpRequest?

Using XMLHttpRequest (XHR) is straightforward:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = () => {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

This sends an HTTP GET request and processes the response.

How can I use the Fetch API for AJAX calls?

The Fetch API offers a modern alternative:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

This method is simpler, and uses JavaScript promises to handle asynchronous requests.

What are GET and POST requests in AJAX?

GET fetches data from a server, while POST sends data. In AJAX, you use them to interact with servers:

• GET: Retrieve data
• POST: Submit data

Use the correct HTTP methods based on your requirement.

How do I handle errors in an AJAX call?

Check the status code with XMLHttpRequest (XHR):

if (xhr.status !== 200) {
  console.error('Request failed');
}

For Fetch API, use .catch():

fetch(url)
  .catch(error => console.error('Error:', error));

Can I make synchronous AJAX calls?

Synchronous calls can freeze the browser. In XMLHttpRequest:

xhr.open('GET', 'https://api.example.com/data', false);

Use asynchronous JavaScript for better performance.

How do I handle JSON data in AJAX requests?

Parse received JSON data:

const data = JSON.parse(xhr.responseText);

Sending JSON via POST:

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));

What are CORS and its implications in AJAX?

CORS (Cross-Origin Resource Sharing) lets web apps request resources from different domains. If servers aren’t properly configured, errors happen. Solve this by adjusting server settings and CORS headers.

How do I send HTTP headers with an AJAX request?

For XMLHttpRequest:

xhr.setRequestHeader('Content-Type', 'application/json');

With Fetch API:

fetch(url, {
  method: 'GET', 
  headers: {
    'Content-Type': 'application/json'
  }
});

How do I debug AJAX calls?

Browser developer tools are essential. Check network requests and responses:

• Inspect the Network tab.
• Look for status codes.
• Examine request headers and payloads.
• Console logs for errors.

How can I handle different data formats in AJAX?

AJAX can manage JSON, XML, plain text, etc. Convert as needed:

For JSON:

const data = JSON.parse(xhr.responseText);

For text:

const text = xhr.responseText;

Choose the right method based on the format received.

Conclusion

Understanding how to make AJAX calls with JavaScript is a crucial part of modern web development. By mastering both XMLHttpRequest (XHR) and the Fetch API, you can efficiently handle HTTP requests, interact with RESTful APIs, and process JSON data. This skill empowers you to create dynamic, user-friendly web applications.

Remember, you’ll often need to deal with error handling, CORS issues, and optimizing AJAX performance. Keep exploring and practicing with AJAX methods to enhance your skills further.

If you liked this article about how to make AJAX calls with JavaScript, you should check out this article about how to handle events in JavaScript.

There are also similar articles discussing how to create an object in JavaScript, how to use JavaScript promises, how to write asynchronous JavaScript, and how to use JavaScript fetch API.

And let’s not forget about articles on how to create a JavaScript class, how to implement JavaScript ES6 features, how to use JavaScript for form validation, and how to add event listeners in JavaScript.