OLD | NEW |
1 --- | 1 --- |
2 layout: default | 2 layout: default |
3 title: "Fetch Data Dynamically" | 3 title: "Fetch Data Dynamically" |
4 description: "Use HttpRequest to fetch data from a file or a server." | 4 description: "Use HttpRequest to fetch data from a file or a server." |
5 has-permalinks: true | 5 has-permalinks: true |
6 tutorial: | 6 tutorial: |
7 id: fetchdata | 7 id: fetchdata |
8 next: forms | 8 next: forms/ |
9 next-title: "Get Input from a Form" | 9 next-title: "Get Input from a Form" |
10 prev: custom-elements | 10 prev: custom-elements/ |
11 prev-title: "Define a Custom DOM Tag" | 11 prev-title: "Define a Custom DOM Tag" |
12 --- | 12 --- |
13 | 13 |
14 {% capture whats_the_point %} | 14 {% capture whats_the_point %} |
15 | 15 |
16 * Data on the web is often formatted in JSON. | 16 * Data on the web is often formatted in JSON. |
17 * JSON is text based and human readable. | 17 * JSON is text based and human readable. |
18 * The dart:json library provides support for JSON. | 18 * The dart:json library provides support for JSON. |
19 * Use HttpRequest to dynamically load data. | 19 * Use HttpRequest to dynamically load data. |
20 | 20 |
(...skipping 26 matching lines...) Expand all Loading... |
47 {% endcapture %} | 47 {% endcapture %} |
48 | 48 |
49 {% capture content %} | 49 {% capture content %} |
50 | 50 |
51 <div class="tute-target-title"> | 51 <div class="tute-target-title"> |
52 <h1>{{page.title}}</h1> | 52 <h1>{{page.title}}</h1> |
53 <h3>Get data from a file or server.</h3> | 53 <h3>Get data from a file or server.</h3> |
54 </div> | 54 </div> |
55 | 55 |
56 Web applications often use | 56 Web applications often use |
57 <a href="http://www.json.org" target="_blank">JSON</a> (JavaScript Object Notati
on) | 57 <a href="http://www.json.org/" target="_blank">JSON</a> (JavaScript Object Notat
ion) |
58 to pass data between clients and servers. | 58 to pass data between clients and servers. |
59 Data can be _serialized_ into a JSON string, | 59 Data can be _serialized_ into a JSON string, |
60 which is then passed between a client and server, | 60 which is then passed between a client and server, |
61 and revived as an object at its destination. | 61 and revived as an object at its destination. |
62 This target shows you how to use functions in the | 62 This target shows you how to use functions in the |
63 <a href="http://api.dartlang.org/dart_json.html" | 63 <a href="https://api.dartlang.org/dart_json.html" |
64 target="_blank">dart:json</a> | 64 target="_blank">dart:json</a> |
65 library to produce and consume JSON data. | 65 library to produce and consume JSON data. |
66 Because JSON data is typically loaded dynamically, | 66 Because JSON data is typically loaded dynamically, |
67 this target also shows how a web app | 67 this target also shows how a web app |
68 can use an HTTP request to get data from an HTTP server. | 68 can use an HTTP request to get data from an HTTP server. |
69 For web apps, | 69 For web apps, |
70 HTTP requests are served by the browser in which the app is running, | 70 HTTP requests are served by the browser in which the app is running, |
71 and thus are subject to the browser's security restrictions. | 71 and thus are subject to the browser's security restrictions. |
72 | 72 |
73 * [About JSON](#about-json) | 73 * [About JSON](#about-json) |
(...skipping 13 matching lines...) Expand all Loading... |
87 can be serialized and represented by strings. | 87 can be serialized and represented by strings. |
88 | 88 |
89 **Try it!** | 89 **Try it!** |
90 The app running below, `its_all_about_you`, | 90 The app running below, `its_all_about_you`, |
91 displays the JSON string for data of various types. | 91 displays the JSON string for data of various types. |
92 Change the values of the input elements | 92 Change the values of the input elements |
93 and check out the JSON format for each data type. | 93 and check out the JSON format for each data type. |
94 | 94 |
95 <iframe class="running-app-frame" | 95 <iframe class="running-app-frame" |
96 style="height:500px;width:700px;" | 96 style="height:500px;width:700px;" |
97 src="http://dart-lang.github.com/dart-tutorials-samples/web/target09/its
_all_about_you/web/out/its_all_about_you.html"> | 97 src="http://dart-lang.github.io/dart-tutorials-samples/web/target09/its_
all_about_you/web/out/its_all_about_you.html"> |
98 </iframe> | 98 </iframe> |
99 | 99 |
100 The complete source code is available on github: | 100 The complete source code is available on github: |
101 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get09/its_all_about_you" | 101 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get09/its_all_about_you" |
102 target="_blank">its_all_about_you</a>. | 102 target="_blank">its_all_about_you</a>. |
103 Because this application uses the Web UI package, | 103 Because this application uses the Web UI package, |
104 you need to compile as described in | 104 you need to compile as described in |
105 <a href="/docs/tutorials/web_ui/">Target 6: Get Started with Web UI</a>. | 105 <a href="/docs/tutorials/web-ui/">Target 6: Get Started with Web UI</a>. |
106 | 106 |
107 The dart:json library contains two top-level functions | 107 The dart:json library contains two top-level functions |
108 for working with JSON strings: | 108 for working with JSON strings: |
109 | 109 |
110 | dart:json function | Description | | 110 | dart:json function | Description | |
111 |---|---| | 111 |---|---| |
112 | <a href="http://api.dartlang.org/dart_json.html" target="_blank">parse()</a> |
Builds Dart objects from a string containing JSON data. | | 112 | <a href="https://api.dartlang.org/dart_json.html" target="_blank">parse()</a>
| Builds Dart objects from a string containing JSON data. | |
113 | <a href="http://api.dartlang.org/dart_json.html" target="_blank">stringify()</
a> | Serializes a Dart object into a JSON string. | | 113 | <a href="https://api.dartlang.org/dart_json.html" target="_blank">stringify()<
/a> | Serializes a Dart object into a JSON string. | |
114 {: .table} | 114 {: .table} |
115 | 115 |
116 The parse() and stringify() functions can handle these Dart types automatically: | 116 The parse() and stringify() functions can handle these Dart types automatically: |
117 <ul> | 117 <ul> |
118 <li> num</li> | 118 <li> num</li> |
119 <li> String</li> | 119 <li> String</li> |
120 <li> bool</li> | 120 <li> bool</li> |
121 <li> null</li> | 121 <li> null</li> |
122 <li> List</li> | 122 <li> List</li> |
123 <li> Map</li> | 123 <li> Map</li> |
(...skipping 142 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
266 which uses headers in an HTTP request | 266 which uses headers in an HTTP request |
267 to ask for and receive permission. | 267 to ask for and receive permission. |
268 CORS is server-specific and not yet widely used. | 268 CORS is server-specific and not yet widely used. |
269 </aside> | 269 </aside> |
270 | 270 |
271 The SDK provides these useful classes for | 271 The SDK provides these useful classes for |
272 formulating URIs and making HTTP requests: | 272 formulating URIs and making HTTP requests: |
273 | 273 |
274 | Dart code | Library | Description | | 274 | Dart code | Library | Description | |
275 |---|---| | 275 |---|---| |
276 | <a href="http://api.dartlang.org/dart_uri/Uri.html" target="_blank">Uri</a> |
dart:uri | An object representing a URI. | | 276 | <a href="https://api.dartlang.org/dart_uri/Uri.html" target="_blank">Uri</a> |
dart:uri | An object representing a URI. | |
277 | <a href="http://api.dartlang.org/dart_html/HttpRequest.html" target="_blank">H
ttpRequest</a> | dart:html | Client-side HTTP request object. For use in web ap
ps. | | 277 | <a href="https://api.dartlang.org/dart_html/HttpRequest.html" target="_blank">
HttpRequest</a> | dart:html | Client-side HTTP request object. For use in web a
pps. | |
278 | <a href="http://api.dartlang.org/dart_io/HttpRequest.html" target="_blank">Htt
pRequest</a> | dart:io | Server-side HTTP request object. Does not work in web
apps. | | 278 | <a href="https://api.dartlang.org/dart_io/HttpRequest.html" target="_blank">Ht
tpRequest</a> | dart:io | Server-side HTTP request object. Does not work in web
apps. | |
279 {: .table} | 279 {: .table} |
280 | 280 |
281 ##Using the getString() function to load a file {#using-getString-function} | 281 ##Using the getString() function to load a file {#using-getString-function} |
282 | 282 |
283 One useful HTTP request your web app *can* make is a GET request | 283 One useful HTTP request your web app *can* make is a GET request |
284 for a data file served from the same origin as the app. | 284 for a data file served from the same origin as the app. |
285 The example below, | 285 The example below, |
286 `portmanteaux_simple`, includes a data file | 286 `portmanteaux_simple`, includes a data file |
287 called `portmanteaux_simple.json` that contains a JSON-formatted list of words. | 287 called `portmanteaux_simple.json` that contains a JSON-formatted list of words. |
288 When you click the button, | 288 When you click the button, |
289 the app makes a GET request of the server | 289 the app makes a GET request of the server |
290 and loads the file. | 290 and loads the file. |
291 | 291 |
292 **Try it!** Click the button. | 292 **Try it!** Click the button. |
293 | 293 |
294 <iframe class="running-app-frame" | 294 <iframe class="running-app-frame" |
295 style="height:400px;width:300px;" | 295 style="height:400px;width:300px;" |
296 src="http://dart-lang.github.com/dart-tutorials-samples/web/target09/por
tmanteaux_simple/web/portmanteaux_simple.html"> | 296 src="http://dart-lang.github.io/dart-tutorials-samples/web/target09/port
manteaux_simple/web/portmanteaux_simple.html"> |
297 </iframe> | 297 </iframe> |
298 | 298 |
299 You can find the complete source code for this sample on github at | 299 You can find the complete source code for this sample on github at |
300 <a href="http://github.com/dart-lang/dart-tutorials-samples/tree/master/web/targ
et09/portmanteaux_simple/" | 300 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get09/portmanteaux_simple/" |
301 target="_blank">portmanteaux_simple</a>. | 301 target="_blank">portmanteaux_simple</a>. |
302 | 302 |
303 This program uses a convenience method, | 303 This program uses a convenience method, |
304 `getString()`, | 304 `getString()`, |
305 provided by the HttpRequest class | 305 provided by the HttpRequest class |
306 to request the file from the server. | 306 to request the file from the server. |
307 | 307 |
308  | 308  |
309 | 309 |
310 The getString() method uses a Future object to handle the request. | 310 The getString() method uses a Future object to handle the request. |
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
373 you need to create an HttpRequest object, | 373 you need to create an HttpRequest object, |
374 configure its header and other information, | 374 configure its header and other information, |
375 and use the `send()` method to make the request. | 375 and use the `send()` method to make the request. |
376 | 376 |
377 This section looks at a new | 377 This section looks at a new |
378 version of the portmanteaux example | 378 version of the portmanteaux example |
379 that has been rewritten | 379 that has been rewritten |
380 to use an explicitly constructed HttpRequest object. | 380 to use an explicitly constructed HttpRequest object. |
381 You can find the complete source code for the modified version | 381 You can find the complete source code for the modified version |
382 on github at | 382 on github at |
383 <a href="http://github.com/dart-lang/dart-tutorials-samples/tree/master/web/targ
et09/portmanteaux/" | 383 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get09/portmanteaux/" |
384 target="_blank">portmanteaux</a>. | 384 target="_blank">portmanteaux</a>. |
385 | 385 |
386 ###Setting up the HttpRequest object | 386 ###Setting up the HttpRequest object |
387 | 387 |
388 The mouse-click handler for the button | 388 The mouse-click handler for the button |
389 creates an HttpRequest object, | 389 creates an HttpRequest object, |
390 configures it with a URI and callback function, | 390 configures it with a URI and callback function, |
391 and then sends the request. | 391 and then sends the request. |
392 Let's take a look at the Dart code: | 392 Let's take a look at the Dart code: |
393 | 393 |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
433 the code easily converts the JSON-formatted list of words | 433 the code easily converts the JSON-formatted list of words |
434 to a Dart list of strings, | 434 to a Dart list of strings, |
435 creates a new LIElement for each one, | 435 creates a new LIElement for each one, |
436 and adds it to the <ul> element on the page. | 436 and adds it to the <ul> element on the page. |
437 | 437 |
438  | 438  |
439 | 439 |
440 ###Populating the UI from JSON | 440 ###Populating the UI from JSON |
441 | 441 |
442 The data file in the portmanteaux example, | 442 The data file in the portmanteaux example, |
443 <a href="http://raw.github.com/dart-lang/dart-tutorials-samples/master/web/targe
t09/portmanteaux/web/portmanteaux.json" | 443 <a href="https://github.com/dart-lang/dart-tutorials-samples/master/web/target09
/portmanteaux/web/portmanteaux.json" |
444 target="_blank">portmanteaux.json</a>, | 444 target="_blank">portmanteaux.json</a>, |
445 contains a JSON-formatted list of strings. | 445 contains a JSON-formatted list of strings. |
446 | 446 |
447 {% highlight dart %} | 447 {% highlight dart %} |
448 [ | 448 [ |
449 "portmanteau", "fantabulous", "spork", "smog", | 449 "portmanteau", "fantabulous", "spork", "smog", |
450 "spanglish", "gerrymander", "turducken", "stagflation", | 450 "spanglish", "gerrymander", "turducken", "stagflation", |
451 "Brangelina", "freeware", "oxbridge", "palimony", | 451 "Brangelina", "freeware", "oxbridge", "palimony", |
452 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank" | 452 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank" |
453 ] | 453 ] |
(...skipping 12 matching lines...) Expand all Loading... |
466 | 466 |
467 Check out Chris Buckett's article, | 467 Check out Chris Buckett's article, |
468 <a href="/articles/json-web-service/" | 468 <a href="/articles/json-web-service/" |
469 target="_blank">Using Dart with JSON Web Services</a>, | 469 target="_blank">Using Dart with JSON Web Services</a>, |
470 for more information and an example with source code for both | 470 for more information and an example with source code for both |
471 client and server programs. | 471 client and server programs. |
472 | 472 |
473 {% endcapture %} | 473 {% endcapture %} |
474 | 474 |
475 {% include tutorial.html %} | 475 {% include tutorial.html %} |
OLD | NEW |