I learnt this stuff years ago but with the rise of jQuery I like many others had become lazy. Add the fact that so many browsers handled things slightly different going down the library route had its benefits.
It is 2017 and things have improved many jQuery(ish) approaches have been adopted by Javascript and browsers have become more similar.
So here goes. First off a GET request to retrieve a Chuck Norris joke
<script>
var url = "http://api.icndb.com/jokes/random";
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
printJokes(request.responseText);
} else {
// We reached our target server, but it returned an error
console.log('There was a problem. Status:' + request.status);
}
};
request.onerror = function() {
console.log('There was a problem!');
};
request.send();
var printJokes = function(jokes){
JSON.parse(jokes, (key, value) => {
key == 'joke' ?
console.log(value) : ''
});
}
</script>