• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 8/5/19

Make your first AJAX request

Log in or subscribe for free to enjoy all this course has to offer!

Don't let all the acronyms you just learned freak you out! We'll start with a simple AJAX example that puts into practice many of the JavaScript examples you've learned in this course so far.

Following along

You have two options for following along, depending on how comfortable you feel setting up a server on your computer.

Easy

Use CodePen. Test the examples by linking to HTML or JSON content in other CodePens. Read more about CodePen and AJAX here: https://blog.codepen.io/2013/09/23/ajax-codepen/

Less easy (but probably necessary someday)

AJAX will not work when you're opening local files on your computer! For security reasons, it only works when the code is running on a web server. This is to make sure you're not accessing data from websites you're not supposed to.

To test out the following examples, you have several options to set up the requisite web server. Since I already have the programming language Ruby on my machine, I can run the command:

ruby -run -e httpd . -p 5000

from Terminal when I'm already within the same directory as your HTML. I navigate to http://localhost:5000 to see your page.

Alternatively, you can get a server up and running quickly with MAMP (Mac) or WAMP (Windows). Installation is very fast, and you'll navigate to http://localhost plus an optional port number, depending where you set it up.

Once you have a server set up, here's the file structure you'll need in order to work through the example: Download the file set

Grab HTML via AJAX

File directory

  • ajax_example.html

  • surprise.html

  • css (folder) containing styles.css file

CodePen equivalent: http://codepen.io/eclairereese/pen/rLMzeY

Whether you're setting up the files on your computer, or simply working with CodePen, you'll have a main HTML file, CSS stylesheet, JavaScript file, and an additional HTML file.

We're going to grab the contents of the second HTML file and insert it into the first page.

Here's the main HTML page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/styles.css">
        <title>AJAX practice</title>
        <script>
        </script>
    </head>
    <body>
        <h1>Today's your special day!</h1>
        <button id="reveal">Why's that?</button>
        <div id="ajax-content">
        </div>
    </body>
</html>

Here's the content you'll put in surprise.html (if on your computer) or in a separate pen (if using CodePen):

<h1 id="birthday-greeting">It's your birthday!</h1>

surprise.html is the file we'll load from within ajax_example.html  - via AJAX!

Main HTML page
Main HTML page

Introduction to XMLHttpRequest

XMLHttpRequest is a mouthful. It's a system that lets data be transferred between a client and a server. As you learned, this normally happens via request and response. The same is true with XMLHttpRequest, except you can grab data from a URL without the page refreshing!

Think to a time you've used Facebook or Gmail. You've performed actions without reloading an entire page. You've left comments that post instantly while you're on the same page, for example. That's what AJAX allows!

Your first AJAX call

1. First, you'll create an XMLHttpRequest object.
2. Open your request with the open method.
3. Send the request with the send method.

You need to create an XMLHttpRequest object for every AJAX request you make. Let's see how this looks in a code example.

// 1. create a new XMLHttpRequest object -- an object like any other!
var myRequest = new XMLHttpRequest();
// 2. open the request and pass the HTTP method name and the resource as parameters
myRequest.open('GET', 'surprise.html');
// 3. write a function that runs anytime the state of the AJAX request changes
myRequest.onreadystatechange = function () { 
    // 4. check if the request has a readyState of 4, which indicates the server has responded (complete)
    if (myRequest.readyState === 4) {
        // 5. insert the text sent by the server into the HTML of the 'ajax-content'
        document.getElementById('ajax-content').innerHTML = myRequest.responseText;
    }
};

Now, we need a function to call within the page when the button is clicked. Since a button click will send the AJAX, why not name it sendTheAJAX?

function sendTheAJAX() {
    myRequest.send();
    document.getElementById('reveal').style.display = 'none';
}

This function also hides the original button, leaving only the newly revealed text via setting display to'none'. Now, add this new function back to your HTML in this line:

<button id="reveal" onclick="sendTheAJAX()" class="button">Why's that?</button>
Main HTML page *with* other HTML inserted via AJAX
Main HTML page *with* other page's HTML, grabbed via AJAX

The XMLHttpRequest object

The XMLHttpRequest object lets you create HTTP requests via JavaScript. Like all objects, it has properties. Here are some important ones that we used:

.readyState: returns the state of the request, acknowledged in the next method.
.onreadystatechange: we used this! It's an event handler called whenever the readyState attribute changes.
.responseText: returns a string in the DOM containing the response to the request as text (it will be null if there was a problem). Our  responseText  was the content of surprise.html.

The object has two key methods you can use. We used both in our example:

.open: initialize a request (you'll set up the details inside).
.send: send the request!

Summary

  • The JavaScript object XMLHttpRequest lets you send HTTP requests.

  • Its open method lets you configure the request.

  • Its send method sends the request to the desired URL. 

Example of certificate of achievement
Example of certificate of achievement