AJAX Development

What Is AJAX?

AJAX is an acronym that stands for Asynchronous JavaScript and XML, and it describes a set of development techniques used for building websites and web applications. According to web developer and Skillcrush WordPress instructor Ann Cascarano, the best way to understand AJAX is to start with identifying its specific purpose in the web development process. AJAX’s core function is to update web content asynchronously (the “A” of AJAX), meaning a user’s web browser doesn’t need to reload an entire web page when only a small portion of content on the page needs to change.

One of the most ubiquitous examples of asynchronous updating is Google’s “Google Suggest” feature. When you enter a search query into Google’s search bar and the Google website automatically begins offering auto-complete options while you type, that’s AJAX in action. The content on the page changes (in this case, the auto-complete options in the search bar) without having to manually refresh the page (something that would make Google Suggest impractical to use). Features like Google Suggest are a fundamental part of contemporary web browsing, which points to how essential AJAX is in web development. In addition to Google Suggest, Cascarano says that AJAX is commonly used to update features like status and notification bars, online forms, comments sections, and surveys and polls. But what exactly are the “J” and “X” of AJAX and how do they make asynchronous updating possible?

JavaScript and XML

As mentioned above, the “J” in AJAX stands for JavaScript. JavaScript is a type of scripting language—coding languages used to automate website processes so web developers don’t have to individually program each instance of the process that appears on a page. In JavaScript’s case, it’s used specifically to create, add, and manage dynamic website content. In other words, after markup languages like HTML and CSS are used to build and display static web features (headers, fonts, paragraphs, etc.), JavaScript is then used to control features that require real time updates while a visitor is viewing a page (think interactive maps, animated graphics, scrolling video, jukeboxes, etc). Since JavaScript is in the business of updating page content without requiring viewers to manually reload entire pages, it’s a critical component for AJAX’s asynchronous updating.

The “X” in AJAX is XML (Extensible Markup Language). As its name suggests, XML is a markup language, which means it’s in the same family as languages like HTML and CSS. Markup languages are coding languages used to annotate parts of a web document that are intended to give web browsers instructions about how to understand, process, and display a web page, versus the actual text intended to be displayed on the page. While HTML and CSS focus on instructing how page content is displayed (paragraphs, headers, fonts, colors, etc.), XML is used to transfer data stored on the page to the browsers that view it. Individual computer systems are often incompatible with one another and can’t understand or interact with data formatted by a different system. XML allows developers to bypass this obstacle by storing data in plain text format between XML tags. By doing this, XML offers a way of storing, moving, and sharing data that isn’t dependent on a particular software or hardware system (something that’s crucial for the internet, where data needs to be available and understandable across all software and hardware platforms). RSS feeds—subscription web feeds that allow users to access content from blogs and news sources as they are updated in real time—are built with XML and are an example of the language’s practical data-sharing capabilities. But how does XML combine with JavaScript to form AJAX?

How Does AJAX Work?

According to Cascarano, JavaScript and XML combine to make asynchronous updating happen through the use of something called an XMLHttpRequest object. When a user visits a web page designed to make use of AJAX and a prescribed event occurs (the user loads the page, clicks a button, fills out a form, etc.) JavaScript creates an XMLHttpRequest object, which then transfers data in an XML format between a web browser (the program being used to view the website) and a web server (the software or hardware where a website’s data is stored). The XMLHttpRequest object sends a request for updated page data to the web server, the server process the request, a response is created server-side and sent back to the browser, which then uses JavaScript to process the response and display it on the screen as updated content.

To recap: JavaScript automates the updating process, the request for updated content is formatted in XML to make it universally understandable, and JavaScript again kicks in to refresh the relevant content for the user viewing the page. Cascarano notes that the AJAX technique ignores extraneous page data and only handles requests for updated information and the updated information itself. This is really the heart of AJAX’s effectiveness, making websites and applications that use AJAX faster and more responsive for users.