Ajax | Beginner | Javascript Essentials Tutorial

Introduction to Ajax and its usage

Ajax (Asynchronous JavaScript and XML) is a technique used to create asynchronous web applications. This tutorial covers the basics of Ajax, including how to make HTTP requests using the XMLHttpRequest object and the Fetch API.

Key Points:

Ajax allows you to update parts of a web page without reloading the entire page.
Ajax uses the XMLHttpRequest object or the Fetch API to make HTTP requests.
Understanding Ajax is essential for creating dynamic and interactive web applications.

Using XMLHttpRequest

The XMLHttpRequest object is used to make HTTP requests in Ajax. Here is an example of how to use XMLHttpRequest to fetch data from a server:


const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.onload = function() {
    if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Error fetching data:', xhr.statusText);
    }
};
xhr.onerror = function() {
    console.error('Network error');
};
xhr.send();

Using the Fetch API

The Fetch API is a modern alternative to XMLHttpRequest and provides a more powerful and flexible way to make HTTP requests. Here is an example of how to use the Fetch API to fetch data from a server:


fetch('https://jsonplaceholder.typicode.com/posts')
    .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('Error fetching data:', error);
    });

Sending Data with Ajax

You can use Ajax to send data to a server using the POST method. Here is an example of how to send data using XMLHttpRequest:


const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = function() {
    if (xhr.status === 201) {
        const data = JSON.parse(xhr.responseText);
        console.log('Data sent successfully:', data);
    } else {
        console.error('Error sending data:', xhr.statusText);
    }
};
xhr.onerror = function() {
    console.error('Network error');
};
const postData = {
    title: 'foo',
    body: 'bar',
    userId: 1
};
xhr.send(JSON.stringify(postData));

Sending Data with Fetch API

Here is an example of how to send data using the Fetch API:


const postData = {
    title: 'foo',
    body: 'bar',
    userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    body: JSON.stringify(postData)
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Data sent successfully:', data);
})
.catch(error => {
    console.error('Error sending data:', error);
});

Handling Errors in Ajax Requests

Handling errors is an important aspect of working with Ajax. You can handle errors by checking the response status and catching any exceptions that occur during the request. Here is an example using the Fetch API:


fetch('https://jsonplaceholder.typicode.com/posts')
    .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('Error fetching data:', error);
    });

Summary

In this tutorial, you learned about Ajax and its usage in web applications. You explored how to make HTTP requests using the XMLHttpRequest object and the Fetch API, how to send data with Ajax, and how to handle errors. Understanding Ajax is essential for creating dynamic and interactive web applications that can communicate with servers asynchronously.

JavaScript Essentials - Ajax