AJAXタグの定義（3） ―外部コンテンツの取得―
外部コンテンツの取得： <hx:ajaxExternalRequest>
<hx:ajaxExternalRequest>では、親タグのコンテンツを別のページのコンテンツで置き換える方法を定義します。置き換えるためのコンテンツはHTTPGETメソッドで取得します。このタグは1つのJSPを他のJSPのコンテンツに組み込みたいときに役に立ちます。
このタグの使い方を、順を追って見ていきましょう。
- ［File］→［New］→［Other］→［Web］→［Web Page］をクリックし、新規JSFページ「ajaxExternalRequestExample.jsp」を作成します。
- ［File］→［New］→［Other］→［Web］→［Web Page］をクリックし、新規JSFページ「externalPage.jsp」を作成します。ページ内に「External Page is Loaded!」と入力します。
- Sourceモードで「ajaxExternalRequestExample.jsp」を開きます。
- ［Palette］ペインで、［Enhanced Faces Components］をクリックします（Webパースペクティブにいることを確認してください）。
- Panel Groupコンポーネントをパレットからページにドラッグ＆ドロップします。
- Text Outputコンポーネントをパレットから手順5で追加したパネルにドラッグ＆ドロップします。コンポーネントの値を「External Page will be loaded here.」に設定します。
- Panel Groupを選択し、［Properties］→［AJAX］をクリックします。［Allow Ajax Updates］をクリックして、Ajaxリクエストを［External］に設定します。
- 手順7で追加した
<hx:ajaxExternalRequest>タグをクリックし、さらに［Properties］をクリックしてください。URLフィールドに「externalPage.faces」と入力します。 - サーバー上でこのページを実行してみましょう（Websphere 6.1以上で実行していることを確認してください）。
- コードが正しく動作するかどうかをテストしてください。
図17 ajaxExternalRequestExample.jspページの新規作成
図18 ［Palette］ペインの画面
図19 AJAXプロパティの画面
図20 AjaxExternalRequestのプロパティ
図21 AjaxExternalRequestサンプルの出力結果
リスト8は、ここまで作成してきたサンプルの全ソースコードです。全体のソースコードはこの記事のダウンロードサンプルにも収録されています。
リスト8 AjaxExternalRequestの全ソースコード
<f:view>
<body>
<hx:scriptCollector id="scriptCollector1">
<h:form id="form1" styleClass="form">
<hx:commandExButton type="submit"
value="Submit"
id="button1"
styleClass="commandExButton">
<hx:behavior event="onclick"
behaviorAction="get;stop"
targetAction="group1">
</hx:behavior>
</hx:commandExButton>
<h:panelGroup id="group1" styleClass="panelGroup">
<h:outputText id="text2"
styleClass="outputText"
value="External Page will be loaded here!">
</h:outputText>
</h:panelGroup>
<hx:ajaxExternalRequest id="ajaxExternalRequest1"
target="group1"
href="externalPage.faces"
source="group1">
</hx:ajaxExternalRequest>
</h:form>
</hx:scriptCollector>
</body>
</f:view>
参考
AJAXのコンポーネント（WebSphere Information Center）
