JavaScript Fetch API as Replacement for AJAX

Article source, sample code and inspiration provided by

javascripttutorial.net.

ChatGPT (OpenAI).

code-boxx.com.

AJAX

AJAX (Asynchronous JavaScript and XML) is a technique for making asynchronous HTTP requests in web development, without the need to reload the entire page. It allows developers to send and receive data asynchronously, in the background, without disrupting the user experience.

AJAX is implemented using the XMLHttpRequest (XHR) API, which is a built-in object in JavaScript that allows developers to send HTTP requests and receive responses from a server.

Here is an example of how you might use the XHR API to make an HTTP GET request:

function loadDoc() {
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        document.getElementById("demo").innerHTML = this.responseText;
    }
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send();
}

Example provided by w3schools.com

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/endpoint');
xhr.onload = function () {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error(xhr.statusText);
    }
};
xhr.onerror = function () {
    console.error(xhr.statusText);
};
xhr.send();

Example provided by ChatGPT

Although AJAX was a revolutionary technology when it was first introduced, it has since been largely replaced by newer APIs such as the fetch() API, which provides a more modern and flexible way to make HTTP requests in JavaScript.

Fetch API

In the following tutorial, you’ll learn about the JavaScript Fetch API and how to use it to make asynchronous HTTP requests.

The Fetch API is a modern interface that allows you to make HTTP requests to servers from web browsers.

If you have worked with XMLHttpRequest (XHR) object, the Fetch API can perform all the tasks as the XHR object does.

In addition, the Fetch API is much simpler and cleaner. It uses the Promise to deliver more flexible features to make requests to servers from the web browsers.

The fetch() method is available in the global scope that instructs the web browsers to send a request to a URL.

Sending a Request

The fetch() requires only one parameter which is the URL of the resource that you want to fetch:

let response = fetch(url);

The fetch() method returns a Promise so you can use the then() and catch() methods to handle it:

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });

When the request completes, the resource is available. At this time, the promise will resolve into a Response object.

The Response object is the API wrapper for the fetched resource. The Response object has a number of useful properties and methods to inspect the response.

Reading the Response

If the contents of the response are in the raw text format, you can use the text() method. The text() method returns a Promise that resolves with the complete contents of the fetched resource:

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));

In practice, you often use the async/await with the fetch() method like this:

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}

Besides the text() method, the Response object has other methods such as json(), blob(), formData() and arrayBuffer() to handle the respective type of data.

Handling the status codes of the Response

The Response object provides the status code and status text via the status and statusText properties. When a request is successful, the status code is 200 and status text is OK:

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();

Output:

200
OK

If the requested resource doesn’t exist, the response code is 404:

let response = await fetch('/non-existence.txt');

console.log(response.status); // 400
console.log(response.statusText); // Not Found

Output:

400
Not Found

If the requested URL throws a server error, the response code will be 500.

If the requested URL is redirected to the new one with the response 300-309, the status of the Response object is set to 200. In addition the redirected property is set to true.

The fetch() returns a promise that rejects when a real failure occurs such as a web browser timeout, a loss of network connection, and a CORS violation.

JavaScript Fetch API example

Suppose that you have a json file that locates on the webserver with the following contents:

[
    {
        "username": "john",
        "firstName": "John",
        "lastName": "Doe",
        "gender": "Male",
        "profileURL": "img/male.png",
        "email": "john.doe@example.com"
    },
    {
        "username": "jane",
        "firstName": "Jane",
        "lastName": "Doe",
        "gender": "Female",
        "profileURL": "img/female.png",
        "email": "jane.doe@example.com"
    }
]

The following shows the HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container"></div>
    <script src="js/app.js"></script>
</body>
</html>

In the app.js, we’ll use the fetch() method to get the user data and render the data inside the <div> element with the class container.

First, declare the getUsers() function that fetches users.json from the server.

