AJAX Request Example using JavaScript | CodeLSC

AJAX Request Example using JavaScript | CodeLSC

Learn how to make AJAX requests on a button click using JavaScript without any third-party libraries
Demo:

Requirements:

Basic knowledge of HTML, CSS, and JavaScript

A text editor to write the code

A modern web browser to test the code

In this tutorial, we will learn how to make AJAX requests using Vanilla JavaScript. AJAX stands for Asynchronous JavaScript and XML, and it allows us to send and receive data from a server without reloading the entire page. We will use the XMLHttpRequest object to make the requests.
Step 1:

HTML Start by creating an HTML file and adding the basic structure to it. Add a title to the page and a container for the response.


<!DOCTYPE html>
<html>
  <head>
    <title>AJAX Request|CodeLSC</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <h1>AJAX Request Example | CodeLSC</h1>
    
    <button id="ajaxButton">Make AJAX Request</button>
    
    <div id="response"></div>
  </body>
</html>

Step 2:

JavaScript Create a new file named main.js and add the following code. This code will listen for a click event on the button and make an AJAX request to the specified URL. Once the response is received, it will be displayed in the response container.

// Add an event listener to the button that triggers the AJAX request when it is clicked.
document.getElementById('ajaxButton').addEventListener('click', makeRequest);

// Define the function that makes the AJAX request.
function makeRequest() {
  // Create a new instance of the XMLHttpRequest object.
  var xhr = new XMLHttpRequest();
  // Open a new GET request to the specified URL.
  xhr.open('GET', 'https://reqbin.com/echo/get/json');
  // Define a callback function that will be called when the request state changes.
  xhr.onreadystatechange = function () {
    // If the request is complete and successful, display the response in the response div element.
    if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById('response').innerHTML = xhr.responseText;
    }
  };
  // Send the request.
  xhr.send();
}

The above code defines a function named makeRequest() that creates an instance of the XMLHttpRequest object and sends a GET request to the URL 'https://reqbin.com/echo/get/json'. It also defines a callback function to be called when the XMLHttpRequest object's state changes. If the state is 4 (the request is complete) and the status is 200 (the request was successful), the callback function sets the HTML content of the element with the ID 'response' to the response text of the XMLHttpRequest object.
The code also adds an event listener to the element with the ID 'ajaxButton' that calls the makeRequest() function when the button is clicked.

Step 3:

CSS Finally, add some basic styles to make the page look professional. We will use CSS to style the button and the response container.

/* <!-- Add some basic styles to make the page look more professional. -- >  */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 20px;
}

button:hover {
  background-color: #3e8e41;
}

#response {
  border: 1px solid #ddd;
  padding: 20px;
  font-size: 14px;
  max-width: 600px;
  margin: 0 auto;
}

Conclusion:

In conclusion, this blog showed how to make AJAX requests using Vanilla JavaScript without any third-party libraries. By using the XMLHttpRequest object, we were able to create a new request and open a GET request to a specified URL, then display the response in a container on the page. This knowledge can be applied to create more dynamic and interactive web applications that send and receive data from a server without reloading the page.
#JavaScript #AJAX #WebDevelopment #VanillaJS #XMLHttpRequest #Tutorial #WebDesign #FrontEndDevelopment
#howtomakeajaxrequestsonabuttonclickusingjavascript #howtomakeajaxrequestsonabuttonclickusingjavascriptand

Comments