What is AJAX?

AJAX is a term you don't hear much anymore but it originally stood for "Asynchronous JavaScript and XML." This is technique for updating one or more sections of a web page based on a request sent to the web server.

Early web applications were limited to transmitting information to and from the sever using synchronous requests, one page at a time. It means your user would fill out a form, hit submit, and get directed to a new page with new information from the server. With AJAX, when you click a button, change a value, or do certain other interactions with a page, the JavaScript engine running in your browser will make a request to the server, which interprets the results and sends a response, then the JavaScript engine will update the user's web page accordingly. The user would not be directly made aware that anything was transmitted to and from the server.

Using AJAX with GendL

The most basic requirement is to use base-html-page as your web pages mixin. This provides most of the functionality, and was covered in the first topic of this tutorial, Creating and Publishing web pages

Next, to trigger an AJAX submit, form controls need to have their input :ajax-submit-on-change? set to T. This was covered in the tutorial topic Gathering inputs using form-controls

And finally, the page is best constructed from base-html-divs, as shown in the topic Building pages from base-html-divs

Performance Considerations

The javascript update is performed by GendL at the base-html-div level; GendL identifies which base-html-divs will be impacted by the change to the form control(s), recomputes the value of the base-html-divs div and updates the page with that content. So for best performance there is a balance to be struck between having sufficient base-html-divs so that large sections of the page which don't change are updated and sent from the server to the browser, and having the page defined with so much granularity that a large number of (smaller) inserts/updates have to be made

In the main, however, any optimisation can be performed at the end of the development cycle although it is worth bearing in mind the simplicity/granularity tradeoff when building the page in the first place. This was also discussed in the topic Building pages from base-html-divs

Using AJAX with GendL is really this simple!