構造化応答設計パターンは、構造化された HTTP 応答 (通常は XML としてエンコード) を処理するものです。多くの場合、一部の HTTP リクエストへの応答では、大量の HTML を送り返すと非効率的でコストが高くなるおそれがあります。ユーザ インタフェースのほんの一部を変更するだけならよいですが、複雑なユーザ インタフェースの場合には特にこの傾向が顕著になります。このような場合には、応答を XML にエンコードできます。その後はクライアントサイドの応答ハンドラで XML を解析し、応答に基づいてユーザ インタフェースを更新 (またはその他のアクションを実行) 可能です。構造化応答設計パターンを使用すると、HTTP リクエストの作成後にユーザ インタフェースの小さな領域を再描画できます。または、ページレット/ポートレットから単純な HTTP/URI タイプの Web サービスにアクセスできます。次のサンプル コード (structuredresponse_portlet.html) では、複数の新しいサイトからの RSS フィードにアクセスします。

<!-- jsxml インクルード -->
<a id="imgServerHref" href="pt://images/plumtree" style="display:none"></a>
<script type="text/javascript"
src="pt://images/plumtree/common/private/js/PTLoader.js"></script>
<script type="text/javascript">
var oImgServer = new Object();
oImgServer.location = document.getElementById('imgServerHref').href;
var imageServerURL = document.getElementById('imgServerHref').href;
var imageServerConnectionURL = oImgServer.location;
new PTLoader(imageServerURL, imageServerConnectionURL).include('jsxml','en');
</script>

<!-- jscontrols インクルード -->
<link rel="stylesheet" type="text/css" href="/portal-remote-server/js/jscontrols/styles/css/PTMenu.css"/>
<link rel="stylesheet" type="text/css" href="/portal-remote-server/js/jscontrols/styles/css/PTRichTextEditor.css"/>
<script type="text/javascript" src="/portal-remote-server/js/jscontrols/strings/PTControls-en.js"></script>
<script type="text/javascript" src="/portal-remote-server/js/jscontrols/PTControls.js"></script>

<!-- インライン JS ヘルパー関数 -->
<!-- 注意 : グローバル JavaScript 関数およびオブジェクト名を確実にユニークなものにするには、ネームスペース トークンを使用する手法 (例 : <pt:nameSpace pt:token="$$TOKEN$$" xmlns:pt="http://www.plumtree.com/xmlschemas/ptui/"/>) が標準的だが、ここでは簡素化のため行わない。
-->

<script defer type="text/javascript" id="structured-response-portlet-A-script">
// 指定した URL で発見された RSS XML フィードを取得する関数
getRSSFeed = function(url)
  {
  // はじめにテーブル内の既存の行をすべてクリア
  channelTable.clearRows();

  // トランスフォーマで URL を指定するように強制
  var oURL = new Object();
  oURL.location = url;

  // HTTP の取得を実行
  var get = new PTHTTPGETRequest(oURL.location, handleRSSResponse);
  get.invoke();
  }

// RSS XML 応答を処理し、RSS 項目に基づくテーブルを更新する関数
handleRSSResponse = function(response)
  {
  // RSS XML を取得
  var xml = response.responseText;
  if (!xml || xml.indexOf('<?xml') == -1) { return; }

  // DOM に解析してチャネル ノードを取得
  var xmlDOM = new PTXMLParser(xml);
  var rssNode = xmlDOM.selectSingleNode('rss');
  var channelNode = rssNode.selectSingleNode('channel');

  // チャネル タイトルを取得し、テーブルにステータス バーのテキストを設定
  var channelTitle = channelNode.selectSingleNode('title').getNodeValue();
  channelTable.statusBarText = '<b>Loaded Channel</b>: ' + channelTitle;

  // チャネル項目ノードを取得
  var itemNodes = channelNode.selectNodes('item');
  
  // テーブルの行を構築
  channelTable.rows = new Array();
  for (var i=0; i<itemNodes.length; i++)

    {
    var itemNode = itemNodes[i];

    // チャネル項目のプロパティを取得
    var itemTitle = itemNode.selectSingleNode('title').getNodeValue();
    var itemLink = itemNode.selectSingleNode('link').getNodeValue();
    var itemDescription = itemNode.selectSingleNode('description').getNodeValue();
    if (itemNode.selectSingleNode('author'))
      var itemAuthor = itemNode.selectSingleNode('author').getNodeValue();
    if (itemNode.selectSingleNode('category'))
      var itemCategory = itemNode.selectSingleNode('category').getNodeValue();
    if (itemNode.selectSingleNode('pubDate'))
      var itemPubDate = itemNode.selectSingleNode('pubDate').getNodeValue();

    // 行を作成してテーブルに追加
    var row = new PTRow();
    row.parent = channelTable;
    row.id = i;
    row.uid = i;
    row.previewText = itemDescription;
    row.link = itemLink;
    row.columnValues[0] = new PTTextColumnValue(itemTitle);
    row.columnValues[1] = new PTTextColumnValue(itemCategory);
    row.columnValues[2] = new PTTextColumnValue(itemAuthor);
    row.columnValues[3] = new PTTextColumnValue(itemPubDate);
    channelTable.rows[channelTable.rows.length] = row;
    }

  // テーブルを再描画
  channelTable.draw();
  }
</script>

<b>Select RSS Feed:</b>
<a href="#" onclick="getRSSFeed('http://www.wired.com/news/feeds/rss2/0,2610,,00.xml'); return false;">Wired News</a>
<a href="#" onclick="getRSSFeed('http://news.com.com/2547-1_3-0-5.xml'); return false;">CNET News.com</a>
<a href="#" onclick="getRSSFeed('http://partners.userland.com/nytRss/nytHomepage.xml'); return false;">NY Times</a>
<br><br>

<!-- テーブル コントロールを設定してチャネル項目を表示 -->
<div id="channelTableContainer"></div>
<script defer type="text/javascript">
  var channelTable = new PTTableControl();
  channelTable.locale = 'en_US';
  channelTable.objName = 'channelTable';
  channelTable.container = 'channelTableContainer';
  channelTable.baseURL = '/imageserver/plumtree/common/private/portal-remote-server/js/jscontrols/1/';
  channelTable.statusBarText = 'No RSS Feed Selected';
  channelTable.rowDetailAction = new PTJavaScriptAction('window.open(\'${ROW.link}\');');
  channelTable.columns[0] = new PTColumn();
  channelTable.columns[0].name = 'Title';
  channelTable.columns[0].width = '40%';
  channelTable.columns[1] = new PTColumn();
  channelTable.columns[1].name = 'Category';
  channelTable.columns[1].width = '20%';
  channelTable.columns[2] = new PTColumn();
  channelTable.columns[2].name = 'Author';
  channelTable.columns[2].width = '20%';
  channelTable.columns[3] = new PTColumn();
  channelTable.columns[3].name = 'Publication Date';
  channelTable.columns[3].width = '20%';
  channelTable.areColumnsResizable = true;
  channelTable.clientSortEnabled = true;
  channelTable.scrollHeight = 250;

  channelTable.init();
  channelTable.draw();
</script>
</div>