Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
95 lines (73 sloc) 1.95 KB
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Basic XHR example</title>
html, pre {
font-family: sans-serif;
body {
width: 500px;
margin: 0 auto;
background-color: #ccc;
pre {
line-height: 1.5;
letter-spacing: 0.05rem;
padding: 1rem;
background-color: white;
label {
width: 200px;
margin-right: 33px;
select {
width: 350px;
padding: 5px;
<!--[if lt IE 9]>
<script src=""></script>
<h1>Basic XHR example</h1>
<label for="verse-choose">Choose a verse</label>
<select id="verse-choose" name="verse-choose">
<option>Verse 1</option>
<option>Verse 2</option>
<option>Verse 3</option>
<option>Verse 4</option>
<h2>The Conqueror Worm, <em>Edgar Allen Poe, 1843</em></h2>
var verseChoose = document.querySelector('select');
var poemDisplay = document.querySelector('pre');
verseChoose.onchange = function() {
var verse = verseChoose.value;
function updateDisplay(verse) {
verse = verse.replace(" ", "");
verse = verse.toLowerCase();
var url = verse + '.txt';
var request = new XMLHttpRequest();'GET', url);
request.responseType = 'text';
request.onload = function() {
poemDisplay.textContent = request.response;
updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';
You can’t perform that action at this time.