IntraWeb goes Ajax
Atozed Software recently announced to support Ajax with its well known web application framework IntraWeb. Ajax is the new buzz word in the web development area. Ajax in this context has nothing to do with soccer (old joke I guess), but it is a JavaScript based technology to help improving web user interfaces. The goal is to make web interfaces behave more like traditional desktop applications. This article will give you a quick overview of Ajax and how IntraWeb implements it.
What is Ajax?
Ajax stands for Asynchronous JavaScript and XML. Important to notice is that Ajax is not yet a standard, W3.org is still working on drafts for a “web application API”. Currently the Ajax development is driven by a couple of different organizations. Microsoft is working on project “Atlas”, which will deliver Ajax support for ASP.NET, and there are a lot of independent commercial and open source projects with Ajax implementations. Just google for “Ajax library”.
Ajax is not yet a standard
Ajax basically provides means to process web browser requests asynchronously. The traditional way to process a request is synchronous:
- The user clicks a button on a web form
- The browser posts back the form’s fields (simply put, the values that are entered by the user in inputs)
- The server receives the post back, and processes them
- The server sends back a new web form, based on the post back received
- The web browser renders and displays the received form
All the steps above are executed from top to bottom – synchronously that is.
Ajax now allows sending a request to the server which only contains a few selected input values. The web browser does not wait for the response, the user does not see an hourglass or even a blank screen. The server receives and processes that asynchronous request and sends back a response to the browser. This response is processed like a call back – the browser does not render a new page, but it executes the asynchronous response. In other words this async response has to contain JavaScript or a “chunk” of data which can be processed by some JavaScript function on the web browser.
This “chunk of data” may be XML, and can contain new values for elements which are on the current web page.
Example of a simplified server response using XML:
…
…
Example of a simplified server response using JavaScript:
…
document.get.elementbyId(“label1”).innerHTML =
“Hello World”;
…
Both examples above would change the value of an existing tag to show “Hello World”. The XML example of course requires that there is an XML processor on the client side – this has to be delivered by the actual Ajax library being used. The JavaScript example would execute directly.
The main thing about Ajax is not if XML or JavaScript is used for the data transferred, but it’s the asynchronous execution. Both, XML and JavaScript require some work on the server side to create the JavaScript or XML.
OnAsyncClick vs. OnClick
Now where you got the basic idea what Ajax is, you probably still don’t have any idea how to initiate asynchronous request or how to receive them on the server and send the response.
As a Delphi-IntraWeb user this will be as easy as assigning code to an OnClick event.
In a traditional IntraWeb application with a form that has a button and a label you can implement the following:
procedure TIWForm1.IWButton1Click(Sender: TObject);
begin
IWLabel1.Caption := DateTimeToStr(now);
end;
When the user clicks on the button, the form is submitted back to the server, the current time is applied to the label, and the server sends the new form back to the browser. To display the current time you need a full round trip to the server, and the user has to wait until the response is received and rendered by the browser before he can continue. This is the old, traditional way how web forms are working.
Now with IntraWeb’s new Ajax support you can implement the following:
procedure TIWForm1.IWButton1AsyncClick(
Sender: TObject; Session: TIWApplication);
var
LResponse: string;
begin
LResponse := 'IWLABEL1IWCL.innerHTML = "' +
DateTimeToStr(date) + '";';
Session.SendAsyncResponse(LResponse);
end;
IntraWeb provides the framework that makes the IWButton1AsyncClick to be processed asynchronously (i.e. the user does not have to wait for the response). The user model is basically the same as you are used to use in Delphi: assign events in the object inspector.
Currently you have to apply some JavaScript in your Delphi code (see the innerHTML construct), but you can easily code the whole business logic in Delphi. Only the final result has to be returned in JavaScript (there is no XML model provided by IntraWeb).
The cool thing is that all IWControls are offering synchronous events now:
Even IWTimer has an OnAsyncTimer event, which allows you to create forms that automatically update certain controls. This will make your forms look like they are updated using a push technology.
All this is included in IntraWeb 8.0.23 which is available at www.atozed.com/intraweb. This version is a free update for all BDS 2006 users and of course for those who have a current support and update license from Atozed Software.
I don’t know much about JavaScript, and I don’t know about things like ‘innerHTML’
You may now say “I don’t know much about JavaScript, and I don’t know about things like ‘innerHTML”. Good point! We are already working on this. In IntraWeb version 9.0 we will make all this as easy as this:
procedure TIWForm1.IWButton1AsyncClick(Sender: TObject;
Session: TIWApplication);
begin
IWLabel1.caption := DateTimeToStr(date);
end;
In other words: You can continue concentrating on implementing your business logic in Delphi. All the “JavaScript magic” will be handled by IntraWeb.
There are a couple of things to mention as well:
- All asynchronous requests are of course secured by IntraWeb’s session id; the async event handlers will only execute when they are triggered from valid sessions. No hijacking possible, that is.
- IntraWeb’s Ajax support is available for Win32 and .NET applications and for all Delphi versions from Delphi 5 up to 2006, plus BCB 5 + 6.