Using xhr.responseType='document' with CORS
<!DOCTYPE html> | |
<!-- | |
Copyright 2012 Eric Bidelman | |
Licensed under the Apache License, Version 2.0 (the "License"); | |
you may not use this file except in compliance with the License. | |
You may obtain a copy of the License at | |
http://www.apache.org/licenses/LICENSE-2.0 | |
Unless required by applicable law or agreed to in writing, software | |
distributed under the License is distributed on an "AS IS" BASIS, | |
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
See the License for the specific language governing permissions and | |
limitations under the License. | |
Author: Eric Bidelman (ebidel@) | |
--> | |
<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; | |
} | |
.title { | |
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('.articles-list li'); | |
var frag = document.createDocumentFragment(); | |
[].forEach.call(articles, function(art, i) { | |
var title = art.querySelector('.title'); | |
var summary = art.querySelector('.description'); | |
var date = art.querySelector('.date'); | |
var li = document.createElement('li'); | |
li.appendChild(title); | |
li.appendChild(date); | |
li.appendChild(summary); | |
frag.appendChild(li); | |
}); | |
container.appendChild(frag); | |
}; | |
xhr.send(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment