The external type of AJAX request prompts the servlet to replace a specified area of one page with a specified area of a second page. Like the refresh type of request, you can pass parameters to the second page. The onPreRenderFunction function can receive these parameters with the J2EELib.getQueryParameter system function.
With this type of request, you specify an area of the first page to be updated, an event to trigger the request, and optionally any parameters to be passed along with the request. Unlike the other types of request, the external AJAX request goes to another page, so the request must specify the page to send the request to and the control from that page to use in place of the first page.
Because the onPreRenderFunction runs when the page first loads as well as on every AJAX request, you might want to detect which case has caused the function to run. You can do this by testing for the value of the parameter $$ajaxmode. When the function runs as the result of a normal page loading operation, this parameter has a null value; when the function runs as the result of an AJAX request, the parameter will contain a value.
function onPreRender()
if (J2EELib.getQueryParameter("$$ajaxmode") == NULL)
//The page is loading for the first time.
//Perform page loading operations here.
else
//The page is loading as the result of an AJAX request.
//Perform AJAX updating operations here.
end
end
outputText = "Hello "::J2EELib.GetQueryParameter("nameText")::"!";
Do this by adding a JSF behavior to an input control on the page and then selecting an event to trigger the request. The control containing the behavior does not need to be within the panel control, but only input controls can trigger requests.
For example, you can make the AJAX request occur when the user moves the focus into a particular control. In this case, you use the onFocus event. To perform the request when the user moves focus away from a particular control, you use the onBlur event. Other commonly used events include onClick, onMouseOver, and onSelect.
<h:inputText id="nameText" value="#{myPage.name}"
binding="#{myPage.name_Ref}" styleClass="inputText" >
<hx:behavior event="onblur" id="behavior1"
behaviorAction="get" targetAction="updatablePanel">
</hx:behavior>
</h:inputText>
The behavior might look like this example:
If you leave this field blank, the request will retrieve the entire source page (that is, everything within the <body> tag), not just the panel control.
The parameters in the table labeled Parameter values sent from the browser refer to the value of input controls on the target page. For example, if you want to pass the current value of an input control on the page as a parameter, add that input control's ID here.
The parameters in the table labeled Parameter values calculated on the server refer either to literal values you type here or to the value of variables in the source page's JSF Handler.
<hx:ajaxExternalRequest id="ajaxExternalRequest1"
target="sourcePanel" params="nameText"
href="sourcePage.faces" soure="replacePanel">
</hx:ajaxExternalRequest>
Now when the request is triggered on the target page, the servlet will pass the AJAX external request to the source page, along with any parameters. The servlet invokes the onPreRenderFunction function on the source page and when that function has finished, it removes the panel from the source page and inserts it into the target page.
The following example shows two pages that work together with an AJAX external request as explained in this topic. The target page includes a group of check boxes that allow the user to select a value. The AJAX request passes this value to the source page, which renders a replacement panel based on the value of the message.
The page and its request look like this example:

The following is the code of the target page, named targetPage.jsp:
<html>
<head>
<title>targetPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="theme/stylesheet.css"
title="Style">
</head>
<f:view>
<body>
<hx:scriptCollector id="scriptCollector1">
<h:form id="form1" styleClass="form">
<h:panelGroup id="targetPanel" styleClass="panelGroup">
<h:outputText id="promptMessage" styleClass="outputText"
value="What is your favorite type of friut?">
</h:outputText>
<h:selectOneRadio disabledClass="selectOneRadio_Disabled"
enabledClass="selectOneRadio_Enabled" id="fruitName"
styleClass="selectOneRadio">
<f:selectItem itemValue="bananas" itemLabel="bananas" />
<f:selectItem itemValue="apples" itemLabel="apples" />
<f:selectItem itemValue="grapes" itemLabel="grapes" />
</h:selectOneRadio>
<hx:behavior event="onchange" target="fruitName"
behaviorAction="get" targetAction="targetPanel">
</hx:behavior>
</h:panelGroup>
<hx:ajaxExternalRequest id="ajaxExternalRequest1"
target="targetPanel" href="sourcePage.faces"
source="sourcePanel" params="fruitName">
</hx:ajaxExternalRequest>
</h:form>
</hx:scriptCollector>
</body>
</f:view>
</html>
The following is the JSF Handler that would go with this page, named targetPage.egl:
package jsfhandlers;
handler targetPage type JSFHandler
{view = "targetPage.jsp"}
end
No special code is required in the JSF Handler for the target page. Because this example uses an external request, the request goes to the source page, so that page's JSF Handler will process the request.
Following is the code of the source page, named sourcePage.jsp:
<html>
<head>
<title>sourcePage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="theme/stylesheet.css"
title="Style">
</head>
<f:view>
<body>
<hx:scriptCollector id="scriptCollector1"
preRender="#{sourcePage._preRender}" postRender="#{sourcePage._postRender}">
<h:panelGroup id="sourcePanel" styleClass="panelGroup">
<h:outputText id="text1" styleClass="outputText"
value="#{sourcePage.message}" binding="#{sourcePage.message_Ref}">
</h:outputText>
</h:panelGroup>
</hx:scriptCollector>
</body>
</f:view>
</html>
This page contains a panel control that will be used to replace the panel on the target page. In this case, the panel contains a single output field that is bound to a variable in the page's JSF Handler. The page looks like this:

Following is the JSF Handler that would go with this page, named sourcePage.egl:
package jsfhandlers;
handler sourcePage type JSFHandler
{onPreRenderFunction = onPreRender,
view = "sourcePage.jsp"}
message string = "No value set";
function onPreRender()
if (J2EELib.getQueryParameter("fruitName") != null)
case (J2EELib.getQueryParameter("fruitName"))
when ("bananas")
message = "Bananas are a yellow tropical fruit.";
when ("grapes")
message = "Grapes grow on vines and can be made into wine.";
when ("apples")
message = "Apples grow on trees in many parts of the world";
end
end
end
end
This JSF Handler's onPreRenderFunction function first detects whether the function has been called as the result of an AJAX request. If so, the JSF Handler updates the text control on the page to show a message based on the value of the parameter passed along with the request. The request then uses the contents of the panel on the source page to replace the contents of the panel on the target page.