Rich Internet Clients - First steps with Ajax

Ajax = Asynchronous Javascript + XML

Use Javascript + XML + DOM + CSS to build more interactive web applications with 4D as back end.

 

This tech note helps to do first steps by showing different examples. All examples update values dynamically in the background without refetching the whole page from the server, like "classic" web applications.

 

Simple HTML
This example is quite simple. It is build for 4D developers with low Javascript knowledge to give a minimum background knowledge. It does not connect to 4D, the "back end" is simulated on the client with Javascript.

Simple Ajax
Build on the above example this is a very minimum Ajax demo. It is kept very basic to make it easy to understand.

Simple Ajax - using form
Similar to the first example, but using POST to send the request to the server. This avoids the browser cache.

Double combo box
Two combo boxes, the first shows movie categories. Depending of the selected categorie the available movies are loaded from the server.
Typical usage is a web shop, like T-Shirts. The first combo box shows available colors, the second available sizes in the selected color (checked back on the server if on stock).

Type Ahead: Actor Suggest
Type Ahead is a great example for Ajax, try Google Suggest. This example has a suggest dialog for Actors.

Live Grid
Anoyed with the usual long list of next page - like 1 2 3 4 5 6...10 20 30?
Why not use a scrollbar like in 4D's MODIFY SELECTION and fetch the data live during scrolling?
Using the open source framework OpenRico this is possible...