What Is Ajax and How to Use it

Cyrus Yip
Oct 08, 2024

Table of Contents

Ajax (Asynchronous JavaScript and XML) is a method for sending and receiving data from a web server. It allows parts of a web page to be updated without reloading the whole page. Ajax isn’t a specific technology, but rather a concept that can be implemented using various methods: XMLHttpRequest, fetch() or libraries like Axios. Although Ajax originally used XML, it uses JSON more commonly nowadays.

Set Up a Test Server #

Before we dive into Ajax examples, let’s create a simple server to handle our requests. Save the following code as server.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// Usage: save this code as server.js and run "node server.js [port]"
import http from 'http';
import fs from 'fs';

// Get the port from command-line arguments
const port = process.argv[2] || 3000;

const requestListener = (request, response) => {
  console.log(request.url)
  if (request.url === '/' || request.url === '/index.html') {
    // Serve the index.html file
    const filePath =  'index.html';
    fs.readFile(filePath, (err, data) => {
      if (err) {
        response.writeHead(500, { 'Content-Type': 'text/plain' });
        response.end('Error loading index.html');
      } else {
        response.writeHead(200, { 'Content-Type': 'text/html' });
        response.end(data);
      }
    });
  } else if (request.url === '/data1') {
    // Return text for URL '/data1'
    response.writeHead(200, { 'Content-Type': 'text/plain' });
    response.end('This is the response for /data1');
  } else if (request.url === '/data2') {
    // Return text for URL '/data2'
    response.writeHead(200, { 'Content-Type': 'text/plain' });
    response.end('This is the response for /data2');
  } else if (request.url === '/data3') {
    // Return text for URL '/data3'
    response.writeHead(200, { 'Content-Type': 'text/plain' });
    response.end('This is the response for /data3');
  } else {
    response.writeHead(404, { 'Content-Type': 'text/plain' });
    response.end('404 Not Found');
  }
};

// Create and start the server
const server = http.createServer(requestListener);

server.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

Interactive Demo of fetch(), XMLHttpRequest and Axios #

The following demo showcases three methods for making Ajax requests. Save the code as index.html to the directory that contains server.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!-- Copy this code and save it as "index.html" -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ajax Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
  <h1>Ajax Demo</h1>
  <hr />
  <h2>Use fetch()</h2>
  <button onclick="LoadDataFetch('/data1')">Load data 1 (fetch)</button>
  <button onclick="LoadDataFetch('/data2')">Load data 2 (fetch)</button>
  <button onclick="LoadDataFetch('/data3')">Load data 3 (fetch)</button>
  <button onclick="LoadDataFetch('/data4')">Load data 4 (fetch, 404)</button>
  <h2>Use XMLHttpRequest</h2>
  <button onclick="LoadDataXHR('/data1')">Load data 1 (XHR)</button>
  <button onclick="LoadDataXHR('/data2')">Load data 2 (XHR)</button>
  <button onclick="LoadDataXHR('/data3')">Load data 3 (XHR)</button>
  <button onclick="LoadDataXHR('/data4')">Load data 4 (XHR, 404)</button>
  <h2>Use Axios</h2>
  <button onclick="LoadDataAxios('/data1')">Load data 1 (Axios)</button>
  <button onclick="LoadDataAxios('/data2')">Load data 2 (Axios)</button>
  <button onclick="LoadDataAxios('/data3')">Load data 3 (Axios)</button>
  <button onclick="LoadDataAxios('/data4')">Load data 4 (Axios, 404)</button>
  <h2>Data</h2>
  <p id="response">No data loaded</p>
  <script>
    const responseElement = document.querySelector("#response");
    // Fetches data using fetch()
    const LoadDataFetch = (url) => {
      fetch(url)
        .then((response) => {
          // Check if the response status is OK (200-299)
          if (!response.ok) {
            return `HTTP error: ${response.status}`;
          }
          return response.text(); // Return the response data as text
        })
        .then((data) => {
          // Display the data
          responseElement.textContent = data;
        })
        .catch((error) => {
          // Handle errors, e.g., network issues
          responseElement.textContent = "Request failed (fetch)";
        });
    };

    const LoadDataXHR = (url) => {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.onreadystatechange = () => {
        // Check if the response status is 200
        if (xhr.readyState === 4 && xhr.status === 200) {
          // Display the data
          responseElement.textContent = xhr.responseText;
        } else {
          responseElement.textContent = `HTTP error: ${xhr.status}`;
        }
      };
      xhr.onerror = () => {
        // Handle errors, e.g., network issues
        responseElement.textContent = "Request failed (XHR)";
      };
      xhr.send();
    };
    const LoadDataAxios = (url) => {
      axios
        .get(url)
        .then((response) => {
          // Display the data
          responseElement.textContent = response.data;
        })
        .catch((error) => {
          // Handle errors, e.g., 404 and network issues
          responseElement.textContent = `Request failed (Axios): ${error.message}`; // Offline, 404
        });
    };
  </script>
</body>

</html>

Run node server.js, and visit http://localhost:3000/. The demo provides buttons to load data from different URLs using three methods: fetch(), XMLHttpRequest and Axios. Try clicking the buttons to see how each method handles requests, including error responses.

Reference #

Tags: