Hello folks! welcome back to a new edition of our tutorial on Ajax. In this tutorial post, we are going to be discussing about AJAX XMLHttpRequest Object.
The AJAX XMLHttpRequest object is the key to AJAX. It has been available to users ever since Internet Explorer 5.5 was released in July 2000, but was not fully discovered until AJAX and Web 2.0 became popular in 2005.
XMLHttpRequest is an API that can be used by JavaScript, VBScript, JScript, PHP, Bash, and other web browser scripting languages to transfer and manipulate XML data to and from a webserver using HTTP, establishing an independent connection channel between a webpage's Client-Side and Server-Side.
The AJAX XMLHttpRequest object is the key to AJAX. It has been available to users ever since Internet Explorer 5.5 was released in July 2000, but was not fully discovered until AJAX and Web 2.0 became popular in 2005.
XMLHttpRequest is an API that can be used by JavaScript, VBScript, JScript, PHP, Bash, and other web browser scripting languages to transfer and manipulate XML data to and from a webserver using HTTP, establishing an independent connection channel between a webpage's Client-Side and Server-Side.
READ: AJAX | Action
The data that is returned from the XMLHttpRequest calls will often be provided by the back-end databases. Besides XML, XMLHttpRequest can be used to fetch data in other formats, e.g. JSON or even plain text.
You have already come across a couple of examples in our previous tutorials on how to create an XMLHttpRequest object.
Following below is the list of some of the methods and properties that you have to get familiar with -
You have already come across a couple of examples in our previous tutorials on how to create an XMLHttpRequest object.
Following below is the list of some of the methods and properties that you have to get familiar with -
XMLHttpRequest Methods
- abort(): Cancels the current request.
- getAllResponseHeaders(): Returns the complete set of HTTP headers as a string.
- getResponseHeader(headerName): This is used to return the value of the specified HTTP header.
- open(method, URL)
- open(method, URL, async)
- open(method, URL, async, userName)
- open(method, URL, async, userName, password): Specifies the method, URL, and other optional attributes of a request.
The method parameter can have a value of "GET", "POST", or "HEAD". Other HTTP methods such as "PUT" and "DELETE" may be possible.
The "async" parameter is used to specify whether the request should be handled asynchronously or not. "true" means that the script processing continues after the send() method without waiting for a response, and "false" means that the script waits for response before continuing with the script processing.
- send(content): Sends the request.
- setRequestHeader(label, value): Adds a label/value pair to the HTTP header to be sent.
READ: AJAX | Browser Support
XMLHttpRequest Properties
- onreadystatechange: An event handler for an event that fires at every state change.
- readyState: The readyState property is used to define the current state of the XMLHttpRequest object.
The following table below provides a list of possible values for the readyState property -
| State | Description |
|---|---|
| 0 | The request is not initialized. |
| 1 | The request has been set up. |
| 2 | The request has been sent. |
| 3 | The request is in process. |
| 4 | The request is completed. |
readyState = 0 After you have created the XMLHttpRequest object, but before you have called the open() method.
readyState = 1 After you have called the open() method, but before you have called the send() method.
readyState = 2 After you have called the send() method.
readyState = 3 After the web browser has established a communication with the web server, but before the server has completed the response.
readyState = 4 After the request has been completed, and the response data has been completely received from the server.
readyState = 1 After you have called the open() method, but before you have called the send() method.
readyState = 2 After you have called the send() method.
readyState = 3 After the web browser has established a communication with the web server, but before the server has completed the response.
readyState = 4 After the request has been completed, and the response data has been completely received from the server.
- responseText: Returns the response as a string.
- responseXML: Returns the response as XML. This property returns an XML document object, which can be examined and parsed using the W3C DOM node tree methods and properties.
- status: Returns the status as a number (e.g., 404 for "Not Found" and 200 for "Ok").
- statusText: Returns the status as a string (e.g., "Not Found" or "Ok").
READ: AJAX | Examples
Alright guys! This is where we are going to be rounding up for this tutorial post. In our next tutorial, we are going to be discussing about AJAX Database Operations.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.