Forms are a common part of web applications. They provide a method for the user to interact with the web application. However, forms in traditional applications require entire web pages to be refreshed every time they are submitted. This model is inefficient and should be replaced with Ajax-enabled forms. Ajax is a set of web development technologies that enables web applications to behave more like desktop applications, thus allowing a richer, more interactive and more efficient model for interactions between the user and the web application. This paper presents a refactoring system called Form Transformation Tool (FTT) to assist web programmers refactor traditional forms into Ajax-enabled forms while ensuring that functionality before and after refactoring is preserved.
TopIntroduction
Web 2.0 is responsible for the growth of Rich Internet Application (RIA) technologies. Rich Internet Application (RIA) (Driver, Valdes, & Phifer, 2005) technologies now dominate Web 2.0 applications to provide richer, faster and more interactive experiences by only changing updated information instead of reloading the entire web page every time when a user requests a change (Paulson, 2005). One of the most popular RIA technologies is Ajax (Asynchronous JavaScript and XML) which is a set of web development technologies that allows web applications to be more interactive. It enables web applications to be updated without reloading the entire page; thus, improving the user experience (Zakas, McPeak, & Fawcett, 2007).
Ajax is comprised of five different technologies (Garrett, 2005):
- 1.
XHTML and Cascading Style Sheets (CSS) as the presentation layer.
- 2.
Document Object Model (DOM) trees being used for dynamic display and interaction.
- 3.
XML for data interchange and manipulation.
- 4.
XMLHttpRequest to asynchronously retrieve data.
- 5.
JavaScript to bind everything together.
In traditional form based web applications, users on the browser (client) side trigger an HTTP request to the server side by either clicking on a link or a submit button. The server side processes this request and returns an entire HTML page back to the user. With the Ajax model (Figure 1), an Ajax engine runs within the browser to communicate with the server. This engine performs interactions and updates selected elements within the web page. The engine sends an asynchronous request to the server to retrieve new data if required. This asynchronous request does not interfere with the user’s interaction with the application (Zakas, McPeak, & Fawcett, 2007). Some examples on Ajax technology applications include: Google Maps (http://www.facebook.com/). Ajax applications are designed to significantly reduce waiting time. Card’s research (Card, Robertson, & Mackinlay, 1991) argues that for a system to be seen as responsive, it has to respond in 0.1 seconds or less. The users will perceive a delay if the system takes one second to respond; and after ten seconds of waiting, they will abandon the task and move on. However, the Web still has many traditional forms, and transforming these forms into Ajax-enabled forms is not straightforward.
Figure 1. Ajax web application model