To view a printable version of this article in a PDF viewer, click here for PDF.
To download a sample that includes source code, download a free trial of the product http://www.clubFarPoint.com/FarPointSupportSite/Modules/Download/trials.aspx?pcode=spreadweb or see the sample that comes with the product. And see the product tour at our Web site for an explanation: http://www.FarPointSpread.com/netproducts/spreadweb/tour/AJAX.aspx.
Executive Summary
Many developers are being asked to create ever more data intensive Web front ends and applications. As developers begin to realize the diverse ways in which Web technologies can be used for communicating and collaborating, technologies such as AJAX will become more prevalent. AJAX is really very simple and powerful. Integrating AJAX into your next application may solve many problems and give your users the interactivity and speed they are beginning to expect when looking for information on the Web. This is a brief overview of AJAX and how you can use it, in a spreadsheet application that has Spread, to expand the possibilities and show your customers that you have the power to solve some of their problems with ease. The use of AJAX in a Web Forms application provides many benefits and improvements. There are also limitations to its use and there are applications in which it makes more sense than others. FarPoint recommends understanding AJAX before using it in spreadsheet application development with Spread for Web Forms.
Introduction to AJAX
Web technology is different from Windows-based applications in terms of speed and interactivity. While we expect quick response times and numerous interactive controls from Windows applications, it is not always straightforward to implement these same techniques in Web applications. Limited by simple browsers on the client and the speed inherent in client-server communication, Web applications are mostly slower and simpler than their counterparts in the proprietary world. But developers are an ingenious bunch, and they have figured out how to use readily available technology on the Web to provide some of that same responsiveness. That available technology includes JavaScript and XML used in concert to provide asynchronous communication between the client and the server. So AJAX (Asynchronous JavaScript and XML) provides a fairly simple solution that can speed up client-server communication to allow Web pages to feel more like other applications on the desktop.
To see just how responsive Web pages can be using AJAX, you need look no further than Google Maps, http://maps.google.com and other sites that offer lots of data that can be manipulated with ease through an ordinary Web browser, such as having your text automatically completing at http://demo.script.aculo.us/ajax/autocompleter and at presenting search results as you type each character at http://www.1976design.com/blog/.
AJAX combines a group of technologies to provide smarter client-side pages; it is a type of programming architecture for creating interactive Web applications that can update data on a client page by making direct calls to a server without needing to go to the server for the entire page using HTML, CSS, and JavaScript. By using JavaScript routines as a middleman, AJAX sends only essential data to the server and intelligently replaces data on the client without requiring an entire page of data to be retransmitted back and forth to the server. This figure illustrates the savings in time for a postback.
How AJAX Improves Web Forms
The use of AJAX is a simple mechanism with powerful results. The experience to the end user is dramatic because it improves response time by providing a faster postback. With AJAX, when a browser makes an initial request of a page, the server provides not only the viewable part of the page but also the AJAX routines, really JavaScript functions, that will help with further page processing. Then when additional user interactions are performed, the client can perform some of that processing, handling requests or changes in data with calls to the JavaScript functions. These might handle the changes locally or send on any requests to the server for further processing. The server then can send back data in the form of XML for the AJAX routines to process. This eliminates the need in many cases for the entire page to be posted back. With large amounts of data, as in spreadsheet applications, these time savings can be impressive. The figure below shows diagrammatically the sequence of calls and how AJAX on the client side can handle much of the work.
By making communication with the server less frequent and with smaller amounts of data conveyed, this asynchronous communication with the server means that processing can happen in the background from what the user sees and can happen only when needed. Of course, this requires more work to be done up front to anticipate the type of interactions that the user may require and how to handle those interactions. But by putting some of the work on the client side, the user can have a better experience of the Web page.
Using AJAX and Spread for Web Forms
Spreadsheets can be big, and spreadsheet applications can be some of the most data intensive applications with which to work. They can contain a lot of data and require many calculations. With components such as Spread for Web Forms, spreadsheet applications can bind to databases with millions of cells of data that must be made available to end users.
For a Web application, traditional ways of serving up pages can impose severe restrictions on a spreadsheet application’s performance when it is bound to a large data set. Paging or moving around the sheet by the end user can demand system resource typically easily available to Windows applications but limiting Web applications. But with AJAX, those restrictions can be largely hidden from the end user as AJAX can send back to the server only those cells that have changed and updating only those calculations that need recalculating. For paging, only those rows that are displayed need to be fetched from the server.
FarPoint introduced support for AJAX in Spread for Web Forms in version 2.5. With simple Boolean properties on the FpSpread component class, Spread for Web Forms can be made aware that the application is using AJAX. See the product tour at our Web site or available with the product download: http://www.FarPointSpread.com/netproducts/spreadweb/tour/AJAX.aspx.
In the example from the product tour, the user can format the text in an ordinary text cell and see the results immediately because of AJAX. Also the sum of the cells containing number values can be calculated when any of the individual number values changes without having to get the entire sheet.
These improvements are possible with AJAX support. Namely the EnableAjaxCall allows the Web page to avoid doing a full postback and instead calling the JavaScript functions that handle the client-side updating. AJAX allows the component to refresh without refreshing the entire page. You can add AJAX support to the FpSpread component by setting the properties described here.
The EnableAjaxCall property of the FpSpread