Enriching web applications using Ajax and introduction of Green Ajax

Ankit Kumar, Arjit Gupta Students of IT Department, Ajay Kumar Garg Engineering College Ghaziabad. ankit.kumar280290@gmail.com, er.arjit@gmail.com

Abstract- Ajax is a set of different technologies that work together to create new and powerful
Web Applications. Ajax is demonstrating its usefulness in Real world applications. The most important Internet Companies as: Google, Yahoo, Amazon, Microsoft, are developing rich Web applications based on Ajax. Many developers do not know how to use these technologies to build Ajax Applications. In this paper, we present an overview about Ajax. Here, we discuss the term Ajax and the technologies used. Also, we show how Ajax is working inside, and how the technologies work together to achieve a rich behavior. Along with this we also present a revolutionary modification in Ajax known as Green Ajax. The Green Ajax outperforms than the classical Ajax. It can decrease the bandwidth consumption to/from the web server significantly.

Keywords- Ajax; Green Ajax; classical Ajax; traffic analysis; real-time; data Update; web
application;

IntroductionEven though internet speed is increasing significantly in the present, the web traffic is busier. The classic web applications usually need a lot of bandwidth to provide the rich user interfaces. Reloading the big size of web page every times will cause the big consumption of bandwidth. The new technique, named Ajax, can reduce the web server load and the data transfer between server and users computer. Recently in February 2005, the term Ajax (Asynchronous JavaScript and XML) was coined by Jesse James Garret. The term Ajax attracted the interest of Web developers community, because after that the essay appeared, there were plenty of comments, discussion and an explosion of questions about how to use this technique, its capabilities and shortcomings. The strongest demonstrations of the usefulness and popularity of this technique in web design with real Web applications are: Google Maps, Google Suggest, Gmail, Yahoo Mail, and more recently Windows Live. Their main attraction is a widely rich interaction with the client-side, very similar a desktop application. Ajax Ajax is not new but it is a set of web technologies which can provide the interaction between the web server and client. It consists of HTML, JavaScript technology, DHTML, and DOM. If the web application uses Ajax, only a specific part in the web page can be requested to the web server. The new data will appear on the specific part in the web page. The users will not see the

blank page when the new data is requested to the server. The component technologies of Ajax are as follows. Dynamic HTML Ajax applications take advantage of dynamic HTML, which consists of HTML, cascading style sheets, and JavaScript glued together with the document object model. The technology describes HTML extensions that designers can use to develop dynamic Web pages that are more animated than those using previous HTML versions. For example, when a cursor passes over a DHTML page, a color might change or text might get bigger. Also, a user could drag and drop images to different places. XML Ajax uses XML to encode data for transfer between a server and a browser or client application. The W3C started work on XML in 1996 to enable cross-platform data interoperability over the Internet. The consortium approved the standards first version in 1998. XML is a markup meta language that can define a set of languages for use with structured data in online documents. Any organization can develop an XML-based language with its own set of markup tags. Cascading style sheets A W3C standard since 1996, CSS gives Web site developers and users more control over how browsers display pages. Developers use CSS to create style sheets that define how different page elements, such as headers and links, appear. Multiple style sheets can apply to the same Web page. Document object model The DOM, a W3C standard since 1998, is a programming interface that lets developers create and modify HTML and XML documents as sets of program objects, which makes it easier to design Web pages that users can manipulate. The DOM defines the attributes associated with each object, as well as the ways in which users can interact with objects. DHTML works with the DOM to dynamically change the appearance of Web pages. Working with the DOM makes Ajax Applications particularly responsive for users. JavaScript Released in 1995 by Netscape and Sun, JavaScript interacts with HTML code and makes Web pages and Ajax applications more active. For example, the technology can cause a linked page to appear automatically in a popup window or let a mouse rollover change text or images. Developers can embed JavaScript, which is openly and freely available, in HTML pages. Ajax uses asynchronous JavaScript, which an HTML page can use to make calls asynchronously to the server from which it was loaded to fetch XML documents. This capability lets an application make a server call, retrieve new data, and simultaneously update the Web page without having to reload all the contents, all while the user continues interacting with the program. Enterprise application developers have become more interested in working with JavaScript because users have removed some of the technologys bugs and developed workarounds for various problems. Because JavaScript is a cross-platform scripting language, Ajax applications require no plug-ins, unlike Macromedia Flash and other proprietary Web application technologies. XMLHttpRequest Systems can use JavaScript-based XMLHttpRequest objects to make HTTP requests and receive responses quickly and in the background, without the user experiencing any visual interruptions. Thus, Web pages can get new information from servers instantly without having to completely reload. For example, users of an application with XMLHttpRequest objects could type in a

