Recent site activity

4. Api‎ > ‎dart:html‎ > ‎Interface‎ > ‎EventTarget‎ > ‎HttpRequest‎ > ‎

Asynchronous

Asynchronously resource retrieval

Projects
  • BRest - I'm building a lightweight rest api
Same Origin Examples

Asynchronous XMLHttpRequest of the same origin
#import('dart:html');
#import("dart:json");

void onSuccess(XMLHttpRequestProgressEvent event, XMLHttpRequest request) {
 
print(event.loaded); // 0
 
print(request.statusText); // ok
 
print(request.responseText); // "(resource text)"
}

/**
 * test.txt file must be of the same origin
 * Or the response header must contain "Access-Control-Allow-Origin: [*|origin]"
 */

void main() {
 
String url = "test.txt";  
 
XMLHttpRequest request = new XMLHttpRequest();
  request
.open("GET", url, async : true);
  request
.on.loadEnd.add((XMLHttpRequestProgressEvent e) => onSuccess(e, request));
  request
.send();
}


Cross Origin Resource Sharing Examples

CORS or Cross-Origin Resource Sharing for CORS enabled domains
#import('dart:html');
#import("dart:json");

void onSuccess(XMLHttpRequest request) {
 
print(request.statusText); // ok
 
print(request.responseText); // "(http://www.html5rocks.com/en/tutorials/file/xhr2/ source)"
}

/**
 * HTML5 rocks has CORS enabled so we can load a cross site resource
 * The response header contains "Access-Control-Allow-Origin: *"
 */

void main() {
 
String url = "http://www.html5rocks.com/en/tutorials/file/xhr2/";  
 
XMLHttpRequest request = new XMLHttpRequest();
  request
.open("GET", url, async : true);
  request
.on.loadEnd.add((e) => onSuccess(request));
  request
.send();
}


Handler & Callback Example 
Simple lightweight requesting with callback for on success and failure. - Source
#library('Request');

#import('dart:html');
#import("dart:json");

typedef void RequestHandler(String responseText);

typedef void ErrorHandler(String error);

class ResourceRequest {
 
XMLHttpRequest request;
 
RequestHandler _callbackOnSuccess;
 
ErrorHandler _callbackOnFailure;
 
 
ResourceRequest.openGet(String url, RequestHandler callbackOnSuccess, [ErrorHandler callbackOnFailure])
   
: request = new XMLHttpRequest(),
      _callbackOnSuccess
= callbackOnSuccess,
      _callbackOnFailure
= callbackOnFailure {
    request
.open("GET", url, async : true);
    request
.on.loadEnd.add((XMLHttpRequestProgressEvent e) => onLoadEnd(e));
 
}
 
 
void send() {
    request
.send();
 
}

 
void onLoadEnd(XMLHttpRequestProgressEvent event) {
   
if (request.readyState == 4 && request.status == 200) {
      _callbackOnSuccess
(request.responseText);
   
} else if (_callbackOnFailure != null) {
      _callbackOnFailure
(request.statusText);
   
}
 
}
 
}

Show simple use of onSuccess and onFailure callbacks
#import('dart:html');
#import('../rest/ResourceRequest.dart');

void main() {
  String url = "http://www.html5rocks.com/en/tutorials/file/xhr2/";
  ResourceRequest request = new ResourceRequest.openGet(url, onSuccess, onFailure);
  request.send();
}

void onSuccess(String s) {
  print(s);
}

void onFailure(String s) {
  print(s);
}



Comments