Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(476)

Side by Side Diff: src/site/docs/tutorials/fetchdata/index.markdown

Issue 20778002: more link tweaking (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: getting ready for push Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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 ![Use the getString() function to make a request](images/getstringfunction.png) 308 ![Use the getString() function to make a request](images/getstringfunction.png)
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
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
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 &lt;ul&gt; element on the page. 436 and adds it to the &lt;ul&gt; element on the page.
437 437
438 ![Getting the response text from an HTTP GET request](images/portmanteaux-callba ck.png) 438 ![Getting the response text from an HTTP GET request](images/portmanteaux-callba ck.png)
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
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 %}
OLDNEW
« no previous file with comments | « src/site/docs/tutorials/custom-elements/index.markdown ('k') | src/site/docs/tutorials/forms/index.markdown » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698