AJAX and its usability in web development

Ajax is not a programming language or a tool; it's a concept, a combination of technologies used in a certain way. AJAX is a smorgasbord of web technologies put together to allow dynamic client-server interactions to occur in web applications without requiring pages to reload or refresh. An advantage of AJAX is that Web browsers do not need to refresh the whole page. They only need to reload a portion of the page, which makes the Website load faster and increases performance, because users can receive responses from the server faster than in classical Web applications. Ajax was originally an acronym for Asynchronous JavaScript and XML. “Asynchronous” means that multiple events are happening independently of one another. That means the loading process of your scripts will not interrupt the rendering of your webpage. This allows your web page to render more quickly as parsing is not paused every time a script must be loaded. This also allows for multiple scripts to be loaded concurrently which is beneficial given that one script does not depend on another.

The traditional way of loading scripts is by using the synchronous method. This method simply downloads and executes any scripts that it encounters during the rendering of a web page. This can result in slower page load times if scripts that are not required to display the page are interrupting the critical path.

AJAX uses the following technologies -

• XHTML (or HTML) and CSS to create an interface and visually style information. The XHTML and CSS elements can be dynamically modified to display new information or styling.

• Document Object Model (DOM) for dynamically interacting with and displaying the presented information.

• JavaScript is used to manipulate the interface elements and is also used to establish a communication with a web server through XMLHttpRequest. This allows data typically in XSLT, XML or JSON format to be transmitted between the client and the web server without requiring page reloads or refreshes.

How does Ajax work?

In the conventional method, we generally observed that the browser wants to make a request to the web server for some data. Therefore the following takes place -

• An HTTP request is made from the browser to the web server. Therefore, the user must wait for this request to be processed and return a response before they can see the data requested.

• The request reaches the web server and retrieves the appropriate data.

• The requested data is then sent back to the browser and the user is able to see that data.

The following takes place when requesting the same data, but in Ajax method -

• The browser performs a Javascript call to the Ajax engine. In other words, create an XMLHttpRequest object.

• In the background, an HTTP request is made to the server and the appropriate data is retrieved.

• HTML, XML, or Javascript data is returned to the Ajax engine which then delivers the requested data to the browser.

The way Ajax works is quite simple. Using this method, the user does not experience any downtime from the point when they made a request to the point when they receive the actual information.

Why should you use AJAX?

• The main purpose of Ajax is to improve the speed, performance, and usability of a web application.

• Using AJAX, web applications can allow high levels of interactivity and processing. With AJAX, all of the steps of a web page can be handled in one interface. Examples of AJAX implementation are mapping applications, real-time searches, chats, real-time form validation and processing, live shopping cart applications, e-mail applications, and the list goes on.

• Ajax-enabled applications will always be more responsive, faster and more user-friendly.

• JSON (JavaScript Object Notation) is much easier to use with JavaScript than XML. When it comes to Ajax and JavaScript, JSON Web Services are replacing XML Web Services.

• Another advance to JavaScript and Ajax is the JavaScript object library called jQuery. This free, open-source software is a wrapper around JavaScript. jQuery is used to easily write client-side JavaScript to navigate and manipulate a page and make asynchronous Ajax callbacks.

• Ajax allows you to make asynchronous calls to a web server. This allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more.

• By using jQuery and JSON Web Services, Ajax callbacks have become standard programming practices for designing and developing web applications.

• The Ajax Control Toolkit is a suite of controls created by Microsoft that is integrated into Visual Studio and can be dragged and dropped onto web forms just like HTML and server controls. These controls are intended to be used for Ajax callbacks.

• Using XMLHttpRequest, data is transmitted behind the scenes of your web application and JavaScript is used to manipulate the application interface and display dynamic information.

• With AJAX, the content update may appear in a different location on the same page. In these cases, it is generally necessary to inform the user of this update or by setting focus to the newly updated content area. When content is updated dynamically, it has the potential to introduce accessibility issues. While accessibility guidelines allow you to use JavaScript to create and update interface elements, they require that these elements be accessible.

The usability of Ajax

