| 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 |