5
<title>Example: DataSource.Get</title>
6
<link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
<link rel="stylesheet" href="../assets/css/main.css">
8
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
<script src="../../build/yui/yui-min.js"></script>
14
<h1>Example: DataSource.Get</h1>
19
<div id="main" class="yui3-u">
20
<div class="content"><style scoped>
21
/* custom styles for this example */
22
#demo .output {margin-bottom:1em; padding:10px; border:1px solid #D9D9D9;}
26
<p>DataSource.Get uses the Get Utility to retrieve data, even cross-domain resources, via a dynamically created script node. A <a href="../dataschema/">DataSchema</a> plugin is used to normalize incoming data into a known format for consistency of usage by other components. Please note that your data resource must support a callback mechanism, which is a function wrapper around the returned data. The name of the callback function is passed to the resource via a query string parameter defined by the DataSource.Get attribute <code>scriptCallbackParam</code>.</p>
29
<div class="example yui3-skin-sam">
37
"created":"2011-06-15T04:36:13Z",
43
"name": "PGA Fall Expo 2011",
44
"start_date": "2011-08-01",
45
"venue_name": "The Venetian Congress and Sands Expo Convention Center",
50
"name": "NAHC 30th Annual Meeting & Exposition",
51
"start_date": "2011-10-01",
52
"venue_name": "Mandalay Bay Resort",
57
"name": "Water and Society 2011-First International Conference on Water and Society",
58
"start_date": "2011-12-05",
59
"venue_name": "Richard Tam Alumni Center",
72
resultListLocator: "query.results.event",
73
resultFields: ["name"]
77
<h6>Normalized data</h6>
78
<input type="button" id="demo_json" value="Retrieve data">
79
<div id="demo_output_json" class="output"></div>
82
<script type="text/javascript">
83
YUI().use("json-stringify", "node", "datasource-get", "datasource-jsonschema", function (Y) {
84
var myDataSource = new Y.DataSource.Get({
85
source: "http://query.yahooapis.com/v1/public/yql?format=json&"
88
myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
90
resultListLocator: "query.results.event",
91
resultFields: ["name"]
95
Y.on("click", function(e){
96
// See what's happening in Las Vegas (woeid 2436704)
97
myDataSource.sendRequest({
98
request: "q=select%20*%20from%20upcoming.events.bestinplace%20where%20woeid=2436704",
100
success: function(e){
101
Y.one("#demo_output_json")
102
.setContent("<pre>" +
103
Y.JSON.stringify(e.response, null, 4)
104
.replace(/&/g,"&")
105
.replace(/</g,"<")
106
.replace(/>/g,">") +
109
failure: function(e){
110
Y.one("#demo_output_json")
111
.setContent("Could not retrieve data: " + e.error.message);
122
<p>Use a DataSourceJSONSchema plugin to parse the data against a schema that you provide:</p>
124
<pre class="code prettyprint">YUI().use("datasource-get", "datasource-jsonschema", function(Y) {
125
var myDataSource = new Y.DataSource.Get({
126
source: "http://query.yahooapis.com/v1/public/yql?format=json&"
129
myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
131
resultListLocator: "query.results.result",
132
resultFields: ["title"]
136
myDataSource.sendRequest({
137
request: "q=select%20*%20from%20upcoming.events.bestinplace...",
139
success: function (e) { /* output to screen */ },
140
failure: function (e) { /* output to screen */ }
150
<div id="sidebar" class="yui3-u">
154
<div class="sidebox">
156
<h2 class="no-toc">Examples</h2>
160
<ul class="examples">
163
<li data-description="The Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements.">
164
<a href="datasource-local.html">DataSource.Local</a>
169
<li data-description="The Get DataSource, which manages retrieval of data from remote sources via the Get Utility, can be useful for accessing data from cross-domain servers without the need for a proxy.">
170
<a href="datasource-get.html">DataSource.Get</a>
175
<li data-description="The IO DataSource manages retrieval of data from remote sources, via the IO Utility.">
176
<a href="datasource-io.html">DataSource.IO</a>
181
<li data-description="The Function DataSource, which manages retrieval of data from a JavaScript function, provides a highly customizeable mechanism for implementer-defined data retrieval algorithms">
182
<a href="datasource-function.html">DataSource.Function</a>
187
<li data-description="Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.">
188
<a href="datasource-caching.html">DataSource with Caching</a>
193
<li data-description="The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.">
194
<a href="datasource-offlinecache.html">DataSource with Offline Cache</a>
199
<li data-description="Use the Pollable extension to enable polling in your DataSource.">
200
<a href="datasource-polling.html">DataSource with Polling</a>
212
<div class="sidebox">
214
<h2 class="no-toc">Examples That Use This Component</h2>
218
<ul class="examples">
235
<li data-description="How to provide autocomplete suggestions using a DataSource instance.">
236
<a href="../autocomplete/ac-datasource.html">Remote Data via DataSource</a>
248
<script src="../assets/vendor/prettify/prettify-min.js"></script>
249
<script>prettyPrint();</script>