What even is AJAX, anyway?

AJAX is a programming concept for the creation of asynchronous web applications that can send and receive data from the server without the need for a full page reload. The functionality behind AJAX, the XMLHttpRequest object, first appeared with the release of Internet Explorer 5.0 in March 1999. The term AJAX was not coined until February 2005 by Jesse James Garret, in an article named Ajax: A New Approach to Web Applications (T4Tutorials, n.d.).

AJAX stands for Asynchronous JavaScript and XML. It is important to note that AJAX is not a programming language, but rather a combination of existing technologies that are used together to develop dynamic and responsive web applications.

Initially, AJAX was comprised of the following technologies:

• HTML or XHTML and CSS to mark up and style the information on the screen.
• Document Object Model (DOM) to dynamically display and interact with the information.
• HTML, plain text, or XML and XSLT, to transfer and manipulate data between the web server and the browser.
• The XMLHttpRequest Object built into the browser, to request and manipulate data from the server asynchronously.
• JavaScript to link all these technologies together.

Although the ‘X’ stands for XML, it has become far more common to use JSON to transport data, instead of XML and XLST, as it is written in JavaScript (Mozilla, n.d.-a).

What does it do?

AJAX allows web pages to send and request data from the server asynchronously – as in, tasks and processes are not tied to a specific timing or sequence and operate independently of one another. This means that the web page does not need to wait for a response from the server before it begins processing other tasks, allowing parts of the page to be updated in real time without the need for a full page reload. AJAX allows the client-side of a web application to communicate with the server side, which was not possible before it was introduced.

how does it work?

In the AJAX model, the event is triggered by some action in the user interface (such as the page loading, or a button being clicked). The browser then uses JavaScript to create a new XMLHttpRequest Object, which then sends a request to the server using XML. The server processes the request and retrieves any required data from the database and sends that data back to the client – also in XML. A call-back JavaScript function catches and processes the response and updates the web page to display the updated content (IBM, 2021).

An example of AJAX that you will be familiar with is Google’s Autocomplete feature, where search suggestions appear as you type. With each keystroke, the suggested results are updated based on your input (Great Learning, n.d.). Another interesting example is Netflix’s rating feature; when you like (or dislike) a movie or show, your preference is immediately saved to your database without needing to refresh the page (Davu, 2020). 

What does it mean for findability?

AJAX is very cool, but can pose some challenges with findability that are worth being mindful of. Since AJAX is generally used to load content dynamically, this can mean that the content may not be present in the HTML at the initial page load, and so it is harder for search engine crawlers to find and index that content. Additionally, AJAX-loaded content can potentially raise challenges for users using assistive technology. For example, changes in the page content may not be detected by screen readers, so the user may not be alerted to the new content. Alternatively, screen readers may detect and announce every single small change in content, creating a disruptive and noisy experience for the user. Additionally, if the new content does not automatically use focus trapping, keyboard-only users may have difficulty navigating the webpage.

AJAX is not necessarily “bad” for SEO – when done properly, these kinds of concerns are easily mitigated. Progressive enhancement and fallback content are ways to make sure that core content is indexed (McQuaide, 2018). Core content should be readily accessible without JavaScript and can be further enhanced with AJAX once the page loads. Fallback content should also include all important content in its HTML in case JavaScript fails.

Screen reader accessibility can be achieved with the correct use of ARIA attributes, as these are used to provide context and pass interactive and dynamic content to assistive technologies. (On the other hand, bad ARIA can be far worse than not using it at all) (Mozilla, n.d.-b). When developing interactive and dynamic content, make sure that everything can be navigated by keyboard alone, and manage keyboard focus as new content appears (Sarkar, 2021).

TL;DR

AJAX allows for the creation of dynamic and responsive applications that can enhance the user experience a great deal. This is a very powerful capability, but it’s important to be mindful of its implications for findability and accessibility. Following best practices ensures that developers can use AJAX to enhance their applications, while still making sure that their applications are accessible and findable.

references

Davu, S. (2020, March 12). What is Ajax and Where is it Used in Technology?. Segue Technologies. https://www.seguetech.com/ajax-technology/

Great Learning. (n.d.). Ajax – Examples. Great Learning. https://www.mygreatlearning.com/ajax/tutorials/ajax-examples

History of AJAX. T4Tutorials. (n.d.). https://t4tutorials.com/history-of-ajax/

McQuaide, S. (2018, January 29). How Google Crawls and Indexes AJAX Content — Sean McQuaide. Medium. https://medium.com/@seanmcquaide/how-google-crawls-and-indexes-ajax-content-sean-mcquaide-c5bdbd960c55

Mozilla. (n.d.-a). AJAX. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

Mozilla. (n.d.-b). ARIA. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Sarkar, K. (2021, June 8). AJAX With Accessibility. Medium. https://kuntal-sarkar.medium.com/ajax-with-accessibility-eecfc1ce4aef

What is Ajax?. IBM. (2021, March 2). https://www.ibm.com/docs/en/rational-soft-arch/9.7.0?topic=page-asynchronous-javascript-xml-ajax-overview