Ajax

Using Ajax in your HTML/OS documents has never been easier.

There are 2 major libraries you can choose from. You can use the Clear Image Library or now Aestiva has introduced their own implemntation of AJAX.

Visit the Aestiva Documentation Page or visit Clear JS to learn how to get going with AJAX.

clearjs.org AJAX

This is a third party AJAX library that will allow you to do AJAX on your pages.

AJAX Cooked Right Into HTML/OS

Ajax Introduction

The HTML/OS environment supports AJAX, a form of browser-server communication that does not require web pages to redisplay. Using AJAX is relatively straightforward. Only a few HTML/OS tags are needed.

Use the AJAX built into HTML/OS in one of the following two ways.

If you do not want to write your own JavaScript you can use a "no-JavaScript" approach. When any HTML form element is clicked or data in a form element is changed you can have the browser send the forms data to HTML/OS. In HTML/OS you can then run code and update the HTML form. With this approach all JavaScript is auto-generated by the HTML/OS engine. Alternatively, you may write your own JavaScript and control the data sent to the server. This is the JavaScript approach. Below we discuss each approach.

The No-Javascript Approach

When a form in HTML/OS has an action equal to AJAX it tells HTML/OS to send its data to the onclick Overlay called AJAX (without redisplaying the page) when form elements change or they are clicked. Each time data is sent HTMLOS.CLICKED is set to the name of the form element changed or clicked. In the Overlay AJAX you can run code and then pass variables back to the page using the AJAXRETURN tag. If you want to exclude elements of a form from submitting data when changed, place the tag NOAJAX inside the corresponding HTML input.

The technique above also works with hypertext links too. To have a link send data to HTML/OS without redisplaying the page, set the destination of the HREF to AJAX. For example: Update Me. When the link is clicked, HTMLOS.CLICKED is set to "abc" and the Overlay AJAX is run. The page is not redisplayed. Here too, you use the AJAXRETURN tag instead of a GOTO at the end of your HTML/OS code.

AJAXRETURN has three parameters allowing you to pass three kinds of information back to the browser. The first parameter is a list of variables names. When specified, the form elements will be updated accordingly. The second parameter contains HTML you wish to place in the web page. The parameter is a 2 column table. In each row, column 1 must be the id of a

element. Column 2 contains the HTML/OS code to be displayed within the

and

tags specified. The HTML you pass back to the page cannot contain

tags but form inputs are allowed. (NOTE: Array is not case sensitive. All form input name values will be returned in upper case.) The third parameter of AJAXRETURN can contain JavaScript to pass back to the browser and run.

Here's an example HTML/OS page with an AJAX form:

<html>
 <form action=AJAX>
  <input type=text size=5 name=A value=0> X
  <input type=text size=5 name=B value=0> =
  <input type=text size=5 name=C value=0>
 </form>
</html>

<<overlay AJAX
 IF ISINTEGER(A) != "TRUE" THEN A=0 /IF
 IF ISINTEGER(B) != "TRUE" THEN B=0 /IF
 IF ISINTEGER(C) != "TRUE" THEN C=0 /IF
 C=A*B
 AJAXRETURN("a,b,c","","")
>>

Method #2 - The JavaScript Approach

If you are a JavaScript programmer you may want to write your own JavaScript. Advantages include gaining a lot more control over the data you send to HTML/OS. Like the no-JavaScript approach you need to set up an HTML with the action equal to AJAX. But in this approach you will want to place a NOAJAX tag in your form elements so you can write your own JavaScript event handlers.

To send data to the server, use the JavaScript function ajaxSendInputs(varList,clickValue). The function is produced by the HTML/OS engine. You do not need to define it.

Here's an example HTML/OS page with an AJAX form and Javascript:

<html>
 <script>
  function update(n) { 
   ajaxSendInputs("A|B|C",n);
  }
 </script>
 <form action=AJAX>
  <input NOAJAX type=text size=5 name=A value=0 onChange="update('A');"> X
  <input NOAJAX type=text size=5 name=B value=0 onChange="update('B');"> =
  <input NOAJAX type=text size=5 name=C value=0 onChange="update('C');">
 </form>
</html>

<<overlay AJAX
 IF ISINTEGER(A) != "TRUE" THEN A=0 /IF
 IF ISINTEGER(B) != "TRUE" THEN B=0 /IF
 IF ISINTEGER(C) != "TRUE" THEN C=0 /IF
 C=A*B
 AJAXRETURN("a,b,c","","")
>>

Like before, changing data triggers AJAX requests. But in this scenario you define the JavaScript events and when data is sent to HTML/OS. Like before, an on-click Overlay called AJAX is used to capture requests, process them, and return data back to the page.

top

Note: AJAX overlays do not support creating links with GETLINK tags.

Start