Ajax Enabled Web Application Model with Comet Programming

International Journal of Engineering and Technology Volume 2 No. 7, July, 2012Ajax Enabled Web Application Model with Comet ProgrammingRajendra Kachhwaha 1 , Priyadarshi Patni 21 Department of I.T., Faculty of E & T, Jodhpur National University, Jodhpur2Department of Computer Science, Lachoo Memorial College of Science & Technology, JodhpurABSTRACTFor any web application the connectivity with the server is always a crucial issue. Correctly accessing the data andavailability to user at the faster rate is the major issue. In classical approach, stateless request and response make refreshing ofcomplete page. The AJAX engine improves the situation from complete reference to server to need base access. Ajax canhelp in making a new model, in which the single-page web interface is composed of individual components that can beupdated/ replaced independently. In this paper AJAX enabled web application model with comet programming is introducedand tested. Two approaches for long polling are considered namely, using UpdatePanel and using JSON. The experimentalresults are compared using Firebug tool provided by Mozilla Firefox.Keywords: Ajax, Reverse Ajax, Web traffic reduction, Web page auto refreshing, Long polling, JSON1. INTRODUCTIONThe use of web applications is increasing more and moreover the last few years, which includes businesspromotions, online working of any organization, socialconnectivity with the people and many more. One of thekey differentiators for web applications is the connectivity– how they connected to the server over a network andreceive and send data over network connections. In itsearly age, web applications were having static contentdelivery mechanism over a stateless request and responsearchitecture of HTTP. Any piece of information that theclient needs has to be requested explicitly by the clientand the server sends the requested data. To display anypiece of real time data, the web page is reloadedcompletely. In this basic model, there is synchronizationbetween user activity and the data transmission. The clientbecomes idle and doses nothing except waiting for theresponse. Ajax can overcome this drawback by providinga new model, in which auto refreshing of any web page isperformed with a specific polling period. Cometprogramming or Reverse Ajax starts a new era of webapplication with rich interactive experience. Cometprogramming is a web application model in which a longheldHTTP request allows a web server to push data to abrowser, without the browser explicitly requesting it.2. MODELS OF WEB APPLICATIONA Web application can be categorized into two models:A Classical Web Application ModelAn Ajax Enabled Web Application Model with autorefreshing An Ajax Enabled Web Application Model withcomet programmingThe classic web application model works like this: Mostuser actions in the interface trigger an HTTP request backto a web server. The server does some processing —retrieving data, crunching numbers, talking to variouslegacy systems — and then returns an HTML page to theclient.An Ajax enabled web application eliminates the startstop-start-stopnature of interaction on the Web byintroducing an intermediary — an AJAX engine —between the user and the server. Instead of loading awebpage, at the start of the session, the browser loads anAJAX engine — written in JavaScript and usually tuckedaway in a hidden frame. This engine is responsible forboth rendering the interface the user sees andcommunicating with the server on the user’s behalf.Every user action that normally would generate an HTTPrequest takes the form of a JavaScript call to the AJAXengine instead. Any response to a user action that does notrequire a trip back to the server — such as simple datavalidation, editing data in memory, and even somenavigation — the engine handles on its own. If the engineneeds something from the server in order to respond — ifit is submitting data for processing, loading additionalinterface code, or retrieving new data — the engine makesthose requests asynchronously, usually using XML,without stalling a user’s interaction with the application.Comet programming provides a model in which a longheldHTTP request allows a web server to push data to abrowser, without the browser explicitly requesting it.ISSN: 2049-3444 © 2012 – IJET Publications UK. All rights reserved. 1155

