RxJS - AJAX Observable

Fiddle exploring how to create and subscribe to an observable that wraps the XmlHttpRequest function in order to perform a GET request. D3 is used for DOM injection/manipulation.

by wang_luke6

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<p id="target">
  requesting ...
</p>

CSS

body {
  font-family: "Courier New";
  font-size: small;
  text-align: center;
}

JavaScript

(function(undefined) {

  this.metadata = {
    fiddleHeader: 'Rx - AJAX Observable',
    urls: {
      github: 'https://hq.sinajs.cn/list=sz300339',
    },
    consoleTag: 'H O U S E ~ f i d d l e s'
  };


  this.request = function(url) {
    return Rx.Observable.create(function(observer) {
      var req = new XMLHttpRequest();
      req.open('GET', url);
      req.onload = function() {
        if (req.status == 200) {
          observer.onNext(req.response);
          observer.onCompleted();
        } else {
          observer.onError(req.statusText);
        }
      }
      req.onerror = function() {
        observer.onError(new Error("Unkown Error"));
      }
      req.send();
    });
  };

  this.start = this.request(this.metadata.urls.data);

  this.start.subscribe(
    function onNext(res) {
      console.log(res);
      d3.select("p#target")
        .text(res);
    },
    function onError(err) {
      console.log(err);
      d3.select("p#target")
        .text(err);
    },
    function onCompleted() {
      console.log('request complete');
    }
  );

  console.log("%c" + meta.consoleTag, 'font-style: italic; font-size: 20px;');
  console.log("%c" + meta.urls.github, "color: blue; font-style: italic; text-decoration: underline; background-color: #FFFF00;");
  console.group();

}.call(this));