An Introduction to AJAX for Front-End Designers

This tutorial series aims to familiarize front-end designers and newbie developers with AJAX, an essential front-end technique.

In this first tutorial, we’ll cover the basics of AJAX. We’ll start exploring different things related to it, learn exactly what it is, how it works, and where its limitations lie. Let’s begin!

Note: This series assumes that you are familiar with core front-end technologies, such as HTML and CSS.

What is AJAX?

AJAX stands for “Asynchronous JavaScript and XML”. It isn’t a single, nor a new technology. In fact, it is a group of existing technologies (i.e. HTML, CSS, JavaScript, XML, etc.) which come together to build modern web applications.

With AJAX, a client (i.e. browser) communicates with a web server and asks for data. Then, it processes the server’s response and make changes to the page without fully reloading it.

Let’s break down the AJAX acronym:

“Asynchronous” means that when a client requests data from a web server, it doesn’t freeze until the server replies. On the contrary, the user can still navigate the pages. As soon as the server returns a response, a relevant function manipulates the returned data behind the scenes.
“JavaScript” is the language which instantiates an AJAX request, parses the corresponding AJAX response, and finally updates the DOM.
A client uses the XMLHttpRequest or XHR API to make a request to a server. Think of the API (Application Programming Interface) as a set of methods which specify the rules of communication between the two interested parties. However, note that the incoming data from an AJAX request can be in any format and not only in XML format.

How AJAX Works

To get an initial idea of how AJAX works, take a look at the following visualization:

This visualization describes a typical AJAX-driven scenario:

The user wants to see more articles, so he or she clicks on the target button. This event triggers an AJAX call.
A request is sent to the server. Along with the request, different data may be passed. The request can point to a static file (e.g. example.json) which is stored on the server. Alternatively, it’s possible to execute a dynamic script (e.g. functions.php) at which point the script talks to the database (or other system) to retrieve data.
The database sends back the requested articles to the server. Next, the server sends them to the browser.
JavaScript parses the response and updates specific parts of the DOM (the page structure). Here, for instance, only the sidebar is being updated. The other parts of the page don’t change.

With this in mind, you can understand why AJAX is an important concept for modern web. By developing AJAX-powered applications, we’re able to control the amount of data that is downloaded from the server.

Live Examples of AJAX

AJAX is everywhere. To demonstrate it, let’s briefly mention a few popular sites which take advantage of it.

First, consider how Facebook and Twitter work. As you scroll down, new content appears thanks to AJAX. Second, when you upvote or downvote a question or an answer on Stack Overflow, an AJAX call is triggered. Finally, as soon as you search for something on Google or Youtube, multiple AJAX requests are executed.

Furthermore, if we want, we can monitor the requests. For example, on Chrome’s console we do so by right-clicking and checking the Log XMLHttpRequests option.

Making Requests

As mentioned above, to set up an AJAX request, we use the XMLHttpRequest API. In addition, jQuery, the most popular JavaScript library, offers several Ajax-related functions and methods.

Throughout this series, we’ll walk through different examples that use plain JavaScript and jQuery to send a request to a server.

Manipulating Responses

When we retrieve data from a web server, these can be in different formats. XML, JSON, JSONP, plain text, and HTML are possible data formats.

XML

XML (eXtensible Markup Language) is one of most popular formats for exchanging data between applications. Similar to HTML, XML uses tags to define its structure. However, note that the XML doesn’t come with any predefined tags, in fact, we set up an XML document by specifying our own tags. An example of its structure is shown below:


      
          Mike
          Mathew
          Australian
          
              English
              Spanish
              French
              Russian
          
      

There are many online editors out there which you can use to build XML documents. My favorite editor is:

XMLGrid.net.

Based on this editor, our example would be visualized as follows:

JSON

JSON (JavaScript Object Notation) is another popular data-interchange format. Using JSON, the aforementioned XML structure would look like this:


      {
        "name"        : "Mike",
        "surname"     : "Mathew",
        "nationality" : "Australian",
        "languages"	  :	["English", "Spanish", "French", "Russian"]
      }

Again, you can find many online JSON editors around the web. Here are the editors that I like to use:

Based on the JSON Editor Online tool, the previous example looks like this:

Limitations of AJAX Requests

Before we start actually using AJAX, it’s important to understand its limitations. Specifically, we’ll mention two common issues.

First, consider the following error that appears in Chrome’s console:

This error occurs when our request points to a local file. Here we’ve tried accessing data stored in a local file (i.e. Demo.json) and not in a server. To overcome this problem, we can install a local server (e.g. set up XAMPP as local development environment) and store the target file in it.

Second, look at the following error message:

This happens when we request data located on another domain relative to our page (known as same-origin policy restriction). Here, for instance, data is stored on a local server, whereas the page is stored on Codepen’s server. Fortunately though, there are solutions to this restriction.

One solution is to take advantage of the CORS (Cross-Origin Resource Sharing) mechanism proposed by W3C. Note that this mechanism requires us to make a few changes in the configuration files of our server. For example, this page describes how we can customize the Apache web server.

Another option is to use the JSONP (JSON with Padding) technique.

Conclusion

This overview should have given you a good idea of what AJAX is, where you may already have encountered it, and where some potential issues lie. It also quickly examined the most popular data-interchange formats. In the next tutorial we’ll jump into a working example. See you there!