International Journal of Engineering and Technology (IJET) – Volume 2 No. 7, July, 2012Comet applications attempt to eliminate the limitations ofthe page-by-page web model and traditional polling byoffering real-time interaction, using a persistent HTTPconnection between the server and the client. Sincebrowsers and proxies are not designed with server eventsin mind, several techniques to achieve this have beendeveloped.Specific methods of implementing Comet fall into twomajor categories: Streaming & Long Polling.Streaming: An application using streaming opens asingle persistent connection from the client browser to theserver for all comet events. These events areincrementally handled and interpreted on the client sideevery time the server sends a new event, with neither sideclosing the connection. Hidden iframe andXMLHttpRequest are used for accomplishing streamingComet.Long Polling: Long polling is a variation of thetraditional polling technique and allows emulation of aninformation push from a server to a client. With longpolling, the client requests information from the server ina similar way to a normal poll. However, if the serverdoes not have any information available for the client,instead of sending an empty response, the server holds therequest and waits for some information to be available.Once the information becomes available (or after asuitable timeout), a complete response is sent to the client.The client will normally then immediately re-requestinformation from the server, so that the server will almostalways have an available waiting request that it can use todeliver data in response to an event.3. IMPLEMENTATIONTo show the advantages (In terms of data downloaded &time taken in downloading & displaying data) of Ajaxenabled web application over classic web application, fewweb pages were made.A web page named as UpdateInfo.aspx is provided toAlumni members to update their contact information. Thehome page named as Index.aspx, shows a number witheach batch for all pass out batches. This number showscount value of those alumni members who updated theirinformation successfully.The table below shows the technique names with theirrespective web page name used.Table 1. Implemented Techniques with Web Page NameS.No.1.Technique NameClassic Web ApplicationModelWebNamePageIndex1.aspx2.3.4.Ajax Enabled WebApplication Model withAuto RefreshingAjax Enabled WebApplication Model withComet Programming(Using UpdatePanel)Ajax Enabled WebApplication Model withComet Programming(Using JSON)Index2.aspxIndex3.aspxIndex4.aspx3.1 Using Classic Web Application ModelIn a classic web application model, the web page,Index1.aspx is reloaded completed with each requestresponse process initiated by a client. The user requeststhe information by the user interface (ex. browser). Afterreceiving this request, the server processes it and makes aresponse for it. This response is sent back to the clientside. If there is a successful update operation performedby the any client using UpdateInfo.aspx web page, theclient currently viewing home page (Index1.aspx) doesn’tget the updated information. To get the updatedinformation, client needs to reload the web page.Following timing diagram shows the activity of client.3.2 Using Ajax Enabled Web ApplicationModel with Auto RefreshingNow Consider Index2.aspx web page refreshing just theparts that change makes a lot more sense than refreshingthe entire page (Index1.aspx) for a few minor changes.Auto Refresh offers a significant benefit of less work forclient. A specific polling period is set so that it shouldspread out the requests more evenly. Polling period of 15seconds is used in the experiment. If there is a successfulupdate operation performed by any client usingUpdateInfo.aspx web page, the client currently viewinghome page (Index2.aspx) doesn’t need to reload the webpage because the updated information will be displayed toafter polling period. Following timing diagram shows theactivity of client.3.3 Using Ajax Enabled Web ApplicationModel with Comet ProgrammingIn previous technique (Index2.aspx), the user will seeupdated information with a maximum delay of 15seconds. The Comet programming technique (Index3.aspx& Index4.aspx) is used when a periodic refresh delay istoo big, and we cannot decrease this time because we willbreak down our server with lots of data refresh requests.Here, comet programming is used for long polling.Following timing diagram shows the activity of client.ISSN: 2049-3444 © 2012 – IJET Publications UK. All rights reserved. 1156

International Journal of Engineering and Technology (IJET) – Volume 2 No. 7, July, 2012Fig 1. Client activity in Index1.aspxFig 2. Client activity in Index2.aspxISSN: 2049-3444 © 2012 – IJET Publications UK. All rights reserved. 1157

International Journal of Engineering and Technology (IJET) – Volume 2 No. 7, July, 2012Fig 3. Client activity in Index3.aspx & Index4.aspxLong polling is implemented in two different ways:Long Polling Using UpdatePanelLong Polling Using JSON3.3.1 Long Polling Using UpdatePanelThe Asp.net UpdatePanel makes AJAX trivially easy foranyone to implement, even without knowledge of what’sactually going on behind AJAX. Unfortunately, there is alack of transparency regarding the mechanism of theclient/server exchanges. Index3.aspx is implementedusing UpdatePanel. Whenever it found a database updatesignal (notification), an asynchronous request is made tochange the displaying information. To display theinformation, lot of data received (Approx 1555 bytes). Itis acceptable for infrequently used functionality but apotential deal breaker in heavy use. Following figureshows the data received from the server in response to theclient update request.ISSN: 2049-3444 © 2012 – IJET Publications UK. All rights reserved. 1158

