DataTable Control: XML Data Over XHR With POST

YUIのExample「DataTable Control: XML Data Over XHR With POST」へのリンク

このExampleは、先の「DataTable Control: JSON Data Over XHR」のXML版である。
違いは

YAHOO! Local Searchから取得するデータの形式がXML形式であること
HTTPのメソッドとしてPOSTを用いていること

だけである。

YAHOO! Local SearchはXMLを標準の出力形式としてもっているので、これはWeb ServiceへRESTリクエストを発行する際のqueryStringに、形式を指定するだけで変更できる。
あとは、DataSourceに対する属性の設定を変更する。
また、POSTメソッドへの変更も、DataSourceへの属性変更だけでよい。

出力される画面は、先の例と同じであるため省略する。

以下にJavascriptを含むHTMLの全文を示す。
サンプリングでは、先の例と同じ結果が得られるように、リクエストを複数回（3回）発行するように変更をした。JSONの場合との微妙な違いはソースコード中に注釈をつけてある。
また、この例でも、phpプログラムがConnection Managerに対してProxyの役割を担うが、phpプログラムも先の例のものを共用している。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Ajax Sample</title> 
 
<style type="text/css"> 
body {
	margin:0;
	padding:0;
}
</style> 

<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="scripts/yui/datatable/assets/skins/sam/datatable.css" /> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="scripts/yui/connection/connection-min.js"></script> 
<script type="text/javascript" src="scripts/yui/element/element-beta-min.js"></script> 
<script type="text/javascript" src="scripts/yui/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="scripts/yui/datatable/datatable-min.js"></script>  

<style type="text/css" id="defaultstyle">
#main {
	margin: 2px;
	padding: 3px;
}
  
</style>

<script type="text/javascript"> 
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.XHR_JSON = function() {

    	// カスタムフォーマッターの定義
    	// elCell; td、oRecord; レコードオブジェクト、sData: ※１でkey定義した変数値
        var formatUrl = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>";
        };
 
        var myColumnDefs = [
            // ※１
            {key:"Title", label:"Name", sortable:true, formatter:formatUrl},
            {key:"Phone"},
            {key:"City"},
            // ここはJSONのときと違って、AverageRatingノード名をピンポイントで指定する。
            {key:"AverageRating", label:"Rating",formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}
　　　　　　// ClickUrlはデータとしてとってくるが、カスタムフォーマッターに使うだけで、列定義しない。
        ];
 
        var myDataSource = new YAHOO.util.DataSource("ajax_yui_datatable_json_over_XHR.Proxy.php?");

        // MethodをPOSTに指定。
        myDataSource.connMethodPost = true;

        // DataSourceのタイプをTYPE_XMLに指定。
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;

        // Connection Managerに任せるRequestは待ち行列に入れる。
        myDataSource.connXhrMode = "queueRequests";
        
        myDataSource.responseSchema = {
            // ここはJSONのときと違って、ノード名をピンポイントで指定する。
            resultNode: "Result",
            fields: ["Title","Phone","City","AverageRating","ClickUrl"]
        };
 
        var myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs,
                myDataSource, {initialRequest:"query=pizza&zip=96815-3289&results=10"});

	// コールバック・ハンドラー（success）；thisはmyDataTable
	var mySuccessHandler = function() {
            // myDataTableに、コールバックデータ（arguments）をappendする。
            this.onDataReturnAppendRows.apply(this,arguments);
        };
        
	// コールバック・ハンドラー（failure）；thisはmyDataTable
        var myFailureHandler = function() {
            this.showTableMessage(YAHOO.widget.DataTable.MSG_ERROR, YAHOO.widget.DataTable.CLASS_ERROR);
            // myDataTableに、コールバックデータ（arguments）をappendする。
            this.onDataReturnAppendRows.apply(this,arguments);
        };

        // Connection Managerのコールバック・オブジェクト
        var callbackObj = {
            success : mySuccessHandler,
            failure : myFailureHandler,
			// call backハンドラーにはmyDataTableを渡す。
            scope : myDataTable
        };
        
	// 非同期にConnection Managerの待ち行列にリクエストを入れる。これらは、次々とテーブルにAppendされる。
        myDataSource.sendRequest("query=mexican&zip=96815-3289&results=10&output=xml",
                callbackObj);
 
	// 非同期にConnection Managerの待ち行列にリクエストを入れる。これらは、次々とテーブルにAppendされる。
        myDataSource.sendRequest("query=chinese&zip=96815-3289&results=10&output=xml",
                callbackObj);
                
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});
</script>
</head> 
 
<body class=" yui-skin-sam">
<div id="main">
<p>Yahoo! Local Searchからxmlデータを取得して、テーブルに表示します。</p>
<div id="xml"></div>
</div>
</body> 
</html>