[JavaScript] 비동기 AJAX

[JavaScript] 이벤트 핸들러 ( DOM )

[JavaScript] 자바스크립트 이벤트 핸들러 [JavaScript] 자바스크립트 기본 2 [JavaScript] 자바스크립트 기본 [HTML, CSS] CSS 문법 FLEX Flex 참고 사이트 CSS Flex 완벽 가이드 CSS Flex는 효율적인 레이아웃 설계를

hong-study.tistory.com

[JavaScript] 이벤트핸들러 ( BOM )

[JavaScript] 이벤트 핸들러 ( DOM ) [JavaScript] 자바스크립트 이벤트 핸들러 [JavaScript] 자바스크립트 기본 2 [JavaScript] 자바스크립트 기본 [HTML, CSS] CSS 문법 FLEX Flex 참고 사이트 CSS Flex 완벽 가이드 CSS Fle

hong-study.tistory.com

AJAX ( 비동기 통신 )

AJAX 는 Asynchronous Javascript and XML의 약자로 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술이다.
▶ 일반적인 경우 데이터 처리는 요청 순서대로 진행하지만, AJAX는 순차적으로 진행하지 않습니다.

이런 방식을 비동기 방식이라고 한다.

자바스크립트의 비동기 방식은 상당히 까다로운데, 이를 간단히 사용할 수 있게 해주는 최신 자바스크립트 API인 Fetch API를 이용하도록 한다.

참고문헌

Fetch API - Web API | MDN

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제입니다.

developer.mozilla.org

fetchAPI - AJAX

위를 보면 상당히 어려워 보이는 코드이지만, 생각보다 단순한 코드의 성격을 띈다.

fetch('test') 는 서버에 요청하는 코드이다.
then() 은 요청 후에 응답이 올 때까지 기다렸다가 응답이 오면 실행되는 함수이다.
▶ promise 는 자바스크립트 비동기처리에 이용되는 객체이다,

fetch(url) 로 요청이 실행되고, 끝나고 나면 .then 함수를 실행한다.
그리고 해당 작업이 끝이나면 callback() 이라는 메서드를 실행한다.

//1st
        // fetch('example.txt').then(function(response) {
        //     response.text().then(function(data) {
        //         console.log(data);
        //     })
        // });

        //2nd - fetch는 Promise객체를 반환합니다.
        //Promise
        //1. pending - ing중
        //2. fulfilled - 성공함
        //3. reject - 거절당함

        //then함수에 콜백함수 를 넣어주면, 요청이 완료되는데로, 콜백에 결과를 넣어줄게.
        //콜백함수? - 콜 했을 때 백 받을 함수, (성공결과를 돌려받을 약속된 함수)
        
        // var promise = fetch('example.txt')
        // promise.then( function(response) {
        //     console.log(response)
        // } );
       
        //3nd - 비동기적 - 순서가 지켜지지 않음 1 -> 3 -> 2
        console.log(1); 
        fetch('example.txt').then(function(response) {
            if(response.status == 200) { //응답성공 -> 작업을 수행해도 된다
            }

        })
        console.log(3);

        //4nd - 
        fetch('example.txt')
        .then(function(response) {
            if(response.status == 200) {
                //response.text() -> 반환은 Promise객체
                //then() 절 사용가능함
                //text() -> 문자열로 형변환
                //json() -> 오브젝트로 형변환
                //formData() -> 폼객체형태로 변환

                response.text().then(function(data) {
                    console.log(data);
                })
            }
        });

        //5nd - 콜백에서 리턴을 걸면 다시 fetch에서 then절로 그결과를 받을수 있음
        fetch('example.txt')
        .then(function(response) {
            return response.text();
        })
        .then(function(data) {
            return data + "hello";
        })
        .then(function(data) {
            return data + "bye";
        })
        .then(function(data) {
            console.log(data);
        });


        //6nd - 서로 약속된 형식의 json or xml형식을 사용함
        fetch('example.json')
        .then(function(response) {
            return response.json(); //json.parse를 대신함
        })
        .then(function(data) {
            console.log(data); //확인
        });

AJAX 비동기방식을 이용한 코로나 사망자 수 API 가져오기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button type="button" id="btn">데이터가져오기</button>

    <ul class="list">
        
    </ul>


    
    <script>
        var list = document.querySelector(".list");

        var btn = document.getElementById("btn");
        btn.onclick = function() {

            ajax();
            list.innerHTML = "<li>로딩중....</li>";
        }

        function ajax() {
            //http://apis.data.go.kr/1352000/ODMS_COVID_04/callCovid04Api
            
            var key = "S9LfRKek%2B30%2Bhr4OphAl2ow17HGbY7Ni57yYoXUhInhKKmAhPcCVKaGIHkDDdXpgO2B7ZRV79fA8R7QdBMR0EQ%3D%3D";

            fetch("http://apis.data.go.kr/1352000/ODMS_COVID_04/callCovid04Api?serviceKey=" + key + "&numOfRows=100&pageNo=1&apiType=JSON&std_day=2021-12-15")
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                console.log(data);
                
                var arr = data.items; //items데이터

                var str = "";
                for(var i = 0; i < arr.length; i++) {
                    var gubun = arr[i].gubun; //지역
                    var deathCnt = arr[i].deathCnt; //사망자수

                    //문자열 더하기
                    str += "<li><span>"+ gubun +"</span>사망자수:" + deathCnt + "</li>";

                }
                list.innerHTML = str;


            })

        }

       
       


    </script>


</body>
</html>

Ajax Parsing

//원격에서 받아온, xml파일을 변환하는 방법입니다.
        fetch("example.xml")
        .then(function(response) {
            return response.text(); //1. 일단 text로 받음
        })
        .then(function(data) {
            //console.log(data);
            //xml형으로 파싱

            var parsor = new DOMParser(); 
            var result = parsor.parseFromString(data, "text/xml") //파싱할 데이터, 타입
            //DOM에 접근하는 방법으로 접근이가능
            console.log(result);

            var datas = result.querySelectorAll("data") //data태그를 얻는다
            
            for(var i = 0; i < datas.length; i++) {
                var name = datas[i].querySelector("name")
                var version = datas[i].querySelector("version");
                var price = datas[i].querySelector("price");

                console.log(name.innerHTML);
                console.log(version.innerHTML);
                console.log(price.innerHTML);
            }

        })

JSON 이란

JSON(JavaScript Object Notation) 은 자바스크립트 객체로 구성된 데이터이다.
▶ 자바스크립트 객체 형태의 문자열인 셈이다.

서블릿(서버) 에서 AJAX로 응답할 때 객체를 어떻게 줄 것인가에 대한 의문이 생기는 데,
JSON 객체를 지원해주는 라이브러리를 이용해서 응답을 하거나, response 객체의 설정을 json 형식으로 지정한다.

728x90

'Programming > JavaScript' 카테고리의 다른 글

[JavsScript] API 활용 (0)	2024.03.07
[JavaScript] 이벤트핸들러 ( BOM ) (0)	2024.03.07
[JavaScript] 이벤트 핸들러 ( DOM ) (0)	2024.03.07
[JavaScript] 자바스크립트 이벤트 핸들러 (0)	2024.03.06
[JavaScript] 자바스크립트 기본 2 (0)	2024.03.06