centigrade amount in one box of a temperature-conversion application and have the Fahrenheit amount appear instantly in another box. Various browsersincluding recent versions of Internet Explorer, Mozillas Firefox, Netscape, and Apple Computers Safariwork with XMLHttpRequest Working with Ajax In the classic Web application model, user actions trigger an HTTP request to a Web server, which processes the request and returns an HTML page to the client. This makes technical sense but doesnt always provide a great user experience because, for example, it limits interactivity and requires Web pages to reload for every piece of new data. Ajax applications create a JavaScript based engine that runs on the browser explained Forresters Root. Instead of loading a traditional Web page, the browser loads the engine, which then displays the requested material, as Figure shows. The engine intercepts user inputs and handles many interactions, such as simple data validation, on the client side, Root said. If the engine needs more data, it requests the material from the server in the background without locking up the user interface. The engine thus lets users interact with an application independently of server communication, reducing server response wait times.

The upside Proponents say that Ajax applications perform better than todays Web applications. Generally this is true because Ajax applications are more responsive to user actions and the programs dont

experience page-reloading-related interruptions, explained Jesse James Garrett, cofounder and director of user experience strategy for the Adaptive Path consultancy. Garrett coined the term Ajax earlier this year. Also, Garrett said, Ajax applications are usually fast because the approach Minimizes traffic to the server by sending and requesting just the minimum amount of data needed. Proponents say another benefit of working with Ajax is that more developers have experience with its component technologies than with other Web-application-development approaches. In addition, said Hkon Wium Lie, chief technology officer for browser maker Opera Software, because Ajax works across platforms, developers generally can write applications once to run via the Web on many users systems, regardless of platform. The downside According to analyst Ray Valdes with market research firm Gartner Inc., developers can add Ajax techniques piecemeal to an existing system, one code snippet at a time. However, he added, trying to implement all the techniques at once in a complex project approaches the rocketscience level of difficulty. Your average developer is not going to be able to figure it out, Valdes said. Only a small, elite group has the smarts to do it in a comprehensive, complete way. In general, though, Garrett said, Ajaxs learning curve for professional designers is not steep. However, he noted, the technology is immature and still needs toolkits and frameworks. In addition, he said, Because there are so few prebuilt Ajax interface components, developers will have to custom build most interfaces for each application. Some will be successful, some wont. Ajax also has raised some security concerns. For example, Forresters Root said, its component technologies have been around for years, but they are now being used in unproven ways that might make them more vulnerable to security breaches. The two major compatibility issues with Ajax, said Garrett, are differences in JavaScript implementations across browsers and providing alternate means of accessing the applications with older browsers that dont fully support modern Ajax features. In both cases, additional development effort is required. Another challenge, noted Sandy Leung, Yahoos product manager for next-generation interfaces, is that users must get accustomed to Ajax applications that dont perform like traditional Web applications. And because Ajax doesnt reload entire pages to add new material, he said, search engines might not index some important information. Moreover, Ajax isnt useful for some applications. For example, it cant be used for audio and video streaming, as neither HTML nor JavaScript have an audio or video API, explained Sun senior staff engineer Tor Norbye.

Green Ajax The classical Ajax has been proven as a good approach to decrease the bandwidth consumption on the web application. The main advantages of using Ajax are less waiting time and more control for the user , because the web page specifically changes in portion, not a whole page . this powerful mechanism can be viewed on some well known websites such as Google Suggest, Google Map, Google Mail, Flicker, Yahoo! Mail, and Microsoft Outlook Express Web Version . However, it is not a good approach to display data updates in real-time. The common Ajax applications will check the data updating to the server by using regular user definable intervals. By using the interval time to refresh, the classical Ajax generates many redundant requests. It results higher bandwidth consumption than normal. To avoid this impact, Green Ajax can be a better approach. The approach makes the web application faster and lower resources to support the real-time data updating. With the Green Ajax, a web server will have to signal the Client prior the updates. Even though the signal size is one byte only, it will collectively affect the

bandwidth consumption. To investigate the affect overhead signal to the total bandwidth consumption, a scenario has been created. It will be used comparing the bandwidth consumption of the classical Ajax and Green Ajax. The scenario divides into three parts. The first part will evaluate the data requesting in the high interval time. The second part will use the medium interval time for data requesting. And the low interval time to request will be used on the third part. Each part will assess five different intervals time to request. Therefore, the total experiments of this scenario are fifteen times. All experiments will use both the classical Ajax and Green Ajax. The web server will update the data in a fixed interval time. The classical Ajax application will be set to request to the web server using the same duration time to update to on the web server. In other hand, the Green Ajax will use its own characteristic, which will only request after the web server gives a signal. This signal arises when the administrator do an update on the web server. The conceptual model to provide the Green Ajax approaches can be shown below.

