Key Concepts

Review core concepts you need to learn to master this subject

Asynchronous calls with XMLHttpRequest

HTTP POST request

HTTP GET request

The query string in a URL

JSON: JavaScript Object Notation

XMLHttpRequest GET Request Requirements

HTTP POST request with the XMLHttpRequest API

Asynchronous calls with XMLHttpRequest

const xhr = new XMLHttpRequest(); xhr.open('GET', 'mysite.com/api/getjson');

AJAX enables HTTP requests to be made not only during the load time of a web page but also anytime after a page initially loads. This allows adding dynamic behavior to a webpage. This is essential for giving a good user experience without reloading the webpage for transferring data to and from the web server.

The XMLHttpRequest (XHR) web API provides the ability to make the actual asynchronous request and uses AJAX to handle the data from the request.

The given code block is a basic example of how an HTTP GET request is made to the specified URL.

HTTP POST request

const xhr = new XMLHttpRequest(); xhr.open('GET', 'mysite.com/api/getjson');

HTTP POST requests are made with the intention of sending new information to the source (server) that will receive it.

For a POST request, the new information is stored in the body of the request.

HTTP GET request

const xhr = new XMLHttpRequest(); xhr.open('GET', 'mysite.com/api/getjson');

HTTP GET requests are made with the intention of retrieving information or data from a source (server) over the web.

GET requests have no body, so the information that the source requires, in order to return the proper response, must be included in the request URL path or query string.

The query string in a URL

const xhr = new XMLHttpRequest(); xhr.open('GET', 'mysite.com/api/getjson');

Query strings are used to send additional information to the server during an HTTP GET request.

The query string is separated from the original URL using the question mark character ?.

In a query string, there can be one or more key-value pairs joined by the equal character =.

For separating multiple key-value pairs, an ampersand character & is used.

Query strings should be url-encoded in case of the presence of URL unsafe characters.

JSON: JavaScript Object Notation

const xhr = new XMLHttpRequest(); xhr.open('GET', 'mysite.com/api/getjson');

JSON or JavaScript Object Notation is a data format suitable for transporting data to and from a server.

It is essentially a slightly stricter version of a Javascript object. A JSON object should be enclosed in curly braces and may contain one or more property-value pairs. JSON names require double quotes, while standard Javascript objects do not.

XMLHttpRequest GET Request Requirements

const xhr = new XMLHttpRequest(); xhr.open('GET', 'mysite.com/api/getjson');

The request type, response type, request URL, and handler for the response data must be provided in order to make an HTTP GET request with the JavaScript XMLHttpRequest API.

The URL may contain additional data in the query string. For an HTTP GET request, the request type must be GET.

HTTP POST request with the XMLHttpRequest API

const xhr = new XMLHttpRequest(); xhr.open('GET', 'mysite.com/api/getjson');

To make an HTTP POST request with the JavaScript XMLHttpRequest API, a request type, response type, request URL, request body, and handler for the response data must be provided. The request body is essential because the information sent via the POST method is not visible in the URL. The request type must be POST for this case. The response type can be a variety of types including array buffer, json, etc.

Chevron Left Icon
Requests I
Lesson 1 of 2
Chevron Right Icon
  1. 1
    Have you ever wondered what happens after you click a “Submit” button on a web page? For instance, if you are submitting information, where does the information go? How is the information processed…
  2. 2
    One of JavaScript’s greatest assets is its non-blocking properties, or that it is an asynchronous language. Websites, like newspaper websites, take advantage of these non-blocking properties to…
  3. 3
    Asynchronous JavaScript and XML (AJAX), enables requests to be made after the initial page load. Initially, AJAX was used only for XML formatted data, now it can be used to make requests that have …
  4. 4
    We are going to reconstruct XHR GET request boilerplate code step-by-step until we have written a complete GET request. Feel free to refer to the XHR GET diagram at any point while completing thi…
  5. 5
    By this point, you have an idea of how to write the boilerplate code for an AJAX request using an XHR object. In this exercise, you will incorporate that boilerplate code to make a GET request to…
  6. 6
    In the previous exercise, you made a GET request to the Datamuse API to find words that rhyme. In this exercise, we will create a request to set a topic and find adjectives that describe the input …
  7. 7
    Reminder: If you haven’t already signed up for an API Key from Rebrandly, please read this Rebrandly sign up guide. * Codecademy Articles: Rebrandly URL Shortener API . Great! By this point you…
  8. 8
    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 comp…
  9. 9
    Reminder: If you haven’t already signed up for an API Key from Rebrandly, please read the article: * Codecademy Articles: Rebrandly URL Shortener API . In this exercise, you’ll be making a POST…
  10. 10
    You’ve done an amazing job navigating through making XHR GET and POST requests! Take some time to review the core concepts before moving on to the next lesson. 1. JavaScript is the language of the…
  1. 1
    In the previous lesson, we spent a lot of time dealing with asynchronous data (remember AJAX/ Asynchronous JavaScript And XML?). Many of our web page interactions rely on asynchronous events, so ma…
  2. 2
    The first type of requests we’re going to tackle are GET requests using fetch() MDN: Fetch API . The fetch() function: Creates a request object that contains relevant information that an API…
  3. 3
    We are going to reconstruct the boilerplate code necessary to create a GET request using the fetch() function step-by-step. Feel free to refer to the fetch() GET diagram at any point while comple…
  4. 4
    In the previous exercise, you wrote the boilerplate code for a GET request using fetch() and .then(). In this exercise, you’re going to use that code and manipulate it to access the Datamuse API an…
  5. 5
    Great job making it this far! In the previous exercise, you created the query URL, called the fetch() function and passed it the query URL and a settings object. Then, you chained a .then() metho…
  6. 6
    In the previous exercise, you successfully wrote a GET request using the fetch API and handled Promises to get word suggestions from Datamuse. Give yourself a pat on the back (or two to treat yours…
  7. 7
    We are going to reconstruct the code from the previous exercise step-by-step until we have written a complete POST request using fetch() and .then(). Feel free to refer to the fetch() POST diagram…
  8. 8
    In the previous exercise, you created the boilerplate code for making a POST request using fetch() and .then(). In this exercise, you’re going to update that boilerplate code to allow you to shorte…
  9. 9
    In the previous exercise you’ve positioned yourself to make the POST request by providing the endpoint and the object containing all the necessary information. In this exercise you’ll handle the re…
  10. 10
    You’re almost done with the POST request you started a few lessons back! In fact, this time you’ll add another .then() to the chain to finally make the information available to your webpage! If y…
  11. 11
    Let’s take a minute to appreciate what you’ve accomplished so far: used fetch() to make GET and POST requests. check the status of the responses coming back * catch errors that might possibly …
  12. 12
    We are going to walk through and recreate the boilerplate code necessary to create a GET request using the async and await. Here are some key points to keep in mind as we walk through the code: * …
  13. 13
    In the previous exercise, we created the boilerplate code for making a GET request using async and await. In this exercise, you’re going to build on previously created boilerplate code to get nou…
  14. 14
    Now that you’ve made an async GET request, let’s start on getting you familiar the async POST request. As with the other GET and POST requests that you’ve been making, an async POST request requi…
  15. 15
    Now we’re going to piece together a POST request using async and await. Feel free to refer to the async/await diagram below at any point while completing this exercise: * async/await POST diagram
  16. 16
    Since you’ve created the boilerplate code for a POST request, the next step is to incorporate that experience and logic into making a real request. In this exercise, you’ll need to retrieve your …
  17. 17
    Let’s recap on the concepts covered in the previous exercises: 1. GET and POST requests can be created a variety of ways. 2. Use AJAX to asynchronously request data from APIs. fetch() and async/…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo