Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
XMLHttpRequest Object
2.1.
Creation
2.2.
Defining
3.
Sending Request
4.
XMLHttpRequest Object Methods
5.
Characteristics of XMLHttpRequest Object
6.
Frequently Asked Question
6.1.
What is the purpose of an XMLHttpRequest?
6.2.
When was XMLHttpRequest introduced?
6.3.
How do I send an XHR request?
6.4.
What is the complete form of HTTP?
6.5.
What is an HTTP status code? 
7.
Conclusion
Last Updated: Mar 27, 2024
Medium

AJAX - The XMLHttpRequest Object

Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

Introduction

A collection of Ajax methods leverages several client-side web technologies to build asynchronous online applications. Ajax enables web applications to transmit and receive data asynchronously from a server without changing how a page looks or functions.

 AJAX - The XMLHttpRequest Object

This blog will provide an in-depth discussion of the XMLHttpRequest object and usage examples.

To know more about Cloud Computing click here.

XMLHttpRequest Object

The XMLHttpRequest (XHR) objects are used for server communication. The Ajax XMLHttpRequest object can make many things more accessible. Using this object, we can make HTTP requests and receive responses from the server without requiring the user to submit the page to the server.

In layman's terms, we can get data from a URL without reloading the complete page. This allows a Web page to update only a portion of the page without interrupting the user's current activity. We can create a highly user-friendly web application using this object.

Creation

A built-in XMLHttpRequest object is available in all contemporary browsers like Safari, Chrome, Firefox, Edge, and Opera).

Syntax: 

variableName = new XMLHttpRequest();

Defining

Another function receives a callback function as an argument. The program running when the response is prepared in this scenario should be in the callback function.

XHRObject.onload = function() {
}
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Sending Request

The XMLHttpRequest object's open() and send() methods can be used to deliver requests to servers:

Syntax:

XHRObject.open("GET", "path_or_url");
XHRObject.send();

Example:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="pathToYour/bootstrap.min.css"/>
	<body class="p-3 m-0 border-0 bd-example">
		<h2>The XMLHttpRequest Object</h2>
		<div id="demo">
			<p>AJAX GET REQUEST</p>
			<button class="btn btn-outline-primary" type="button" onclick="loadDoc()">GET</button> Status Code :
		</div>
		<br>
		<div id="get">
			<div></div>
			<script>
				function loadDoc() {
					const XHRobj = new XMLHttpRequest();
					XHRobj.onload = function() {
						document.getElementById("get").innerHTML = this.status;
					}
					XHRobj.open("GET", "https://api.codingninjas.com/api/v3/public_section/resource_details?slug=ajax-the-xmlhttprequest-object");
					XHRobj.send();
				}
			</script>
	</body>
</html>


Output:

Before clicking:

Before Clicking

After clicking on "GET":

After Clicking

Try this code on the online javascript compiler for better understanding.

XMLHttpRequest Object Methods

The table below contains some of the essential methods of the XMLHttpRequest Object.

Method

Description

new XMLHttpRequest() Creates a new XMLHttpRequest object.
send() For GET requests, send the request to the server.
send(string) For POST requests, send the request to the server.
setRequestHeader() A label/value pair is added to the header that will be sent.
getResponseHeader() Returns the specific header information.
getAllResponseHeaders() Returns header information.
abort() Cancels the current request.
open(method, url, async, user, psw)

Explains the request

method: the request type GET or POST 

url: the file location

async: true (asynchronous) or false (synchronous)

user: optional user name 

psw: optional password

 

Characteristics of XMLHttpRequest Object

Character Description
readyState

This property holds the status of the XMLHttpRequest.

0: request not initialized

1: server connection established

2: request received

3: processing request

4: request is finished, and the response is ready

onreadystatechange This property defines a function called when the property of readyState changes. The status of the XMLHttpRequest object is stored in the status and statusText fields.
onload Define a callback function. This function will execute when the request receives a response.
responseText This returns the response data in the form of a string.
responseXML This returns the response data in the form of XML data.
status

Returns the status number of a request

200: "OK"

403: "Forbidden"

404: "Not Found."

statusText Returns the status text (e.g., "OK" or "Not Found")

Frequently Asked Question

What is the purpose of an XMLHttpRequest?

Interacting with servers requires the usage of XMLHttpRequest (XHR) objects. We can get data from a URL without doing a full page refresh.

When was XMLHttpRequest introduced?

Since Gecko 0.6, published on December 6, 2000, users have had access to the XMLHttpRequest object.

How do I send an XHR request?

We use the XMLHttpRequest object's open() and send() methods to send a request to a server.

What is the complete form of HTTP?

Hypertext Transfer Protocol.

What is an HTTP status code? 

A website's server informs the browser with the HTTP status code to let them know whether or not the request may be processed.

Conclusion

Let's summarize everything we have learned in this blog. We got to know what XMLHttpRequest (XHR) and XMLHttpRequest objects are. After that, we discussed XMLHttpRequest object properties and methods and how to use them. 


You may refer to our Guided Path on Code Studios for enhancing your skill set on DSACompetitive ProgrammingSystem Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy Learning, Ninjas!

Previous article
AJAX introduction
Next article
JS Ajax Request
Live masterclass