Theoretical frameworkTraditionally timer-to-refresh concept has been there because of the limitations of HTTP model, as under HTTP protocol the server can send anything to the client if and only if the client asks for it. That is why even For infrequent updates we have to send request periodically. Ajax can reduce the web server load and the data transfer to/from users computers because only a specific part in the web page is requested to the web server. However, the data updating from Ajax depends on the web application request to the web server. If the request is done when the data is still not updated, it will waste the bandwidth and the resource. Conceptual frameworkBased on the above statement, the clients request should be done on the appropriate time. The time to request should depend on the data updating activity on the web server. The approach should design the way for a web server to send a signal to the client if there is a new update. We might have to add some additional plug-ins at both client and server side to achieve this. To reduce the web traffic, the approach can be combined with Ajax to limit the size of data updating. The combination of these will bring the idea of low bandwidth and the low resource together to provide a real time data updating which will be named as Green Ajax. Ajax will be used as a main technique in the Green Ajax because Ajax has been proven by some researches as a good approach to decrease the bandwidth. However, Ajax only does some meaningless requests in the condition of infrequent data updating. Green Ajax will cover the limitation of Ajax in this case. A conceptual modelTo provide the Green Ajax approach on the applications , the web server must have the ability to signal the client. If the client got a signal from the server, the client will request the new data to the server to provide a real time data updating on the web application. The conceptual model to provide the Green Ajax approaches can be shown below.

For achieving this we have proposed a new protocol in this research. We named it as NTRP (Non Timer to Refresh Protocol). Under this protocol we might have to add one plug-in at server side and one for client side. At the server side the database for client URL will be maintained. In this database the time-stamp of the latest response will be stored for the corresponding client URLs. This time-stamp is compared with the time-stamp of the instance of the information database. If this instance does not match (i.e. there is update available) the server side plug-in will send a signal to client side plug-in. The client side plug-in will then make the browser to send the request. For security purposes the client must accept the NTRP relationship with server. And the server side plug-in will not be able to send anything more than a single byte signal.

ConclusionThe traditional method of client-server interaction was way too bandwidth consuming, slow and lacking in real time interactivity. Then came Ajax which changed the definition of interactivity entirely. Using Ajax the user can experience the desktop application like interactivity even on the client-server architecture. It also reduces the bandwidth consumption because it does not require reloading the entire page on every update like the traditional method rather it changes the specific part of the web page which was requested to be updated. It also uses the concept of asynchronous requests i.e. when one request is made the user is not blocked to send another

request like the traditional method. The concept of Green Ajax solves the problem of unnecessary bandwidth consumption due to redundant requests made to update the page with infrequent updates from server.

AcknowledgementWe thank our mentor Mrs. Anupama Sharma for her proofreading and valuable comments. We also thank our colleagues who gave their point of view which was very valuable for us.

ReferencesMesbah and A.v. Deursen, An Architectural Style for Ajax Proceedings of the Sixth Working IEEE/IFIP Conference on Software Architecture, IEEE Computer Society Washington, DC, USA, pp. 99. doi: http://dx.doi.org/10.1109/WICSA.2007.7. L. Zhijie, W. Jiyi, Z. Qifei, and Z. Hong, Research on Web Applications Using Ajax New Technologies Proceeding of the 2008 International Conference Multimedia and Information Technology, IEEE Computer Society, Washington, DC, USA, December 2008, pp. 139-142. doi: http://doi.ieeecomputersociety.org/10.1109/MMIT.2008.107 Pilgrim and J. Chris, Improving the Usability of Web 2.0 Applications Proceedings of the 19th ACM Conference on Hypertext and Hypermedia, ACM, New York, USA, June 2008, pp. 239-240. doi: http://doi.acm.org/10.1145/1379092.1379144. R. Sanjaya and C. Brahmawong, Distance Examination using Ajax to Reduce Web Server Load and Students Data Transfer International Journal of the Computer, the Internet and Management, Volume 15 SP3, Assumption University of Thailand, November, 2007, pp. 24.1-6. Keith Smith. Simplifying Ajax Style Web Development. Computer, Vol.39, no.5, pp. 98-102, May. 2006. Eric J. Bruno. Ajax: Asynchronous JavaScript and XML. Dr. Dobb's Journal, Vol.31 (2), pp. 32-35. Feb. 2006. David Perelman Hall. Ajax and Record Locking. Dr. Dobb 's Journal, Vol. 31, no.10, pp. 45-51, Oct. 2006. James F. Ryan, Blair L. Reid. Usable Encryption Enabled by Ajax. Proceedings of the International conference on Networking And Services, 116, July, 2006.

Danny Ayers. From Here to There. IEEE Internet Computing, Vol.11, Issue 1, pp. 85-89, Jan.-Feb. 2007.