Everything About XMLHttpRequest in JavaScript

Learn how to make requests using XMLHttpRequests

Image source: Author

What Is XMLHttpRequest (XHR)?

• XMLHttpRequest is an in-built JavaScript object that is used to transfer data between a server and a client without refreshing the whole page.
• Bu using XHR we can update the page based on the user action.
• For example, an infinite news feed. (Once the user scrolls down to the end of the page, we make a request to fetch the next article and append the data to the page).
• Using XHR, we can make both synchronous and asynchronous requests.

Steps to Make a Request Using XMLHttpRequest

• Create an XMLHttpRequest object.
• Configure the object with request details .
• Send request.

1. Create a XMLHttpRequest object

let request = new XMLHttpRequest();

2. Configure the object with request details

To configure the request, we can use the open method of XMLHttpRequest object.

request.open(method, URL, [async, user, password])

• method — "GET" or "POST"
• URL— URL string to request. Can also be a URL object.

Optional params

• async — By default it is true. If we set it to false, then it will send a synchronous request.
• user, password— Login and password for basic HTTP auth

3. Send request

The send method can be used to send a request to the server.

request.send();

Once the request is sent to the server, we can track the request using three events.

• load — The load event is triggered when an XMLHttpRequest is completed successfully (even if HTTP status is 400 or 500) and the response is fully downloaded.