How to send JSON data via AJAX in JavaScript.

24 Sep 2023

ajax

In this blog post, you will learn how to send JSON data via AJAX in JavaScript. AJAX (Asynchronous JavaScript and XML) allows us to make asynchronous requests to the server and update the webpage dynamically without reloading the entire page.

Prerequisites

Before we begin, make sure you have a basic understanding of HTML, JavaScript, and AJAX.

Steps to Send JSON Data via AJAX

To send JSON data via AJAX, follow these steps:

Create an XMLHttpRequest object. This object allows us to send and receive data from a server asynchronously.
```
let xhr = new XMLHttpRequest();
```
Set the request method and URL. Specify the request method (e.g., POST, GET) and the URL where you want to send the JSON data.
```
let url = "https://example.com/api";
xhr.open("POST", url, true);
```
Set the request header. JSON data should be sent with the ‘Content-Type’ header set to ‘application/json’.
```
xhr.setRequestHeader("Content-Type", "application/json");
```
Convert the JSON data to a string using JSON.stringify(). This method serializes a JavaScript object or value to a JSON string.
```
let jsonData = { name: "John", age: 30 };
let jsonStr = JSON.stringify(jsonData);
```
Send the AJAX request with the JSON data.
```
xhr.send(jsonStr);
```

Handle the response. You can use the onreadystatechange event or the onload event to handle the response from the server.

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

Error handling. It is important to include error handling in case the AJAX request fails.
```
xhr.onerror = function() {
  console.error("Request failed.");
};
```

Conclusion

By following these steps, you can send JSON data via AJAX in JavaScript. This allows you to send structured data to a server and receive a response without refreshing the webpage. AJAX is a powerful tool for creating interactive and dynamic web applications.

#javascript #ajax