Step 1: Create an XMLHttpRequest object

• Create an XMLHttpRequest object to establish communication between the client and server. This object acts as a bridge, facilitating the exchange of data without requiring a page reload, enabling dynamic content updates.

Step 2: Define the request

• Specify the request details, including the HTTP method (e.g., GET or POST), the URL of the server endpoint, and any additional request headers needed for authentication or customisation.

Step 3: Handle the response

• Define a callback function to process the response received from the server. This function executes asynchronously upon successful completion of the request, allowing for seamless integration of server data into the client-side application.

Step 4: Send the request

• Use the XMLHttpRequest object's send() method to dispatch the request to the server. When you trigger the request, it starts and the specified callback function waits for the server's reply. This allows the webpage to update in real-time without needing a complete page refresh.