International Journal of Engineering and Technology (IJET) – Volume 2 No. 7, July, 20123.3.2 Long Polling Using JSONInstead of posting back and then receiving html content tocompletely replace our UpdatePanel’s content, we can usea web method to request only the information that we areinterested in using JSON (Java Script Object Notation).JSON is perfectly suited for light weight communicationFig 4. Server Response in UpdatePanelbetween client and server. Index4.aspx is implementedusing JSON. With this, we have completely eliminatedthe Http Post data that was present in the UpdatePanel’srequest and reduced the response down to just the data weare interested in requesting. Following is the data received(92 Bytes) from the server in response to the client updaterequest.4. RESULTSBefore comparing, we see the page refresh dependencywith use of notification. This is shown in the followingtable.Table 2. Web Page Name with Page Refresh DependencyWeb PageNamePage RefreshDependencyFig 5. Server Response in JSONUse ofNotificationIndex1.aspx On User Event NoIndex2.aspxIndex3.aspxIndex4.aspxAutomatic (After 15Seconds)Automatic (After 30Seconds)Automatic (After 30Seconds)4.1 Experimental Work DoneNoYesYesNow we perform a comparison of implementedtechniques in terms of data downloaded and time taken todownload that data, either the database is successfullyupdated or not.Table 3. Comparison of Implemented TechniquesFor this, we first run the application and perform anAlumni member’s contact information update operationusing UpdateInfo.aspx web page. Then we use anIndex1.aspx web page to show the working of classic webapplication model. Now we perform one moreinformation update operation using UpdateInfo.aspx webpage. This time, Index2.aspx web page is used to showthe working of AJAX enabled web application with autorefresh. Now we perform one more information updateoperation using UpdateInfo.aspx web page. This time,Index3.aspx web page is used to show the working ofAJAX enabled web application with comet programming(using UpdatePanel). Now we perform one moreinformation update operation using UpdateInfo.aspx webpage. This time, Index4.aspx web page is used to showthe working of AJAX enabled web application cometprogramming (using JSON). Now we examine the effectof technology trends, when we see the size of downloadeddata (in bytes) and time taken to download (in ms) inabove four cases. The experimental results, as shown infollowing table, are compared using Firebug: a toolprovided by Mozila Firfox, has a variation in the range of0.020 ms to 0.090 ms in time taken parameter valuesshown on the respective web pages.ISSN: 2049-3444 © 2012 – IJET Publications UK. All rights reserved. 1159

International Journal of Engineering and Technology (IJET) – Volume 2 No. 7, July, 2012Web PageNameIndex1.aspxIndex2.aspxIndex3.aspxIndex4.aspxDatabaseUpdatedNoYesNoYesNoYesNoYesResultNoticedPollingInterval(in ms)Downloaded /Time Taken(byte / ms)ForNotificationFor DataI Time No Polling 00 3468/ 8670II Time No Polling 00 3468/ 6890III Time No Polling 00 3468/ 7230I Time No Polling 00 3468/10210II Time No Polling 00 3468/ 8750III Time No Polling 00 3468/ 9280I Time 15000 00 92/ 2450II Time 15000 00 92/ 885III Time 15000 00 92/ 627I Time 15000 00 92/ 223II Time 15000 00 92/ 176III Time 15000 00 92/ 129I Time 30000 1 00II Time 30000 1 00III Time 30000 1 00I Time 30000 1/ 112 1555/ 1725II Time 30000 1/ 126 1555/ 1256III Time 30000 1/ 114 1555/ 989I Time 30000 1 00II Time 30000 1 00III Time 30000 1 00I Time 30000 1/ 114 92/ 412II Time 30000 1/ 109 92/ 219III Time 30000 1/ 107 92/ 98Note: Time to load the pages may vary depending on the Internet Connection.5. CONCLUSIONWeb Applications are becoming increasingly complex.Correctly accessing the data and availability to user at thefaster rate is the major issue. Ajax provides user-friendlierenvironment like any window application runs on a localsystem, over a web application with reducing servertraffic and network bandwidth with time reduction inserver response time.We have experimental results show that data transferredin third case is .9 byte/ms at I time and 1.57 bytes/ms atIII time. In fourth case it varies from .22 to .93. These twocases show better data transfer rate which means timereduction in server response time.REFERENCES[1] Dr. Shahram Khosravi, “ASP.NET AJAXProgrammers Reference with ASP.NET 2.0 orASP.NET 3.0”, Published by Wiley Publishing, Inc,ISBN: 978-0-470-10998-4, Chapter 1, pp 2-3.[2] Ryan Asleson and Nathaniel T. Schutta,“Foundations of AJAX”, ISBN: 1-59059-582-3,Chapter 2, pp 23-28, Chapter 8, pp 220-222.[3] Matthew MacDonald, “Beginning ASP.NET 3.5 inC# 2008: From Novice to Professional”, SecondEdition, ISBN: 978-1-59059-891-7, Chapter 25, pp855-858.[4] Glenn Johnson and Tony Northrup, “Microsoft .NetFramework 2.0 Web Based Client Development”,Self Paced Training, Published by Microsoft Press,ISBN: 978-0-7356-2334-7, Chapter 1, pp 3-6.[5] Jesse James Garrett, “Ajax: A new approach to webapplications”,http://www.adaptivepath.com/ideas/essays/archives/000385.php.ISSN: 2049-3444 © 2012 – IJET Publications UK. All rights reserved. 1160

International Journal of Engineering and Technology (IJET) – Volume 2 No. 7, July, 2012[6] CoperNick, “HTTP Push from SQL Server CometSQL”,http://www.codeproject.com/Articles/63568/HTTP-Push-from-SQL-Server-Comet-SQL.[7] Sandeep Malik, \Implement a real-time server push inAjax applications using socket-based RIAtechnologies",http://www.ibm.com/developerworks/web/library/wa-aj-socket/ISSN: 2049-3444 © 2012 – IJET Publications UK. All rights reserved. 1161