ajax1.html

팡태(❁´◡`❁)·2021년 12월 13일
0

html/css/javascript

목록 보기
5/20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax1.html</title>
    <link href="css/mystyle1.css" rel="stylesheet" />
</head>
<body>
    <div class="container1">
        <table border="1">
            <thead>
                <tr>
                    <th>꽃받침 길이</th>
                    <th>꽃받침 너비</th>
                    <th>꽃잎 길이</th>
                    <th>꽃잎 너비</th>
                    <th>꽃의 품종</th>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    </div>

    <script>
        const tbody = document.getElementById("tbody");   // const 어쩌고 -> 변수 명. 지정하는거임 임의로
        
        let xhr = new XMLHttpRequest();  // 호출하기 위한 라이브러리
        const url = 'https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json'
        xhr.open('GET', url)   // 호출주소
        xhr.send();     // 호출

        xhr.addEventListener('load', function(){   // Listener -> 로드되는 타이밍을 모르니까 기다리는거임
            const data = JSON.parse(xhr.response)  // JSON.parse(@@@) string타입을 object로 바꿈
            console.log(data);
            console.log(typeof data);     // data의 타입 확인 <필수!!>

            for(let tmp of data) {
                tbody.innerHTML +=     // 이 데이터들 Listener 안에 넣어야함
                    "<tr>" +           
                        `<td>${tmp.petalLength}</td>` +
                        `<td>${tmp.petalWidth}</td>` +
                        `<td>${tmp.sepalLength}</td>` +
                        `<td>${tmp.sepalWidth}</td>` +
                        `<td>${tmp.species}</td>` +
                    "</tr>"
            }
        });
    </script>
</body>
</html>

0개의 댓글