This section describes how to configure an AJAX request
on the browser side.
Procedure
To configure an AJAX request on the browser side, do
the following steps:
- Create an XUI project.
- Open the Eclipse IDE, and then click .
- In the New window, expand the BTT folder,
and then click XUI Web Project. Click Next.
- On the BTT XUI Web Project page, enter detailed information
for the XUI project. Click Finish. An XUI project
is created for a processor that consists of one start page and one
final page.
- Create a self-defined AJAX request operation.
For
more information on how to create a self-defined operation, refer
to the Defining self-defined operations topic.
Figure 1 is
an example of a self-defined AJAX request operation.
Figure 1. Example self-defined AJAX request operation.<?xml version="1.0" encoding="UTF-8"?>
<testAjaxOp>
<operation id="testAjaxOp"
context="testAjaxCtx" implClass="com.ibm.btt.application.op.testAjaxOp">
</operation>
<context id="testAjaxCtx" type="op">
<refKColl refId="testAjaxKColl" />
</context>
<kColl id="testAjaxKColl" dynamic="false">
<field id="accNumber"/>
<field id="accBalance"/>
</kColl>
</testAjaxOp>
Note that in
Figure 1,
the self-defined AJAX operation retrieves the
accountNumber from
an outer-scope context at run time.
public class testAjaxOp extends BTTServerOperation {
@Override
public void execute() throws Exception {
String accNumber = (String)this.getValueAt("accountNumber");
float balance = getBalance(accNumber);
this.setValueAt("accNumber", accNumber);
this.setValueAt("accBalance", balance);
super.execute();
}
private float getBalance(String accNumber) {
return 1922.99f ;
}
}
- Create a page that contains a button that can be used to
initiate and submit an AJAX request.
- Expand your project folder in the Enterprise Explorer
pane, and then right-click the xui folder.
- Click .
- In the New window, expand the BTT folder,
and then click New XUI File. Click Next.
- In the File name field of the
Create XUI File page, enter a name for the XUI file. Click Finish.
The XUI file is created in the xui folder of
your project.
- In the Enterprise Explorer pane, double-click the XUI
file you have just created. The XUI file opens in the XUI editor.
- In the XUI editor, drag a Form container from the Palette
to the white editing area, and then drag the Button widget and all
other widgets that you require from the Palette into the Form container
that is in the XUI editor space.
- Configure the Button widget in the Form container as a
submit button.
- Click the Button widget that is in the Form container
that will be used to submit an AJAX request. The
properties of the Button displays in the Properties tab.
If the Properties tab is not open, click to open the Properties tab.
- In the Properties tab of the
Button view, click the Value column of the buttonType property.
- In the drop-down list in the Value column
of the buttonType property, select submit.
- Bind the AJAX request to the operation.
- Click the Button widget that will be used to submit
an AJAX request.
- Select the Rules tab in the Button
view of the Properties tab.
- In the Rules List panel of the Rules tab,
click the Add icon
to add an event to the Button widget. The
"Add a rule" window opens.
- In the Name field of the "Add
a rule" window, enter a name for the rule, and then click the Add icon
. The "Please select an event"
window opens.
- In the left panel, select the Button widget that will
be used to submit an AJAX request; in the right panel, select onClick.
Click OK.
- In the Actions panel of the Rules tab,
click the Add icon
. The "Please select a value" window opens.
- In the drop-down list, select Invoke Widget
Function.
- In the left panel, select the Form widget that contains
the Button widget that will be used to submit an AJAX request; in
the right panel, select the self-defined operation to which you want
to bind the AJAX request. Click OK. The self-defined operation
is bound to the Button widget and is called when an AJAX request is
submitted through the Button widget.
- Generate a JSP page.
- Right-click the XUI file that contains the Button widget
you have just configured that will be used to submit an AJAX request.
- Click . A new page under the Web Content folder
of your project is generated that contains JSP and JavaScript code.Figure 2 shows the .js and .jsp files
that are generated under the Web Content folder
of your project.
Figure 2. The .js and .jsp files
are generated under the Web Content folder.
- Deploy the project and check the AJAX request.
- In a browser, enter http://localhost:8080/TestAjax/EstablishSession to
deploy the XUI project. Press Enter. The page that you created in
the XUI editor displays.
- On the page, click the button that is used to submit
an AJAX request. An AJAX request is sent to the server and the data
that is required to process the request is then retrieved from the
processor context.