Skip to Content
Learn
Requests I
XHR POST Requests II

We are going to reconstruct the code from the previous exercise step-by-step until we have written a complete AJAX POST request.

Feel free to refer to the XHR POST diagram at any point while completing this exercise:

Instructions

1.

Create a new XMLHttpRequest object using the new operator, and save it in a const called xhr.

The XMLHttpRequest object is used in JavaScript to interact with servers.

2.

Next, save the following URL to a const called url. Make sure the URL is wrapped in quotes so that it is a string.

https://api-to-call.com/endpoint

The URL will direct the request to the correct server.

3.

Create a new const called data, and save this line of code to it:

JSON.stringify({id: '200'});

JSON.stringify() will convert a value to a JSON string. By converting the value to a string, we can then send the data to a server.

4.

Set the responseType property of the xhr object to be 'json'.

5.

Set the xhr.onreadystatechange event handler equal to an anonymous arrow function. Leave the function empty until the next step.

.onreadystatechange will contain the event handler that will be called when xhr‘s state changes.

6.

In the code block of the function you created in the previous step, add a conditional statement that checks to see if the readyState of xhr is equal to XMLHttpRequest.DONE.

7.

In the code block of the conditional statement, return the response property of xhr. The response property will contain the data that we’re getting back from the POST request.

8.

Below the function you created in the previous two steps, call the .open() method on the xhr object and pass it 'POST' and url as arguments.

.open() creates a new request and the arguments passed in determine what type of request is being made and where it’s being made to.

9.

On the following line, call the .send() method on the xhr object and pass data as an argument.

.send() will send the request to the server.

Nice work! You’ve written the boilerplate code for an AJAX POST request using an XMLHttpRequest object.

Folder Icon

Take this course for free

Already have an account?