Ajax Without XHR

First Published (Original Date):

2005-11-09%

Last Modified (Date):

2021-07-09 12:30

Datetime Format:

EDTF with spaces.

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 asynchronously 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.

Msxml2.DOMDocument

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 thumbnail/big image preview web pages. They either load the corresponding larger images in the background at the start (blocking user interaction with any part of the page until loading has finished) or (using Ajax) wait until the user clicks a thumbnail before loading the larger image. Either can be frustrating for the user.

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 initial 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 avoid server communication, after initial loading of the page. Nevertheless this can be usefully regarded as AJAX.

DHTML, Dynamic HTML, can be regarded as a subset of Ajax. Dynamic HTML traditionally 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 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.

There are all sorts of examples of that nature:

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 animated parent nodes without communicating with the server to load a new page.
Then there's 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.

Conclusion

That is, there are all sorts of functional uses of JavaScript/(X)HTML/CSS, etc., on the client that entail avoiding (or delaying, or preparing) communication with the server. And if we conceive of Ajax as what it can be achieved for the user, some functional benefit after a page has loaded and without having to reload the page, then Ajax can be understood an an umbrella term for any such benefit. Even when not communicating asynchronously with the server to fetch XML.

Updates

2021-07-09. (From a 2005 point of view:) Clarified the problem which this solves; other rewording for clarity.