While learning how to code, you may have run into the term AJAX and wondered what it means. Is it a programming language, a platform, or an application? Actually, it’s none of these — but by the end of this article, you’ll know what AJAX (Asynchronous JavaScript and XML) is all about.
The history of AJAX
Until the late 1990s, most websites returned complete web pages when you visited a page on the site. To reload any data, you had to reload the complete page.
This was an inefficient way of serving information to users and wasn’t very good for the user experience. It also increased the load on servers and the bandwidth needed to serve data.
In 1996, Microsoft introduced the iframe tag to Internet Explorer, which allowed the browser to fetch data in the background asynchronously. This was a step in the right direction for modern web applications.
In 2004, Google added functionality to Gmail that allowed data to be fetched in the background, and in 2005, they did the same thing for Google Maps.
Both Google’s and Microsoft’s technologies allowed developers to fetch data from a web server using JavaScript without a page reload. This technology was labeled AJAX in 2005 by Jesse James Garrett when he described how Google was accomplishing this in an article he wrote. It quickly became the most popular way to build web applications.
Now that you know a little about AJAX’s history, let’s look at how it works.
How does AJAX work?
What makes AJAX possible is a web browser’s built-in XMLHttpRequest (XHR) object. All modern browsers support this object, including:
- Chrome
- Firefox
- IE7+
- Safari
- Opera
Most JavaScript libraries that use AJAX wrap this object in custom code to make it simpler for developers to use, but we’ll look at how AJAX works in regular JavaScript.
The first step is to create a variable that will instantiate this XMLHttpRequest object for you in JavaScript, as we do here:
const request = new XMLHttpRequest();Because we want to do something with this data when we get it, like print it to a web page, we’ll attach a listener to this request that will tell us when our request has finished and retrieved the data we need.
As the term entails, AJAX requests run asynchronously. This means that the JavaScript code keeps running after making the request and doesn’t wait for a response. By attaching a listener, we can capture the response when it’s done. Here’s how we do that:
function requestListener() {
console.log(this.responseText);
}
request.addEventListener("load", requestListener);Above, we have a function that will print the response out to the JavaScript console, which we can get from the responseText attribute of the XMLHttpRequest object. We then attach this function to the load event of our request.
The next step is to use this object to open a request to a server using the open method of this XMLHttpRequest object. The open method accepts two parameters. The first is the request method to use. Here are a few of the most common methods:
- GET: This method is used to retrieve data and is the most common.
- POST: This method submits data to the requested resource and is most commonly used to create new records or for logging in.
- PUT: This method replaces current representations of data with the modified representations sent in the request.
- PATCH: This method is typically used to update part of the data at the requested resource.
- DELETE: This method is used to delete a specific resource.
The second parameter we pass to this method is the resource we want to retrieve. We’ll use a page from the example.org website and use a GET request to simply retrieve data. Here’s how we’ll retrieve the data:
request.open("GET", "http://www.example.org/example.txt");The final step is to actually send the request for the remote resource using the send method of the XMLHttpRequest object. Here’s how we would do that:
request.send();If we’re using the POST request method, PUT request method, or another method that updates the resource, we’d call this method with a parameter that contains the data we’re sending:
request.send(OUR_DATA_VARIABLE)But in our case, we’re only retrieving data, so once we execute this code, it’ll print out the contents of http://www.example.org/example.txt to the console of our web browser.
This example works to explain how AJAX functions, but AJAX is actually used for more advanced functionality in practice.
What is AJAX used for?
What you should take away from the example above is that all of the code functions in one page load. Actually, the web page with our JavaScript will load first, then our JavaScript will execute, and when it’s done, it’ll print the results of the request.
We could just as easily attach the code above to a function that executes when a button gets clicked. That would mean that every time you clicked the button, the code would execute, make the request, and print the results to the console without another page load.
And that’s the magic that changed how web development is done. With the advent of AJAX, a big part of web development moved to the front end of a web application — the part that runs in the browser. You’ve seen AJAX at work daily without even knowing it.
When you log in to a modern website, you’re presented with a form. You enter your credentials and click the login button. A loading indicator may spin for a few seconds on the page, but if you pay attention, you’ll notice that the page never actually reloads. All you’ve done is send your username and password to a server using AJAX.
The loading indicator is there for eye candy while the request completes and returns, whether you’ve entered valid credentials or not. And, if your credentials are correct, your homepage loads, most likely from another AJAX request.
Most AJAX requests in JavaScript don’t load whole web pages as we did with our example. The data is sent and retrieved in a format called JSON, a text-based format to represent data, and more JavaScript code is used to format this data as HTML and print it to the page. For example, the data sent to log in to a website would look like this in JSON:
{ username: "MyUserName", password: "MyPassword" }And once the credentials are validated, JSON will be sent back to the browser that holds the bare minimum amount of data to render the dashboard. AJAX, combined with JSON, not only makes modern web pages more responsive but saves bandwidth by sending only the necessary data to generate a web page.
Ready to learn more?
AJAX is the concept that makes the responsiveness of modern web applications possible. To make the most of AJAX, it helps to know HTML, CSS, and JavaScript. Our Learn HTML course covers the basics of the language used to create web pages.
While using AJAX, you don’t actually need to know CSS. Still, if you want to build AJAX-based applications with style, Learn CSS will show you how. But, you’ll also need to know JavaScript. Our Learn JavaScript course will teach you how to build interactive web pages that use AJAX.
JavaScript Courses & Tutorials | Codecademy
JavaScript is a fun and flexible programming language. It’s one of the core technologies of web development and can be used on both the front-end and the back-end.
Web Development Courses & Tutorials | Codecademy
Web Development is the practice of developing websites and web apps that live on the internet. Whether you’re interested in front-end, back-end, or going full-stack, the content in our Web Development domain will help you get there.
