|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Example: JSON with Y.io</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
|
|
|
24 |
<h1>Example: JSON with Y.io</h1> |
|
|
25 |
<div class="yui3-g"> |
|
|
26 |
<div class="yui3-u-3-4"> |
|
|
27 |
<div id="main"> |
|
|
28 |
<div class="content"><div class="intro"> |
|
|
29 |
<p> |
|
|
30 |
A natural fit for the JSON module is to work with IO to parse JSON messages received via XMLHttpRequest (XHR). In this example, we'll request JSON data from the server using the <a href="http://yuilibrary.com/yui/docs/api/classes/IO.html#method_io"><code>Y.io()</code></a> method and parse the resulting JSON string data. |
|
|
31 |
</p> |
|
|
32 |
</div> |
|
|
33 |
|
|
|
34 |
<div class="example yui3-skin-sam"> |
|
|
35 |
<div id="demo" class="yui3-skin-sam"> |
|
|
36 |
<p>Click the <em>Get Messages</em> button to send the request to the server; the response will be displayed below the button.</p> |
|
|
37 |
<p><button>Get Messages</button></p> |
|
|
38 |
<div id="demo-messages"></div> |
|
|
39 |
</div> |
|
|
40 |
|
|
|
41 |
<script> |
|
|
42 |
// Create business logic in a YUI sandbox using the 'io' and 'json' modules |
|
|
43 |
YUI().use("node", "io", "dump", "json-parse", function (Y) { |
|
|
44 |
|
|
|
45 |
// capture the node that we'll display the messages in |
|
|
46 |
var target = Y.one('#demo-messages'); |
|
|
47 |
|
|
|
48 |
// Create the io callback/configuration |
|
|
49 |
var callback = { |
|
|
50 |
|
|
|
51 |
timeout : 3000, |
|
|
52 |
|
|
|
53 |
on : { |
|
|
54 |
success : function (x,o) { |
|
|
55 |
Y.log("RAW JSON DATA: " + o.responseText); |
|
|
56 |
|
|
|
57 |
var messages = [], |
|
|
58 |
html = '', i, l; |
|
|
59 |
|
|
|
60 |
// Process the JSON data returned from the server |
|
|
61 |
try { |
|
|
62 |
messages = Y.JSON.parse(o.responseText); |
|
|
63 |
} |
|
|
64 |
catch (e) { |
|
|
65 |
alert("JSON Parse failed!"); |
|
|
66 |
return; |
|
|
67 |
} |
|
|
68 |
|
|
|
69 |
Y.log("PARSED DATA: " + Y.Lang.dump(messages)); |
|
|
70 |
|
|
|
71 |
// The returned data was parsed into an array of objects. |
|
|
72 |
// Add a P element for each received message |
|
|
73 |
for (i=0, l=messages.length; i < l; ++i) { |
|
|
74 |
html += '<p>' + messages[i].animal + ' says "' + |
|
|
75 |
messages[i].message + '"</p>'; |
|
|
76 |
} |
|
|
77 |
|
|
|
78 |
// Use the Node API to apply the new innerHTML to the target |
|
|
79 |
target.setHTML(html); |
|
|
80 |
}, |
|
|
81 |
|
|
|
82 |
failure : function (x,o) { |
|
|
83 |
alert("Async call failed!"); |
|
|
84 |
} |
|
|
85 |
|
|
|
86 |
} |
|
|
87 |
}; |
|
|
88 |
|
|
|
89 |
// Attach a click event listener to the button #demo_btn to send the request |
|
|
90 |
Y.one('#demo button').on('click',function (e) { |
|
|
91 |
// Make the call to the server for JSON data |
|
|
92 |
Y.io("../assets/json/json-connect-response.json", callback); |
|
|
93 |
}); |
|
|
94 |
|
|
|
95 |
}); |
|
|
96 |
</script> |
|
|
97 |
|
|
|
98 |
</div> |
|
|
99 |
|
|
|
100 |
<h2>Use <code>Y.JSON.parse</code> in the <code>success</code> handler</h2> |
|
|
101 |
|
|
|
102 |
<p> |
|
|
103 |
Pass the XHR <code>responseText</code> to <code>Y.JSON.parse()</code> and capture the return value. Note that the <code>parse()</code> method can throw a <code>SyntaxError</code> exception, so be sure to wrap the call in a <code>try/catch</code> block. |
|
|
104 |
</p> |
|
|
105 |
|
|
|
106 |
<pre class="code prettyprint lang-javascript">Y.io('../assets/json/json-connect-response.json', { |
|
|
107 |
on : { |
|
|
108 |
success : function (tx, r) { |
|
|
109 |
var parsedResponse; |
|
|
110 |
|
|
|
111 |
// protected against malformed JSON response |
|
|
112 |
try { |
|
|
113 |
parsedResponse = Y.JSON.parse(r.responseText); |
|
|
114 |
} |
|
|
115 |
catch (e) { |
|
|
116 |
alert("JSON Parse failed!"); |
|
|
117 |
return; |
|
|
118 |
} |
|
|
119 |
} |
|
|
120 |
} |
|
|
121 |
});</pre> |
|
|
122 |
|
|
|
123 |
|
|
|
124 |
<p> |
|
|
125 |
The <code>parse()</code> method returns the native JavaScript object representation of the string data returned from the <a href="http://yuilibrary.com/yui/docs/api/classes/IO.html#method_io"><code>Y.io()</code></a> call. In this case, the data is an array of object literals in this form: |
|
|
126 |
</p> |
|
|
127 |
|
|
|
128 |
<pre class="code prettyprint lang-json">[ |
|
|
129 |
{ "animal" : "Cat", "message" : "Meow" }, |
|
|
130 |
{ "animal" : "Dog", "message" : "Woof" }, |
|
|
131 |
{ "animal" : "Cow", "message" : "Moo" }, |
|
|
132 |
{ "animal" : "Duck", "message" : "Quack" }, |
|
|
133 |
{ "animal" : "Lion", "message" : "Roar" } |
|
|
134 |
]</pre> |
|
|
135 |
|
|
|
136 |
|
|
|
137 |
<p> |
|
|
138 |
In the <code>success</code> handler we'll simply loop through this array and outputting its contents to the DOM. |
|
|
139 |
</p> |
|
|
140 |
|
|
|
141 |
<h2>Complete Example Source</h2> |
|
|
142 |
<pre class="code prettyprint"><div id="demo" class="yui3-skin-sam"> |
|
|
143 |
<p>Click the <em>Get Messages</em> button to send the request to the server; the response will be displayed below the button.</p> |
|
|
144 |
<p><button>Get Messages</button></p> |
|
|
145 |
<div id="demo-messages"></div> |
|
|
146 |
</div> |
|
|
147 |
|
|
|
148 |
<script> |
|
|
149 |
// Create business logic in a YUI sandbox using the 'io' and 'json' modules |
|
|
150 |
YUI().use("node", "io", "dump", "json-parse", function (Y) { |
|
|
151 |
|
|
|
152 |
// capture the node that we'll display the messages in |
|
|
153 |
var target = Y.one('#demo-messages'); |
|
|
154 |
|
|
|
155 |
// Create the io callback/configuration |
|
|
156 |
var callback = { |
|
|
157 |
|
|
|
158 |
timeout : 3000, |
|
|
159 |
|
|
|
160 |
on : { |
|
|
161 |
success : function (x,o) { |
|
|
162 |
Y.log("RAW JSON DATA: " + o.responseText); |
|
|
163 |
|
|
|
164 |
var messages = [], |
|
|
165 |
html = '', i, l; |
|
|
166 |
|
|
|
167 |
// Process the JSON data returned from the server |
|
|
168 |
try { |
|
|
169 |
messages = Y.JSON.parse(o.responseText); |
|
|
170 |
} |
|
|
171 |
catch (e) { |
|
|
172 |
alert("JSON Parse failed!"); |
|
|
173 |
return; |
|
|
174 |
} |
|
|
175 |
|
|
|
176 |
Y.log("PARSED DATA: " + Y.Lang.dump(messages)); |
|
|
177 |
|
|
|
178 |
// The returned data was parsed into an array of objects. |
|
|
179 |
// Add a P element for each received message |
|
|
180 |
for (i=0, l=messages.length; i < l; ++i) { |
|
|
181 |
html += '<p>' + messages[i].animal + ' says "' + |
|
|
182 |
messages[i].message + '"</p>'; |
|
|
183 |
} |
|
|
184 |
|
|
|
185 |
// Use the Node API to apply the new innerHTML to the target |
|
|
186 |
target.setHTML(html); |
|
|
187 |
}, |
|
|
188 |
|
|
|
189 |
failure : function (x,o) { |
|
|
190 |
alert("Async call failed!"); |
|
|
191 |
} |
|
|
192 |
|
|
|
193 |
} |
|
|
194 |
}; |
|
|
195 |
|
|
|
196 |
// Attach a click event listener to the button #demo_btn to send the request |
|
|
197 |
Y.one('#demo button').on('click',function (e) { |
|
|
198 |
// Make the call to the server for JSON data |
|
|
199 |
Y.io("../assets/json/json-connect-response.json", callback); |
|
|
200 |
}); |
|
|
201 |
|
|
|
202 |
}); |
|
|
203 |
</script></pre> |
|
|
204 |
|
|
|
205 |
</div> |
|
|
206 |
</div> |
|
|
207 |
</div> |
|
|
208 |
|
|
|
209 |
<div class="yui3-u-1-4"> |
|
|
210 |
<div class="sidebar"> |
|
|
211 |
|
|
|
212 |
|
|
|
213 |
|
|
|
214 |
<div class="sidebox"> |
|
|
215 |
<div class="hd"> |
|
|
216 |
<h2 class="no-toc">Examples</h2> |
|
|
217 |
</div> |
|
|
218 |
|
|
|
219 |
<div class="bd"> |
|
|
220 |
<ul class="examples"> |
|
|
221 |
|
|
|
222 |
|
|
|
223 |
<li data-description="Use JSON to parse data received via XMLHttpRequest via Y.io calls — a simple JSON use case."> |
|
|
224 |
<a href="json-connect.html">JSON with Y.io</a> |
|
|
225 |
</li> |
|
|
226 |
|
|
|
227 |
|
|
|
228 |
|
|
|
229 |
<li data-description="Use the replacer and reviver parameters to reconstitute object instances that have been serialized to JSON."> |
|
|
230 |
<a href="json-freeze-thaw.html">Rebuilding Class Instances from JSON Data</a> |
|
|
231 |
</li> |
|
|
232 |
|
|
|
233 |
|
|
|
234 |
|
|
|
235 |
<li data-description="Use a currency conversion calculation to add a new price member to a JSON response, demonstrating how JSON data, once retrieved, can be transformed during parsing."> |
|
|
236 |
<a href="json-convert-values.html">Adding New Object Members During Parsing</a> |
|
|
237 |
</li> |
|
|
238 |
|
|
|
239 |
|
|
|
240 |
|
|
|
241 |
|
|
|
242 |
|
|
|
243 |
|
|
|
244 |
</ul> |
|
|
245 |
</div> |
|
|
246 |
</div> |
|
|
247 |
|
|
|
248 |
|
|
|
249 |
|
|
|
250 |
<div class="sidebox"> |
|
|
251 |
<div class="hd"> |
|
|
252 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
253 |
</div> |
|
|
254 |
|
|
|
255 |
<div class="bd"> |
|
|
256 |
<ul class="examples"> |
|
|
257 |
|
|
|
258 |
|
|
|
259 |
|
|
|
260 |
|
|
|
261 |
|
|
|
262 |
|
|
|
263 |
|
|
|
264 |
|
|
|
265 |
<li data-description="A basic todo list built with the Model, Model List, and View components."> |
|
|
266 |
<a href="../app/app-todo.html">Todo List</a> |
|
|
267 |
</li> |
|
|
268 |
|
|
|
269 |
|
|
|
270 |
|
|
|
271 |
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation."> |
|
|
272 |
<a href="../dd/portal-drag.html">Portal Style Example</a> |
|
|
273 |
</li> |
|
|
274 |
|
|
|
275 |
|
|
|
276 |
</ul> |
|
|
277 |
</div> |
|
|
278 |
</div> |
|
|
279 |
|
|
|
280 |
</div> |
|
|
281 |
</div> |
|
|
282 |
</div> |
|
|
283 |
</div> |
|
|
284 |
|
|
|
285 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
286 |
<script>prettyPrint();</script> |
|
|
287 |
|
|
|
288 |
<script> |
|
|
289 |
YUI.Env.Tests = { |
|
|
290 |
examples: [], |
|
|
291 |
project: '../assets', |
|
|
292 |
assets: '../assets/json', |
|
|
293 |
name: 'json-connect', |
|
|
294 |
title: 'JSON with Y.io', |
|
|
295 |
newWindow: '', |
|
|
296 |
auto: false |
|
|
297 |
}; |
|
|
298 |
YUI.Env.Tests.examples.push('json-connect'); |
|
|
299 |
YUI.Env.Tests.examples.push('json-freeze-thaw'); |
|
|
300 |
YUI.Env.Tests.examples.push('json-convert-values'); |
|
|
301 |
YUI.Env.Tests.examples.push('app-todo'); |
|
|
302 |
YUI.Env.Tests.examples.push('portal-drag'); |
|
|
303 |
|
|
|
304 |
</script> |
|
|
305 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
306 |
|
|
|
307 |
|
|
|
308 |
|
|
|
309 |
</body> |
|
|
310 |
</html> |