Subscribe via RSS Feed

Handling Asynchronous HTTP Requests in Google DART

September 20, 2013 2 Comments

We have previously written a start-up tutorial in Google Dart – which is - Google Dart – language of Structural Web ApplicationsIn Current Post we will try to explain the handling of Asynchronous HTTP Requests in Google Dart.

Google Dart

In Google Dart, handling of HTTP Request (Asynchronous Web Request Handling) s fairly easy. If the reader has knowledge of making Ajax request with our old xmlhttpobject in javascript, he/she will have the same essence while coding in Google DART.

First, the HTML file to show the placeholder for showing the data from Asynchronous HTTP Requests -

The HTML code snippet is commented below.

    <!DOCTYPE html>
    <html>
        <head>
             <meta charset="utf-8">
             <title>Http Request Example</title>
             <link rel="stylesheet" href="httprequest.css">
        </head>
        <body>
             <h1>Email IDs.</h1>
             <button id="getWords">Get Email IDs from JSon</button>
             <ul id="wordList"> <!-- Here li elements will be added in jSon -->
             </ul>

             <script type="application/dart" src="httprequesttest.dart"></script>
             <script src="packages/browser/dart.js"></script>
    </html>

Following is the DART file which is responsible for accessing the Data. The code is also commented here.

 
import 'dart:html';
import 'dart:json' as json;                       // Import of json library to parse json data.
var wordList;

void main() {
  query('#getWords').onClick.listen(makeRequest);  // the 'makerequest' function is registered in onclick event
                                                   // of 'getWords' button.
  wordList = query('#wordList');
}

void makeRequest(Event e) {
  var path = 'sample.json';                       // The data to be taken from json file 
  var httpRequest = new HttpRequest();
  httpRequest                                     // httprequest handler class to execute async request
      ..open('GET', path)
      ..onLoadEnd.listen((e) => requestComplete(httpRequest))
      ..send('');
}

requestComplete(HttpRequest request) {
   print(request.status);
   print(request.statusText);

   if (request.status == 200) {
       List samples = json.parse(request.responseText); // Logic for parsing json

       for (int i = 0; i < samples.length; i++) {
           var myObject = samples[i];
           print( myObject['email']);                   // get the value in a linkedhashmp object
           wordList.children.add(new LIElement()..text = myObject['email']);
      }
  } else {
      wordList.children.add(new LIElement()..text =
        'Request failed, status={$request.status}');
  }
}

The json file structure for which the parsing is valid is -

 

[
    {
        "id": 0,
        "guid": "8342a440-ea51-4382-ab61-153c7cbdb3a7",
        "isActive": false,
        "balance": "$3,525.00",
        "picture": "http://placehold.it/32x32",
        "age": 20,
        "name": "Ronda Noel",
        "gender": "female",
        "company": "Jimbies",
        "email": "[email protected]",
        "phone": "+1 (987) 487-3899",
        "address": "770 Grove Street, Dyckesville, North Carolina, 8451",
        "about": "Cupidatat consequat eiusmod elit est tempor ea. Enim non fugiat magna proident proident quis anim officia eu. Eu consectetur ex qui ad ipsum ea laborum nisi irure duis aliquip pariatur nisi. Magna sunt cillum ullamco irure occaecat.\r\n",
        "registered": "1998-07-17T00:24:36 -06:-30",
        "latitude": -21.933147,
        "longitude": -86.831863,
        "tags": [
            "anim",
            "aute",
            "ad",
            "dolore",
            "duis",
            "qui",
            "fugiat"
        ],
        "friends": [
            {
                "id": 0,
                "name": "Coleman Mcdonald"
            },
            {
                "id": 1,
                "name": "Agnes Chen"
            },
            {
                "id": 2,
                "name": "Nguyen Vaughan"
            }
        ],
        "randomArrayItem": "lemon"
    }
]

Related posts :

HTML Handling with Google Dart

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner