What is AJAX?

AJAX stands for Asynchronous JavaScript And XML. It refers to web development techniques that use XML, HTML, JavaScript, and CSS for web service interaction allowing for faster and more interactive web applications. 

The great appeal of AJAX is that it is asynchronous, meaning it can communicate with the server, exchange data, and update the web page without having to refresh the entire page. This happens in the background and client-side so the user is unaware and their activities are not interrupted. AJAX itself is not a web service but it helps the apps (which may be a combination of java, .net, and PHP for instance) that make up a web service to “talk” via the server and receive a response seamlessly for a more intuitive user experience.

What is AJAX used for?

The Google Workspace suite of tools that includes Google Docs and Spreadsheets uses AJAX so that multiple users can be in the document editing and their updates will appear to all viewers in real-time. 

In fact, Google Maps and Google Mail also offer functionality and interactivity courtesy of AJAX. AJAX updates sections of Google Maps when you move the arrow around the page. It also supports the recipient’s suggestions when you type a few letters into the “To” textbox of an email. Even the dynamic auto-complete suggestions that appear as you’re typing into the Google search bar are due to AJAX. These kinds of features are now fundamental to our experience of using the internet and show how essential AJAX has become in web development and design.

How does AJAX work?

AJAX incorporates:

• HTML (or XHTML) and CSS to present information.
• The Document Object Model (DOM) to interact dynamically with and display the presented information.
• The XMLHttpRequest object to communicate with servers and manipulate data asynchronously.
• JSON (JavaScript Object Notation), XML, HTML, and XSLT for data interchange and manipulation.
• JavaScript to bind data requests and information display.

Jesse James Garrett is credited with coining the term Asynchronous JavaScript and XML. In a 2005 article entitled “Ajax: A New Approach To Web Applications” Garrett writes:

“The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing – retrieving data, crunching numbers, talking to various legacy systems – and then returns an HTML page to the client … This approach makes a lot of technical sense, but it doesn’t make for a great user experience. While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a task, the user waits some more.”

The solution is to combine JavaScript and XML to facilitate asynchronous updating through an XMLHttpRequest object. When a user visits a web page designed to utilise AJAX and a particular action happens – the user loads the page, clicks on a button, begins to fill out a form – JavaScript creates an XMLHttpRequest object. This then transfers data in an XML (or JSON) format between web browser and web server (the software or hardware where the website’s data is stored). The XMLHttpRequest object sends a request for updated page data to the web server, the server processes 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.

AJAX design principles

AJAX improves user experience and the functionality of web applications. There are some key attributes that make an ideal AJAX application, but it is not possible to include all of these in every application. Guidance on AJAX design patterns can help ascertain what should be prioritised and what compromises can be made. 

Usability

Ensure AJAX applications are as intuitive, productive, and fun to use as possible.

Developer productivity

Make development as efficient as possible, with a clean, maintainable code base.

Efficiency

Design AJAX applications that keep bandwidth consumption and server resources to a minimum.

Reliability

Always provide accurate information and preserve the integrity of data.

Privacy

User-generated data can and should be used to improve user experience, but privacy should also be respected. Be transparent about when and how users’ data is used.

Accessibility

AJAX applications need to be usable by everybody regardless of age, cultural background, or any disabilities.

Compatibility

As an extension of accessibility, AJAX applications should work on a wide range of browser applications, hardware devices, and operating systems.

Design patterns

Design patterns for AJAX development aim to find a balance between the principles of user-centred design and software design. They are usually classified into four groups: Foundational Technology, Programming, Functionality and Usability, and Development. So for example, a basic XMLHttpRequest object call would be classified as a Foundational Technology pattern. 

Submission Throttling such as Google predicting what you will type into the search textbox is a Programming pattern. Suggestion such as a PHP full address finder is a Functionality and Usability pattern. DOM Inspection is a Development pattern. Originally a Mozilla tool, DOM Inspector is similar to Microsoft’s Internet Explorer Developer Toolbar or Google Chrome’s Developer Tools.

What are the disadvantages of AJAX?

While as a web application development technique AJAX was designed to make web pages more responsive and interactive, it does have some limitations.

• Browser support
  Not all browsers support JavaScript or XMLHttpRequest objects. Even browsers that do have support for JavaScript and XMLHttpRequest objects, may treat them differently from browser to browser. Each browser’s implementation of AJAX must be considered.

• Security and user privacy
  Issues around security and user privacy need to be considered and addressed on a case-by-case basis when developing an AJAX application.
• Accessibility
  Because not all browsers have JavaScript or XMLHttpRequest object support, it can affect the accessibility of a web application.
• Bookmarking and navigation
  Because AJAX is asynchronous, only bits of new content are loaded onto an existing page. Browser history and bookmarks may not load up the page as you left it since the URL remains unchanged.
• Search engine
  AJAX applications are not searchable, but it is possible to use AJAX features and elements within an application that is searchable.

Decode the differences between markup languages with an MSc Computer Science

Web-based applications have come a long way in the last couple of decades to overtake desktop software applications. And as more of our everyday business and entertainment moves online, improvements and developments continue to be built upon by leaders in the field. 

Stay at the cutting edge with an online Master’s in computer science and become fluent in web service and application interactions such as AJAX and APIs. Register today and discover more about this fascinating area of computer science.