Using AJAX for CRUD operations in JavaScript.

20 Oct 2023

ajax

In modern web development, it is common to perform CRUD (Create, Read, Update, Delete) operations on data without refreshing the entire web page. AJAX (Asynchronous JavaScript and XML) is a powerful technique that allows us to accomplish this by making asynchronous requests to the server.

In this blog post, we will explore how to use AJAX for performing CRUD operations in JavaScript.

Introduction
Sending GET Requests
Sending POST Requests
Sending PUT Requests
Sending DELETE Requests
Conclusion

Introduction

AJAX allows us to communicate with the server without reloading the page, providing a smoother user experience. To get started, we need to create an XMLHttpRequest object, which is responsible for making the HTTP requests.

let xhr = new XMLHttpRequest();

Sending GET Requests

To retrieve data from the server, we can use the GET method. Here is an example of sending a GET request using AJAX:

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

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            let response = JSON.parse(xhr.responseText);
            // Process the received data
        } else {
            console.error('Error: ' + xhr.status);
        }
    }
};

xhr.send();

Sending POST Requests

To create new data on the server, we can use the POST method. Here is an example of sending a POST request using AJAX:

xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 201) {
            let response = JSON.parse(xhr.responseText);
            // Handle the response after successful creation
        } else {
            console.error('Error: ' + xhr.status);
        }
    }
};

let data = {
    name: 'John',
    age: 25
};

xhr.send(JSON.stringify(data));

Sending PUT Requests

To update existing data on the server, we can use the PUT method. Here is an example of sending a PUT request using AJAX:

let dataId = 123; // ID of the data to be updated

xhr.open('PUT', 'https://api.example.com/data/' + dataId, true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            let response = JSON.parse(xhr.responseText);
            // Handle the response after successful update
        } else {
            console.error('Error: ' + xhr.status);
        }
    }
};

let updatedData = {
    name: 'John Doe',
    age: 26
};

xhr.send(JSON.stringify(updatedData));

Sending DELETE Requests

To delete data from the server, we can use the DELETE method. Here is an example of sending a DELETE request using AJAX:

let dataId = 123; // ID of the data to be deleted

xhr.open('DELETE', 'https://api.example.com/data/' + dataId, true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 204) {
            // Handle the response after successful deletion
        } else {
            console.error('Error: ' + xhr.status);
        }
    }
};

xhr.send();

Conclusion

AJAX is a powerful tool for performing CRUD operations in JavaScript. By using AJAX, we can seamlessly interact with the server without reloading the entire web page. This enhances the user experience and makes web applications more dynamic and efficient.

Start incorporating AJAX into your JavaScript code and make your web applications more interactive and responsive!

#ajax #javascript

Table of Contents