To many people, AJAX is almost synonymous with XMLHttpRequest, the API that allows client programs to communicate asynchronously with a server. This example page shows the Hello World example for AJAX communication using a Backbase form.

The most common way to send information to a server is by submitting a form. The action attribute in the form determines the server-side script that that is called. Normally, the invoked script builds a complete HTML page in response, and this page will replace the page that was present when the form was submitted.

Using the Backbase framework, you can submit a form in the same way. Just by adding a destination to the form, will cause the submit data to be sent asynchronously. Instead of refreshing the complete page, the contents of the response will be put at the defined destination.

As a server scripting language, we use PHP in our example, because we assume that the majority of developers will be able to understand it. In addition, we show what the response file that PHP generates looks like, so that you can infer how to code an AJAX response in other languages.

The Beginner Tutorial contains a more complex example and it includes a JSP response file in addition to the PHP response. The Java community will be interested in the Struts Connector and JSP products of Backbase.

Below you can see a snapshot of what the result could be of executing the example. You can try out the live demo later on this page.

Prerequisites and Intended Audience

It is assumed that you are familiar with both the Hello World - Part 1 and Hello World - Part 2 examples.

The Page with the Form

The skeleton page looks similar to the page shown in Hello World - Part 1, except for a namespace declaration: xmlns:bf="http://www.backbase.com/2007/forms"

We need to add this namespace declaration to the html tag in order to use the bf:destination form attribute.

In the body of the page, we have a form with an input field and a submit button.

To make it easier for you, the complete HTML page is shown below. Create a file in the helloWorld folder that you created in the first tutorial, name it helloServer.html, and then add the following content:

Listing: Hello World, the Client Part.

Note: The version number of the Client Framework release is specified in the [version] folder name (for example, 4_3_0). If your version is different from the one shown here, you must adapt the code shown below accordingly.

To see this Hello World example in action, open a browser and type something like this in the address bar: http://localhost/examples/helloWorld/helloServer.html.

The result will be similar to what is shown in the following live demo:

The PHP Response

From the action that is specified in the form, you can see that response.php will be invoked when the form is submitted. The form also specifies a bf:destination. This means that the Backbase engine will consider the form submit as an AJAX submit using XMLHttpRequest. To you as a developer it is completely transparent that asynchronous communication is being used, however:

• At the client side, you have to consider where the response of the server should go. In our example it is a div with the id server-response-area.
• You must specify also how the server response will be placed with respect to other DOM nodes at the destination. By default, this is appendChild, but by using the bf:mode attribute you can replace the contents of the destination, append as first child, and so forth.
• The server script that receives the request should be aware that it should not send a complete page in return, and that the response should be valid XHTML.

The Response Script

Listing: Hello World, PHP Response.

In order for the browser to recognize that it is XML that it receives, the response header must be set appropriately. Using PHP, you can do this as follows: header('Content-type: application/xml'); If your scripting language is JSP, you could code: response.setHeader("Content-Type", "application/xml");

For those of you that are not so familiar with PHP, we show here an example of a response file that might have been generated by response.php:

Listing: Hello World, the Actual Response File.

The server response includes a timestamp of when the response is sent. We did this to show that the page as it was really stays put. By entering new information in the input field and pressing the submit button, a new line will be appended in the yellow box were the server messages are shown.

If you have ever coded forms in any language, you will appreciate that the data a user entered in the form stays visible. There is no need to refresh the form with data saved on the server if the user made a mistake or if the form does not validate. All you have to do is display an informational message and the user can re-submit the form, as many times as is needed.

Download

You can download a zipped version of the example provided on this page to try it out for yourself.

Note: Make sure to extract the content of this zip file to the root folder of your web server or application server (for example, htdocs), and then run it from your local development environment.

Additional Resources

As a next step, you may want to read more about development using the Client Framework:

• Beginner Tutorial
• Application Development Guide
• Client Reference