XMLHttpRequest as Document

use document as XML to load using XMLHttpRequest()

by Shobhit Sharma

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>xhr.responseType='document' Test</title>
<style>
body {
  background: url(http://www.html5rocks.com/static/images/html5rocks-logo-wings.png) no-repeat 95% 5%,
              url(http://www.html5rocks.com/static/images/background.png) repeat;
  background-attachment: fixed;
  background-size: 50% 50%, initial;
}
hgroup {
  text-align: center;
  margin-bottom: 20px;
  text-transform: uppercase;
}
h2, h3 {
  margin: 0;
  font-weight: 300;
}
ol {
  margin-top: 50px;
  width: 50%;
}
li {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.date {
  font-size: smaller;
}
.summary {
  margin-top: 10px;
}
img {
   height: 75px;
}
</style>
</head>
<body>

<ol><em>Loading articles...</em></ol>

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.html5rocks.com/en/tutorials/', true);
xhr.responseType = 'document';
xhr.onload = function(e) {
  var doc = e.target.response;

  var container = document.querySelector('ol');
  container.innerHTML = ''; // clear out.

  var articles = doc.querySelectorAll('article.tutorial_listing');

  var frag = document.createDocumentFragment();
  [].forEach.call(articles, function(art, i) {
    var title = art.querySelector('h3');
    var summary = art.querySelector('.summary');
    var date = art.querySelector('.date');

    // Only include certain types.
    if (['tutorial', 'casestudy', 'article'].indexOf(art.dataset.type) != -1) {
    var li = document.createElement('li');
      li.appendChild(title);
      li.appendChild(date);
      li.appendChild(summary);
      frag.appendChild(li);
    }
  });

  container.appendChild(frag);
};
xhr.send();
</script>
<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
</body>
</html>