• Ajax should be used anywhere in a web application where small amounts of information could be saved or retrieved from the server without posting back the entire pages. A good example of this is data validation on save actions. Another example would be to change the values in a drop-down list-box based on other inputs, such as state and college list boxes. When the user selects a state, the college list box will repopulate with only colleges and universities in that state.

• Another great example is when the client needs to save or retrieve session values from the server, based on a user preference such as the height, width or position of an object. Adjusting the width could make a callback to the server to set the session variable for the new width. This way, whenever the page is refreshed, the server can adjust the object’s width based on this session variable. Otherwise, the object would go back to its initial default width.

• Segue recently used Ajax to support a client application that had problems due to limited bandwidth and page size. The combination caused the application to take too long to retrieve data and display it on the page. Sometimes, the web server would simply not have the resources to handle the request and timeout. The best solution for this issue was Ajax.

• To solve this problem, JSON Web Services was created on the web server in order to retrieve the details about the selected item. The JSON web service would retrieve the data and convert into JSON and return a JSON string. Instead of posting back to the server, the client would call the web service when an item was selected from the list box. We used jQuery to make an asynchronous Ajax call to the web service. Once the client retrieved the data back from the web service, more client-side processing was done to display the information on the page. The time it took to display the details on the page after the item was selected was instantaneous. There was no page flicker, refresh or postback involved.

• Other features include text hints and autocomplete text boxes. The client types in a couple of letters and a list of all values that start with those letters appear below. A callback is made to a web service that will retrieve all values that begin with these characters. This is a fantastic feature that would be impossible without Ajax and is also part of the Ajax Control Toolkit.

Real-World examples -

Amazon.com - Amazon (http://amazon.com) has begun incorporating Ajax features only recently, but it blazed the trail for Lazy Registration a long time ago. Visit Amazon (http://amazon.com) as a new user, browse for just a few seconds, and you’ll see the changes that never seen before even beginning to register or log in.

Kayak - Kayak (http://kayak.com) is a travel search engine that retains queries you’ve made. A query history is available for unregistered users and becomes part of your profile once registered.

Memeflow - Steve Lacey’s MemeFlow (http://memeflow.com) is a portal with RSS-backed Portlets. Its use of Lazy Registration is characteristic of several other portals (Figure 17-3). You can immediately build up a collection of your favorite feeds, and when you provide your username and password, later on, those feeds will remain.

Palm Sphere - Palm Sphere (http://palmsphere.com/store/home) showcases Palm applications for download and purchase. Each item has a Favorite button—if checked, the item is one of your Favorites. The Favorites list is summarized in your Member Center area, even if you’ve never registered, and retained in a cookie for the next time you visit.

Blummy - Alexander Kirk’s Blummy (http://blummy.com) is a bookmarklet manager (Figure 17-4). You can start adding bookmarklets to a personal "Blummy" container straightaway (this has a unique URL). When you register, you’ll get a URL with your own name, but the old URL remains valid, so you can keep the bookmark you created before registering.

Netflix - A great example of Ajax is the movie rating feature on Netflix. The user rates a movie and their personal rating for that movie will be saved to their database without waiting for the page to refresh or reload. These movie ratings are being saved to their database without posting the entire page back to the server.

Google Maps - A user can drag an entire map by using the mouse, rather than clicking on a button. https://maps.google.com/

Google Suggest - As you type, Google offers suggestions. Use the arrow keys to navigate the results.  https://www.google.com/webhp?complete=1&hl=en

Gmail - Gmail is a webmail built on the idea that emails can be more intuitive, efficient, and useful. https://gmail.com/

Yahoo Maps (new) - Now it's even easier and more fun to get where you're going!  https://maps.yahoo.com/

 

As mentioned above, it is usually preferred to load scripts using async (in Ajax method) over synchronous. Google includes site speed as a ranking factor, loading the page as quickly as possible is important both for the SERPs as well as user experience. When implementing the asynchronous attribute to scripts, not only should there be a focus on scripts which are irrelevant to loading the initial web page, but also scripts which are used below the fold. Thank you!