JavaScript/ajax.html at main · EagerProgrammer/JavaScript · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!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>ajax-text</title>
    <script>
        window.addEventListener("load", (e)=>{
            //필요한 DOM찾아오기
            let csv = document.getElementById("csv");
            let json1 = document.getElementById("json");
            let json2 = document.getElementById("json2");
            let content = document.getElementById("content");

            json2.addEventListener("click", (e)=>{
                let request = new XMLHttpRequest();
                request.open('GET', 'data2.json')
                request.send('')
                request.addEventListener("load", (e)=>{
                    //JSON 파싱을 해서 Javascript 데이터로 바꿔줌
                    let result = JSON.parse(request.responseText);
                    //필요한 데이터만 추출해서 사용 - parsing
                    let count = result.count;
                    let documents = result.document;

                    content.innerHTML = "데이터 개수:"+count;
                    for(doc of documents){
                        content.innerHTML += "<p>"+doc.name + "</p>";
                    }
                })
                request.addEventListener("error",(e)=>{
                    alert(request.status);
                })
            })


            json1.addEventListener("click", (e)=> {
                let request = new XMLHttpRequest();
                request.open('GET', 'data1.json');
                request.send('');
                request.addEventListener("load", (e)=>{
                    let result = JSON.parse(request.responseText);//Json은 parse해줘야함 객체로
                    content.innerHTML += "<p>이름:" + result.name+ "</p>";
                    content.innerHTML += "<p>직업:" + result.job+ "</p>"
                })
                request.addEventListener("error",(e)=>{
                    alert(request.status);
                })
            })

            //csv버튼을 눌렀을 때
            csv.addEventListener("click", (e) =>{
                    //ajax 요청 객체 생성
                    let request = new XMLHttpRequest();
                    //연결 준비-첫번째는 요청 방식, 두번째는 URL
                    request.open('GET', 'data.csv')
                    //요청 - 데이터와 함께 전송해야하는데 지금은 없음
                    request.send('');
                    //요청을 받기 위한 콜백 등록
                    //정상 응답이 온 경우
                    request.addEventListener("load", ()=>{
                        //XML이외의 데이터 읽기
                        //읽은 데이터,로 구분된 csv 형식
                        let ar = request.responseText.split(",");
                        for(name of ar){
                            content.innerHTML += '<p>' + name + '</p>'
                        }
                    })
                    //에러가 발생했을 때 처리
                    request.addEventListener("error", ()=>{
                        alert(request.status);//왜 에러가 났는지 보는 법
                    })
            })
        })
    </script>
</head>
<body>
    <button id="csv">csv 읽기</button>
    <button id="json">json읽기</button>
    <button id="json2">json2 읽기</button>
    <div id="content">출력 영역</div>
</body>
</html>