HTML5 - Talking to The Web: Extroverted Apps - XMLHttpRequest

Head First HTML5 Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• Safari(Web browser)

Head First HTML5 Programming (Elisabeth Robson (著)、Eric Freeman (著)、O'Reilly Media)の Chapter 6.(Talking to The Web: Extroverted Apps)、CODE MAGNETS(No. 3668) を取り組んでみる。

CODE MAGNETS(No. 3668)

コード(Emacs)

HTML5

<button id="run0">run</button>
<button id="clear0">clear</button>
<pre id="output0"></pre>

<script src="sample1.js"></script>

JavaScript

let btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0');

let displayLuck = (luck) => {
    pre0.textContent += `Today you are ${luck}`;
};

let output = () => {
    let url = 'http://wickedlysmart.com/ifeelluckytoday',
        request = new XMLHttpRequest();

    request.onload = () => {
        if (request.status === 200) {
            displayLuck(request.responseText);
        } else {
            pre0.textContent += request.status + '\n';
        }
    };
    request.open('GET', url);
    request.send(null);
};


btn0.onclick = output;

btn1.onclick = () => {
    pre0.textContent = '';
};

output();