How to Use an XML HTTP Object
Create the files., Create the XMLHttpRequest object., Make the request., Retrieve the data., Do something with your data.
Step-by-Step Guide
-
Step 1: Create the files.
As a simple example, this tutorial will create an html file that includes the Javascript file which will make the request. -
Step 2: Create the XMLHttpRequest object.
The actual name of the object is XMLHttpRequest.
The constructor takes no arguments.
However, Internet Explorer does not follow the web standard for this, so you must detect if the user is still using it and instantiate an alternate object. , Call the open and send methods.
The open method takes three arguments.
First, the type of request (GET or POST).
Second, the URL to make the request to.
Last, a Boolean value indicating whether or not the request is asynchronous.
Then you need to call the send method.
It will take in a serialized string if you are making a POST request. , Listen for the readystatechange event on your request object.
When the event is fired, check the ready state and HTTP status code to see if the data has been received.
The Ajax ready states are as follows: 0:
Request had not been initialized. 1:
Connection to the server has been established. 2:
The server has received your request. 3:
The server is processing your request. 4:
Response is ready! , This step is up to you.
Usually, you will now present the data to your users in some way.
For this example, you can just log it to the console. -
Step 3: Make the request.
-
Step 4: Retrieve the data.
-
Step 5: Do something with your data.
Detailed Guide
As a simple example, this tutorial will create an html file that includes the Javascript file which will make the request.
The actual name of the object is XMLHttpRequest.
The constructor takes no arguments.
However, Internet Explorer does not follow the web standard for this, so you must detect if the user is still using it and instantiate an alternate object. , Call the open and send methods.
The open method takes three arguments.
First, the type of request (GET or POST).
Second, the URL to make the request to.
Last, a Boolean value indicating whether or not the request is asynchronous.
Then you need to call the send method.
It will take in a serialized string if you are making a POST request. , Listen for the readystatechange event on your request object.
When the event is fired, check the ready state and HTTP status code to see if the data has been received.
The Ajax ready states are as follows: 0:
Request had not been initialized. 1:
Connection to the server has been established. 2:
The server has received your request. 3:
The server is processing your request. 4:
Response is ready! , This step is up to you.
Usually, you will now present the data to your users in some way.
For this example, you can just log it to the console.
About the Author
Diane Campbell
Dedicated to helping readers learn new skills in practical skills and beyond.
Rate This Guide
How helpful was this guide? Click to rate: