Ajax — approach for a smooth web-content refresh.
The majority of the web-sites use a common principle for getting information: user requests a page – the entire page reloads with the information requested. People got used to this standard and can barely imagine something different. Yet this approach contains a bunch of drawbacks. Among them is the necessity to reload consistent such as header and footer. This eats extra bandwidth, consumes time and does not provide an immediate feeling of feedback within the user experience.
However, a different way exists that allows loading only partial and required content. Thus, the data on the page refreshes without reloading entire page. This method is not entirely new, but has gained a lot of attention after it was given the name “Ajax”. Although it has many advantages, it can also has drawbacks.
First, there is no single standard on the technical realization; hence developers need to resolve the task with different means to make sure it works in all browsers and OS. Otherwise, it’s quite likely that the web-site developed will work in a few browsers only. Second, the realization itself is typically featured by increasing complexity, and thus the efforts and financial costs appear higher while the reliability falls down.
Let’s take a look at one example from a recent project that displays the Ajax engine of dynamic content loading on the web-page. This web-tool allows browsing Philadelphia colleges by selecting the proper category (see screen shot below).
On the web-page, content is visually broken down into three groups (from the left to the right):
- Types of majors
- Programs available within each major
- Schools that offer these programs
Majors contain a variety of programs, which include a number schools. Content is refreshed depending on the user’s choice.
Let’s take a look inside to understand how it works technically. Besides the visual part, the web-page contains a hidden JavaScript code which talks to the server, refreshes browsed content and processes the user’s requests (see schema below).
As a user clicks an item in the web-tool, the Java Script code processes the user action. A special programmable system object is called. Depending on the type of browser, such an object could be an instance of Msxml2.XMLHTTP, Microsoft.XMLHTTP or XMLHttpRequest.
All communication with the server goes thru this object. The server prepares and returns content to the client in JavaScript and then the content is inserted into the web-page using a combination of DHTML and JavaScript methods. Thus, the content refresh happens without reloading the web-page.
The biggest outcome of such an approach is the significant lowering of the traffic between server and the improved interaction between web-application and user. And we know pretty well the rule of thumb: where equal system features exist, the user will choose the system with the better user experience.