async function getUsers() {
    let url = 'users.json';
    try {
        let res = await fetch(url);
        return await res.json();
    } catch (error) {
        console.log(error);
    }
}

Then, develop the renderUsers() function that renders user data:

async function renderUsers() {
    let users = await getUsers();
    let html = '';
    users.forEach(user => {
        let htmlSegment = `
        <div class="user">
            <img src="${user.profileURL}" >
            <h2>${user.firstName} ${user.lastName}</h2>
            <div class="email">
                <a href="email:${user.email}">${user.email}</a>
            </div>
        </div>`;

        html += htmlSegment;
    });

    let container = document.querySelector('.container');
    container.innerHTML = html;
}

renderUsers();

Output:

Check out the Fetch API demo.

Post Form Data With Javascript Fetch

To post form data using Javascript Fetch, simply set the send method to “post”, and set the form data in the body:

var data = new FormData();
data.append("KEY", "VALUE");
fetch("URL", { method: "POST", body: data });

That covers the quick basics, but read on for the detailed example!

PART 1) HTML FORM

<form onsubmit="return sendData()">
  <input type="text" id="name" value="Jon Doe" required/>
  <input type="email" id="email" value="jon@doe.com" required/>
  <input type="submit" value="Go!"/>
</form>

For this simple example, we have a dummy HTML form with only 2 fields – Name and email.

PART 2) JAVASCRIPT FETCH

function sendData () {

  // (A) GET FORM DATA
  var data = new FormData();
  data.append("name", document.getElementById("name").value);
  data.append("email", document.getElementById("email").value);
 
  // (B) INIT FETCH POST
  fetch("2-dummy.php", {
    method: "POST",
    body: data
  })
 
  // (C) RETURN SERVER RESPONSE AS TEXT
  .then((result) => {
    if (result.status != 200) { throw new Error("Bad Server Response"); }
    return result.text();
  })
 
  // (D) SERVER RESPONSE
  .then((response) => {
    console.log(response);
  })
 
  // (E) HANDLE ERRORS - OPTIONAL
  .catch((error) => { console.log(error); });
 
  // (F) PREVENT FORM SUBMIT
  return false;
}

This is pretty much the “full version” of the introduction snippet, should be pretty self-explanatory:

Create a FormData() object, collect all the data that needs to be sent to the server.
As in the introduction, set fetch to method: "POST" and append the data body: data.
Take note of if (result.status != 200) { THROW ERROR } here. For you guys who are new, fetch will consider it a “success” as long as the server responds – Even when the server responds with errors like 4o4 (not found), 403 (unauthorized), and 500 (internal server error). So, it is safer to do a manual 200 (OK) check here.
The server response in a string. Use this to show a success/failure message to the user.
Handle any errors. Optional, but highly recommended.

EXTRA) THE LAZY WAY

Give the form an ID – <form id="myForm">.
Give all the form fields a name – <input name="userEmail"/>
Feed the form directly into the form data – var data = new FormData(document.getElementById("myForm"))

Yep, FormData() can actually get all the form fields automatically. I actually went slightly roundabout in the above example, to illustrate data.append() for those who are not working with HTML forms.

Summary

The Fetch API allows you to asynchronously request for a resource.
Use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json(). These methods resolve into the actual data.
Use the status and statusText properties of the Response object to get the status and status text of the response.
use the catch() method or try...catch statement to handle a failure request.

JavaScript Fetch API as Replacement for AJAX

AJAX

Fetch API

Sending a Request

Reading the Response

Handling the status codes of the Response

JavaScript Fetch API example

Post Form Data With Javascript Fetch

PART 1) HTML FORM

PART 2) JAVASCRIPT FETCH

EXTRA) THE LAZY WAY

Summary

Use Javascript to Build a HTML Pagination

Syntax Highlightning for Textarea (HTML)

Basic HTML Tutorial for Beginner

Bob Tabor – Beginner’s Guide to JavaScript