Ajax approach
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
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 The working sample can be seen at . 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.
ÃÂll 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.
This entry was posted on Thursday, August 18th, 2005 at 3:44 pm and is filed under Articles & Reports. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.
Comments
This entry has no responses