AJAX is one of those terms we often hear in the world of web development. The term can be confusing at first because AJAX is not a programming language or a stand-alone product. Instead, it’s a technology that uses existing languages and technologies in a new way. As a result, it speeds up certain tasks on your website and improves the user experience. Fortunately, AJAX isn’t difficult to use with WordPress. In this post, we’ll explore what AJAX is, see how it works, help you decide if or when you need it, and see how to implement it on your WordPress website.
What is AJAX?
AJAX, or Asynchronous JavaScript and XML, is a programming concept that describes web development techniques to create asynchronous web applications. This allows a website to send and receive data from the server in the background without having to refresh the page. It now uses JSON in place of XML, but no one wants to change the name to AJAJ, so we still call it AJAX.
The information can be marked up and styled with HTML and CSS and can be dynamically displayed with JavaScript. Users can receive and interact with that information dynamically. This adds a higher level of quality and usability to the website. For more information about dynamic websites, see the Verpex article Static vs Dynamic Website.
Why We Need AJAX (with a brief history of the web)
AJAX was created to solve the problem of page loading on HTML websites. In the early 1990s, every time something on the page changed, including interactions where a user made a choice, the entire page was reloaded. This greatly limited bandwidth and server load.
To help with this, Internet Explorer introduced the iFrames tag in 1996. It worked asynchronously and paved the way for AJAX in 1998 which appeared in Internet Explorer 5.0 in 1999. It then appeared in most of the popular web browsers. Google and several other companies started using it and it became popular among developers. W3C began standardizing AJAX in 2005. The latest standardization is from 2016. With AJAX as a standard, it can work cross-browser and cross-platform to deliver a seamless user experience.
One of the main advantages of adding AJAX to a WordPress website is it makes the website more user-friendly. For more information about making your website user-friendly, see the article User-Friendly Website Tips here on the Verpex blog.
Data Transfer Without AJAX
Without AJAX, the process of transferring the data to the user would look like this:
User interaction with the browser (such as a search)
The HTTP request is sent to the server
The server gets the data from the database
HTML and CSS are sent to the browser
The browser refreshes to show the new HTML page
Data Transfer With AJAX
With AJAX, the process of transferring the data to the user would look like this:
User interaction with the AJAX engine (such as a search)
The AJAX engine requests data from the server
The server gives the data from the database
The data is sent to the AJAX engine
The browser shows the information along with the proper HTML and CSS data without refreshing the page
Why AJAX is Better
At first, the number of steps seems to be the same. However, the for AJAX steps are simpler, faster, and more efficient. The web browser doesn’t need to rebuild the entire page with all of the HTML and CSS to create it. Only the data in the AJAX engine (such as a search result) is refreshed. The amount of data transferred is reduced and the data transfer is faster.
The Concept of AJAX
AJAX isn’t a markup or programming language. Instead, it’s a technology concept. As a concept, AJAX uses several current technologies that implement applications that interact with the server in the background. So, instead of being a programming language, it uses programming languages. Here are some of the main technologies that make AJAX work and what they do:
XMLHttpRequest
This is the object used for asynchronous communication between the browser and the server.XML or JSON
This is used for data interchange. Most modern AJAX implementations use JSON (JavaScript Object Notation) in place of XML (Extensible Markup Language). You can also use text files or preformatted HTML.DOM (Document Object Model)
Dynamically displays the data and the interaction with that data.HTML and CSS
Hyper Text Markup Language and Cascading Style Sheets work together to present the data to the user.JavaScript
This brings all the technologies together.
With AJAX, events are data-driven rather than page-driven. It can be triggered with a button, an enter key, or even a mouse hover.
Technologies That Use AJAX
Anyone that’s spent more than a few days on the web has interacted with AJAX. If you’ve interacted with something and received some sort of data without the page refreshing, chances are high that you’ve interacted with AJAX. AJAX is everywhere.
For example, if you enter text into the search box here at the Verpex blog you’ll see some search suggestions appear in the search box as you type. The search engine is asynchronously sending your inquiry to the server and displaying options for you to choose from. This search box uses AJAX to provide suggestions, which makes the search faster and more efficient for the user. This feature is only viable with technology like AJAX.
You can see this in the image below. I’ve searched for WordPress and the search box has provided lots of article titles in the Verpex blog for me to choose from. This happened immediately without the page reloading.














