JavaScript DHTML/YUI Library/XHR — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 13:02, 26 мая 2010
Содержание
Textual Data Over XHR
<source lang="html4strict">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Textual Data Over XHR</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/datatable/assets/skins/sam/datatable.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datatable/datatable-min.js"></script>
<style type="text/css">
/* custom styles for this example */
- textWithHeaderData {margin-top:2em;}
</style>
</head> <body class=" yui-skin-sam">
Textual Data Over XHR
This example demonstrates how to populate a DataTable with delimited text data over XHR. In the second instance, the data includes header data as the first row, which is parsed out with a custom implementation of the DataSource method doBeforeCallback().
<script type="text/javascript"> YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.XHR_Text = function() { var formatUrl = function(elCell, oRecord, oColumn, sData) { elCell.innerHTML = "<a href="" + oRecord.getData("Url") + "" target="_blank">" + sData + "</a>"; }; var myColumnDefs = [ {key:"Name", sortable:true, formatter:formatUrl}, {key:"Phone"}, {key:"City"}, {key:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} ]; var myDataSource = new YAHOO.util.DataSource("yui_2.7.0b-assets/datatable-assets/php/text_proxy.txt"); //myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; myDataSource.responseSchema = { recordDelim: "\n", fieldDelim: "|", fields: ["Name","Address","City","Phone",{key:"Rating",parser:"number"},"Url"] }; var myDataTable = new YAHOO.widget.DataTable("text", myColumnDefs, myDataSource, {caption:"Example: Textual Data Over XHR"});
var moreColumnDefs = [ {key:"Restaurant", sortable:true, formatter:formatUrl}, {key:"Location"}, {key:"Town"}, {key:"Stars", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} ]; var anotherDataSource = new YAHOO.util.DataSource("yui_2.7.0b-assets/datatable-assets/php/text_with_headers_proxy.txt"); anotherDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; anotherDataSource.responseSchema = { recordDelim: "\n", fieldDelim: "|", fields: ["Restaurant","Location","Town","Telephone",{key:"Stars",parser:"number"},"Url"] }; // Upgrade note: As of 2.5.0, the second argument is the full type-converted // response from the live data, and not the unconverted raw response anotherDataSource.doBeforeCallback = function(oRequest, oFullResponse, oParsedResponse) { // Remove the first result (i.e., the headers); oParsedResponse.results.shift(); return oParsedResponse; }; anotherDataTable = new YAHOO.widget.DataTable("textWithHeaderData", moreColumnDefs, anotherDataSource, {caption:"Example: First Record Holds Header Data"}); return { oDS: myDataSource, oDT: myDataTable, oDS2: anotherDataSource, oDT2: anotherDataTable }; }();
}); </script>
</body>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
XML Data Over XHR With POST
<source lang="html4strict">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>XML Data Over XHR With POST</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/datatable/assets/skins/sam/datatable.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datatable/datatable-min.js"></script>
</head> <body class=" yui-skin-sam">
XML Data Over XHR With POST
This examples makes a POST query to the Yahoo! Local webservice to populate a DataTable.
<script type="text/javascript"> YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.XHR_XML = function() { 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"}, {key:"AverageRating", label:"Rating",formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} ]; var myDataSource = new YAHOO.util.DataSource("yui_2.7.0b-assets/datatable-assets/php/ylocal_proxy.php?"); myDataSource.connMethodPost = true; myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; myDataSource.responseSchema = { resultNode: "Result", fields: ["Title","Phone","City",{key:"AverageRating",parser:"number"},"ClickUrl"] }; var myDataTable = new YAHOO.widget.DataTable("xml", myColumnDefs, myDataSource, {initialRequest:"query=pizza&zip=94089&results=10"}); return { oDS: myDataSource, oDT: myDataTable }; }();
}); </script>
</body>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>