When we talk about AJAX and its huge impact on Web development, one important thing to mention is that it's not a ready-to-ship component that you just plug into your app and now you're Web 2.0. In fact, what AJAX can do for you is to provide a simple, yet powerful way to make transparent server requests; but nothing more than that. The important point with AJAX is what to do with it. In other words, how do we use it to improve the user experience?

Therefore, in this article we'll see how we can apply the AJAX technique to improve the WebDataWindow experience. By the end of this article, we'll learn how to do server-side actions, like Retrieve, Update, and Delete without reloading pages.

Server-side Actions
Some actions that are done on the WebDataWindow client component require server interaction. For instance, when an Update is executed, it's necessary to go to the server to update the data in the persistent layer and refresh the context. Or, when a ScrollNextPage/ScrollPriorPage action is called, it's necessary to go to the server to bring in the new data (code and formatting). Some actions can even have an impact on other WebDataWindows, like in a master-detail model. So, server interactions are always necessary to complete application tasks.

WebDataWindow Components
Before we get into the how-to, we should take a look at the WebDataWindow component structure. It's important to see how it works to understand the main challenges and what's necessary to solve them. The WebDataWindow object is a Web control for DataWindow objects.

This control is divided in two components: The WebDataWindow server component and the WebDataWindow client component. The former runs on the Web server and talks directly to the persistent layer. It basically gets data, applies actions (server-side actions), and then generates the client component. The client component runs on the client (Web browser). It interacts with the user, triggers events, and then performs server-side actions.

These two components are always communicating with each other. Each communication requires a server interaction. Then, to build our solution, we have to understand very clearly the communication standard between these components.

WebDataWindow Server Component
Once all required actions are done on the server component, and it's ready to show on the browser, it's necessary to generate the client component. It is done by the generate method. This method will return ALL the code of the client component. This code is a combination of HTML, CSS, and JavaScript. The CSS part is responsible for visual formatting, the HTML code is responsible for showing the forms, and the JavaScript part is responsible for instantiating the client component itself and will let us call methods like SetItem, GetItem, and Update.
This is how the server component talks with the client component.

WebDataWindow Client Component
Once all the interactions with the user are made, and a server-side action is called, an interaction with the server component is triggered. Basically, to perform this action, we need the context and the action. (The context is a string that holds the results of all user interactions with the client control. All the data that was modified, all the rows that were inserted, etc., are stored in this context.) Some extra data for retrieval arguments may also be needed. (To learn how to append extra data to the WebDataWindow client control, see the SetSelfLink method of the server component.) All that information is maintained in hidden inputs in a form appended to the client component.

Therefore, when a server action is triggered, the client component builds the context and submits this form to be processed by the server component.This is how the client component talks with the server component.

AJAX Solution
To avoid a page reload during that communication cycle we're going to use an AJAX technique as a line of communication between the client and server components. In other words, we'll replace a page reload with an AJAX request.

A typical AJAX interaction is made up of a server request followed by client-side processing of the XML returned by a callback function. In our model, the first part (the server request) represents the client component communicating with the server component. The second part (the XML building and client-side processing) represents the server component communicating with the client component.

AJAX Request - Client Component Communicating
As we saw, the starting point of a WebDataWindow server action is the form submission. This is the default way of communicating between the client and server components that must be replaced by the AJAX request.

To do this, we have to intercept the form submission by implementing the client-side OnSubmit event. In this event we must gather all the data in the submission form, trigger an AJAX request, and then prevent the original submit from occurring (see Listing 1). The code for the getFormValues and loadXMLDoc functions is provided in Listing 2.

XML Building - Server Component Communication
Once the server page gets the client component request (the AJAX request), the associated server component will be invocated. It will retrieve the data, establish the context, and apply the action performed. This completes the client component communication phase. It's now time for preparing the server component communication.

In the standard communication model, we simply generate the client component code and then flush it to the Web browser. But, in the AJAX model, one step will be required between the generation and the content transmission. Instead of sending the code generated, an XML string holding the client component will be built.

On most XML-oriented applications, the XML content's nature is pure data. It will normally hold database data. But, in the WebDataWindow approach, bringing in just the data isn't enough to cover the whole WebDataWindow component's communication cycle (See Figure 1).

To have a full working client component, it's necessary to bring down all its generated code. Remember that the DataWindow component is more than just a simple data placeholder. It's a data and presentation manager that requires much more than just the data itself. It handles complex presentation logics, like grouping, or expression conditioned text formatting. It also handles data status like DataModified! and NewModified!. Hence, the XML must hold the full client component code.

To build that XML, the client component code must be divided into logical parts. The JavaScript part, the HTML part, and the CSS part will be put into separated tags in the XML. So it's necessary to extract these parts from the generated code. This division is necessary because each type of code (HTML, CSS, and JavaScript) requires a particular treatment in the client-side processing.

Listing 3 is sample code that extracts those parts written in VBScript language. The resulting XML will look like Listing 4. To see a full sample XML, see Listing 5. Other custom tags can be added into the XML to send extra information about the action being performed, such as error messages, application messages, warnings, and database data.

The XML string is now ready to be sent back to the client.

XML Client-Side Processing - Server Component Communication
Once the XML successfully arrives, the AJAX callback function is triggered. This function will process the XML and replace the old client component (the one that started the server-action interaction) with the brand new context-updated client component. Each part of the client component will be treated separately.

First we have to inject the HTML part. This injection is performed by changing the innerHTML attribute of the tag that currently holds the client component. This includes identifying this tag (see Listing 6).

Then we concatenate the CSS part to this same innerHTML attribute. It's important to do it in this order. First the HTML part is set then the CSS part is added to the innerHTML attribute. This guarantees that the styles are correctly applied to the HTML part.

Finally, the JavaScript part must be executed. This will create the client component with full functionality. To execute this code, the eval JavaScript built-in function will be used (see Listing 6). This function takes as an argument a string variable holding JavaScript code, parses this code, and runs it.

This finishes the whole communication cycle between the client component and server component, using AJAX as the method of communication.

Conclusion
In this article we saw one way to apply AJAX techniques in WebDataWindow server actions. It was done by replacing a form submission with an AJAX request. An XML string holding the client component parts (HTML, CSS, and JavaScript) was built on the server side and processed on the client side to complete the whole cycle of server-actions interaction.

Many others solutions and improvements can be implemented for performance's sake. Some special cases may use different approaches. For instance, retrieving DropDownDataWindows dynamically depending on columns values. Nevertheless, it's always a matter of identifying the necessity of improvement, study the situation, and apply AJAX.

Resources

• Getting started with Ajax? Visit http://en.wikipedia.org/wiki/Ajax_%28programming%29
• Getting started with WebDataWindow? Visit http://manuals.sybase.com/onlinebooks/group-pb/pbg0900e/ dwprgug/@Generic__BookTextView/7030
• See Larry Cermark article on http://pbdj.sys-con.com/read/42317.htm for a better understanding of the WebDataWindow workflow on the Update process.
• To learn how to implement client side events, visit http://manuals.sybase.com/onlinebooks/group-pb/pbg0900e/ dwprgug/@Generic__BookTextView/842