Ajax Without XHR

Page Updated: Mon, 23 Sep 2019 23:40 AEST (UTC+1000)

The Ajaxian aim is to allow the user to interact with the page without the need to reload it or load a new page.

From the developer point of view the chief way to achieve this is to communicate with the server asyncrhonously using the XHR object.

However there are other ways to achieve the Ajaxian aim. That is, Ajax can be regarded as including techniques that don't use the XHR object.


For example in IE you can use Microsoft's Msxml2.DOMDocument object. You ensure it's async property is set to true before you load it.

Staged Loading

You can achieve the Ajaxian aim without having to rely on the XHR object, nor Microsoft's Msxml2.DOMDocument, nor XML. For example, consider this thumbnail viewer ...

Loading Images
Click on a thumbnail to see the big version.

This is unlike most Ajax thumbnail/big image preview web pages. They either load the corresponding larger images in the background or wait until the user clicks a thumbnail before loading the larger image.

Here, except for the images, the page loads all the text and other elements. As you read the page the big images load in the background. Only when the big image has finished loading does the corresponding thumbnail appear. The user can then click on any visible thumbnail and the big image is instantly displayed. The other images continue to load in the background. That is, the intial loading of the page is performed in stages: "Staged Loading." The result is a smoother user experience.

This only uses Javascript, CSS and DOM manipulation. No XHR. No Msxml2.DOMDocument. No XML. Yet it is usefully considered to be Ajax nevertheless.

Server communication avoidance

So far these non XHR examples control server communication. Avoiding the need to communicate with the server, after initial loading of the page, can be usefully regarded as AJAX.

DHTML, Dynamic HTML, can be regarded as a subset of Ajax. Dynamic HTML traditionaly was regarded as using Javascript with (X)HTML, CSS and the DOM to animate the web page. When first coined it seemed to cover animation that was just for looks. Rather, that is, than necessarily serving any functional need of the user. With the Ajax paradigm we can rethink DHTML as animation which helps the user avoid the need for server communication.

For example the above thumbnail viewer has animation. Namely, you click on a thumbnail and the larger one appears instantly as it's already loaded in the web page. The navigation menu tree, the "ideas menu tree", on this page has animates parent nodes without communicating with the server to load a new page.

We can think of a technique that helps avoid server communication that does not employ DHTML: the client side validation of forms. That is, we use Javascript to check user's inputs, prompt them if needed, before we send it off to the server.


That's because it is useful to think, firstly, of what Ajax is achieving for the user, not how.