What Is & How to Use XMLHttpRequest

Using XMLHttpRequest with real examples.

Making an HTTP request in JavaScript of browsers’ environment is a prevalent task, and this task is accomplished through the XMLHttpRequest API. Despite having XML in its name, as JavaScript has evolved, it doesn’t have much to do with XML. Now, it might be more appropriate to call it HttpRequest.

The basic purpose of XMLHttpRequest is to send HTTP requests, so before introducing XMLHttpRequest, I want to introduce the basic flow of HTTP transport briefly.

There are three steps for a client from sending an HTTP request to receiving an HTTP response:

• The client writes the HTTP request message and sends it to the server.
• The server accepts the HTTP message, processes it, and then returns the HTTP response message to the client.
• The client receives the HTTP response message, parses the message, and retrieves the data.

The HTTP request message contains:

• HTTP Methods. Include GET , POST , PATCH …
• URL
• Header
• Body

The HTTP response message contains:

• Status Code
• Header
• Body

In our JavaScript code, all we need to do is:

• During the sending HTTP message stage, set Method, URL, Header, and…