JavaScript_2018/2-async-xhr.html at master · CWMe/JavaScript_2018 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>

<body>
    Search: <input type="text" id="movieTitle"><br>
    <button onclick="displayMovie()">Search </button>
    <div id="title"></div>
    <div id="poster"></div>
    <script>
        function displayMovie() {
            let keyword = document.getElementById("movieTitle").value;
            let url = "http://www.omdbapi.com/?t=" + keyword + "&apikey=d9429fd1";
            let json = requestAsync(url);
            //let results = JSON.parse(json);
            //document.getElementById("title").innerHTML = `${results.Title}"`;
            //document.getElementById("poster").innerHTML = `<img src="${results.Poster}" alt=${results.Title}>`;
        }

        function request(url) {
            let r = new XMLHttpRequest();
            r.onreadystatechange = () => {
                if (r.readyState == 4 && r.status == 200) {
                    console.log(r.responseText); //print to console just for fun
                }
            }
            r.open("GET", url, false);
            r.send();
            return r.responseText;
        }

        function render(response) {
            let results = JSON.parse(response);
            document.getElementById("title").innerHTML = `${results.Title}"`;
            document.getElementById("poster").innerHTML = `<img src="${results.Poster}" alt=${results.Title}>`;
        }

        function requestAsync(url) {
            var r = new XMLHttpRequest();
            r.open('GET', url);
            r.onload = function() {
                if (r.readyState == 4 && r.status == 200) {
                    render(r.response);
                } else {
                    console.log('Woah, thats a big, fat HTTP ERROR', r.statusText);
                }
            };
            r.onerror = function() {
                console.log('Something wrong with the tubes...');
            };
            r.send();
        }
    </script>
</body>

</html>