XHR Range Fetches

by Edward

HTML

<ul>
    <li>Start <input type="number" id="start" value="100"/></li>
    <li>Stop <input type="number" id="stop" value="199"/></li>
    <li><input type="button" id="fetch" value="Fetch"/></li>
</ul>
<p>Output</p>
<textarea id="output">
</textarea>

CSS

ul {
    list-style: none;
    padding: 0;
}

ul > li {
    margin-bottom: 1ex;
}

textarea {
    width: 90%;
    height: 15em;
}

JavaScript

function doLog() {
    var text = Array.prototype.slice.call(arguments).join(' ');
    $('#output')[0].value += text + "\n";
}
function fetchRange(start, stop) {
    var xhr = new XMLHttpRequest;
    
    xhr.onreadystatechange = function () {
        if (xhr.readyState != 4) {
            return;
        }
        doLog(new Date());
        doLog("Status:", xhr.status, "--", xhr.statusText);
        doLog("Fetched:", xhr.response.byteLength, "bytes");
        doLog("Content-Type:", xhr.getResponseHeader('Content-Type'));
        doLog("Content-Range:", xhr.getResponseHeader('Content-Range'));
        doLog("Content-Length:", xhr.getResponseHeader('Content-Length'));
    };
    
    xhr.open('GET', 'http://fiddle.jshell.net/img/logo.png', true);
    xhr.responseType = 'arraybuffer';
    xhr.setRequestHeader('Range', 'bytes=' + start + '-' + stop);
    xhr.send(null);
}

$('#fetch').on('click', function() {
    fetchRange($('#start').val(), $('#stop').val());
});