Web Development with AJAX

Abstract

AJAXstands for Asynchronous JavaScript and XML where interactive web applications can be created to respond to the user requests immediately. The main components of theAJAXconsist of the different tools and programming languages that construct the technology such as dynamic HTML (DHTML), JavaScript, Extensible Markup Language (XML), Cascading Style Sheets (CSS), Document Object Model (DOM), and Microsoft object XMLHttpRequest. The concept behind theAJAXis to allow users to be interactive with the web page by updating the web pages immediately instead of waiting for the HTTP request to travel back and forth to the server to upload the page over and over with every request the user can make on the page (SearchWinDevelopment.com, 2008).

One of the most important feature of the AJAX, is that it doesn’t require any installations process to plug-in into any browser, since most of the browsers support the AJAX techniques and the technology relies on the XMLHttpRequest technology. Using the web applications that are built withAJAX, allow the construction of an engine that work in immediate response between the users, and the server without the need of reloading the web page. Such engine works in the background using JavaScript to interact with the web browser. JavaScript evaluates the user inputs, and sends the calls to theAJAXengine that can immediately response to the calls. If the engine requires additional information, it usually requests such information from the server via XML while the engine simultaneously updating the web page (SearchWinDevelopment.com, 2008).

Traversa (n.d.) explained thatAJAXis not a technology in itself, but it’s a combination of different technologies. The traditional web applications usually use the web server with every user’s request to respond to the users by sending a new web page back with the required information. This process makes the application slow; and less interactive with users. WithAJAX, web applications send requests to the server via SOAP or XML-based web services to retrieve only the required data while on the client side, JavaScript processes the responses of the web server. The result of the above process; is more responsive interface, since the amount of data required between the browser and the server is reduced to the minimal based on the request.AJAXadded new features to the traditional web application such as:

  • Mixing XML technology with xhtml in its mechanism.
  • Reduces the trips to the server significantly sinceAJAXeliminates the speed bottlenecks that usually occur with the traditional web applications. That allows the web pages to load quicker.
  • AJAXisn’t a technology but rather a technique that combines different technologies such as XML, DHTML, CSS, XHTML and such technique has to be used effectively to produce the best results.
  • In the heart of the AJAX XMLhttprequest object which allows data to be transferred asynchronously which means the ability to handle process independently away from other processes (synchronous process means that processes are dependent upon other processes).

Why AJAX?

Kyrnin (n.d.) explained that most of the traditional web applications are slow and have a lot of waiting time for end-user before things get in place to be interactive with the end-user again. With the revolution ofAJAX, that concept of interactive web pages had changed to the better. WithAJAX, the Web browser renders the web application, and handles any requests that the end-user might have via theAJAXengine, and can hold any information in the engine itself while allowing the users to interact with the application. While the interaction between the users and the server in the web applications is synchronous, AJAX allow such processes to be asynchronously interactive with the server, and reduce the waiting time for users to interact with the application. Some of the features that theAJAXcan add to any web applications are the following:

  • Form validation – It’s easier to validate data entry on the client-side than do the trip to the server to validate the data.
  • Comments – It’s always very interactive to users to see the comments on the page immediately based on the user’s behaviors.
  • Filtering data – usingAJAX to filters large table, and sort the data based on the client request without any trips to the server.
  • Refresh the page – With AJAX there’s no need to refresh the current page for the information that was submitted, the information will be dynamically change without the use of new page.

AJAX Promotes the Development of Web Software

Powell (2006) explained that web applications gained a lot of improvement through the use ofAJAXwhere it enables the dynamic asynchronous web experience to the web users. With traditional web application, a tremendous amount of redundant information, with AJAX design pattern, such applications need to download the page layout, and its structure once the data get updated as needed which reduce the application’s bandwidth footprint per user session significantly. Such technique also free a lot of the server resources that used to handle a lot of requests with the traditional web applications. Another big aspect ofAJAXthat reduces the impact on the network and the web server architecture is the cache-control handled by theAJAX.

Begoli (2005) explained thatAJAXpromotes the web usability and structure applications enhancement. The design pattern in AJAX focus on usability, increase the user capabilities of being interactive with the web site, limits the bandwidth usage, reduce the problem with the HTTP stateless, and avoid the complexity of the JavaScript. Some of the features thatAJAXoffers for design principles in web applications are:

  • Reduce the traffic between browser and server.
  • Usability of various parts of the web application.
  • Ensures that most of the events are handled locally, and requesting the server-side interaction only when the data is not available locally.
  • Intensive use of local cache byAJAXthat can be maintained locally by theAJAXengine.
  • Predictive download from the server for the auxiliary information once the main information has been loaded to the page.
  • AJAXcodes contain browser-Agnostic components.

Conclusion

Meriaz (2006) stated thatAJAXcombines the aspect of the most valuable tools and languages for web development to allow an interactive communication between the end-user and the website’s server.AJAXeliminates the page refreshing, and reduces the wait time for users to interact with the web pages. WithoutAJAX, web application has to process the end-user inputs data and sends such data via HTTP request to the web server to retrieve information, and then the server returns the proper HTML to the end-user.

Such delay that happens due to the lifecycle of the process back and forth is almost reduced to zero delay by using theAJAXtechniques.AJAXminimizes the communication between the user interface, and the server, and optimizes the web application performance. WithAJAX, web applications start to have the look and the feel of the desktop applications (Meriaz, 2006).

Finally,AJAXpromotes a decent web design patterns, and promote usability and standards in the web development. Such pattern, will reduce bugs, and promote maintainability and scalability within the web development lifecycle.

References

Begoli, E. (2005) AJAX: A Fresh Look at Web Development [Online]. Available from: http://www.devx.com/webdev/Article/28456 (Accessed: 27 March 2010).

Kyrnin, J. (n.d.) What is Ajax? Building Web Applications Just Got More Fun [Online]. Available from: http://webdesign.about.com/od/ajax/a/aa101705.htm (Accessed: 27 March 2010).

Meriaz, Y. (2006) Back to the Future with AJAX [Online]. Available from: http://www.drdobbs.com/web-development/184407879 (Accessed: 27 March 2010).

Powell, T. (2006) AJAX is the future of Web app development [Online]. Available from: http://www.networkworld.com/research/2006/071706-ajax-future.html (Accessed: 27 March 2010).

SearchWinDevelopment.com (2008) AJAX definition [Online]. Available from: http://searchwindevelopment.techtarget.com/sDefinition/0,,sid8_gci1107521,00.html (Accessed: 27 March 2010).

Traversa, E. (n.d.) What is Ajax And What Is It Good For [Online]. Available from: http://www.masternewmedia.org/interface_design_technologies/Ajax/what_is_Ajax_and_what_is_Ajax_good_for_20051101.htm (Accessed: 27 March 2010).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: