/gist:3581825
Last active Aug 8, 2018
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