Key Concepts

Review core concepts you need to learn to master this subject

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.

Requests I
Lesson 1 of 2
  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, yo…
  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 our Rebrandly URL Shortener API article. Keep in mind, while it’s ok to use your API key in these exercises, …
  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…

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