Do you think IIT Guwahati certified course can help you in your career?
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.
This blog will provide an in-depth discussion of the XMLHttpRequest object and usage examples.
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() {
}
Sending Request
The XMLHttpRequest object's open() and send() methods can be used to deliver requests to servers:
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.
85+ registered