AipoでのAjaxについて

Ajaxとは

Ajaxとは「Asynchronous JavaScript + XML」の略
*Asynchronousとは、非同時性の、非同期の
つまり、「JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。」
画像の遷移のない通信を非同期通信と言います。
初心者目線でAjaxの説明 – Qiita

Aipoで言えば、プルダウンで選択した際に表示が変更される場合がAjaxの例。
詳細画面の表示は同期処理である。

AjaxのAipoでの実装方法

aipo.viewPageを使う。
aipo/war/src/main/webapp/javascript/aipo/aipo.jsに記述されている。

アプリ管理のソーシャルアプリが有効か無効かで表示を切り替える部分では、次のように利用されている。

<form class="auiForm floatLeft" action="#" method="post" style="margin-right:1em;" onsubmit="return false;">
<select onchange="aipo.viewPage(this.options[this.selectedIndex].value, '$!portlet.ID')" style="width:180px;">
<option value="$!utils.escapeXML($!jslink.getPortletById($!portlet.ID).addQueryData("template", $screen).addQueryData("filter","all").addQueryData("filtertype","status"))">$l10n.GADGETS_ALL_APP</option>
<option value="$!utils.escapeXML($!jslink.getPortletById($!portlet.ID).addQueryData("template", $screen).addQueryData("filter","1").addQueryData("filtertype","status"))" #if ($!result.CurrentFilter && $!result.CurrentFilter == "1") selected="selected" #end>$l10n.GADGETS_ENABLE_APP</option>
<option value="$!utils.escapeXML($!jslink.getPortletById($!portlet.ID).addQueryData("template", $screen).addQueryData("filter","0").addQueryData("filtertype","status"))" #if ($!result.CurrentFilter && $!result.CurrentFilter == "0") selected="selected" #end>$l10n.GADGETS_DISABLE_APP</option>
</select>

addQueryData(string,string)

はGet送信でパラメータをサーバーに渡す時に使われ、上の例ではURLパラメータの末尾に指定した値がされることになる。
次のように変換される。

<option value="http://localhost:8080/portal/js_peid/138?template=GadgetsAdminSocialListScreen&filter=all&filtertype=status">すべてのアプリ</option>