티스토리 뷰

JavaScript

23-01-06 AJAX(비동기 통신) , 외부 API 가져오기

JadeStone 2023. 1. 6. 18:32

< AJAX - 비동기 통신 >

 

*화면 이동없이 데이터만 전송하는 기술.

*함수를 실행할 때 순서대로 실행해주는 거를 동기적 방식이라고 함. 

*함수가 실행되는데 이전함수가 실행되서 종료되기까지 기다리지 않고 바로바로 다음 함수들이 실행됨.

*API 미리 만들어져 있는 기능들을 통칭적으로 API 라고 함.

*fetch() API 

*promise = fetch(요청)  // promise객체를 반환   

 pending(진행중이라는 의미)

 reject(거절됨을 의미)                             반환을 promise객체로 받는다면 뒤에 .then(콜백함수) 함수 사용가능.  

 fullfilled(요청이 성공했음을 의미)          이때 콜백의 매개변수로 실행에 대한 결과(응답)를 받을 수 있음.

*비동기방식에서는 순서를 보장하지 않음.

 그래서 순서를 보장받기 위해서 fetch 내에 계속 fetch를 써서 작성하는 코드가 탄생하게됨.

 

 

*status가 200이라는 이야기는 성공했다는 의미.

 404 에러는 클라이언트 측 잘못 ,  500은 서버측 잘못

*사진 하단에 prototype를 열어보면 사용가능한 함수목록이 나옴.

-text() 데이터를 문자열로 담아서 돌려달라는 뜻.

-json() json형식으로 데이터를 돌려달라.

-formData() formData 형식으로 데이터를 달라는 의미.

 

#Ajax 기본

*index01(ajax기본).html

<body>

    <button onclick="ajax()">ajax요청</button>

    <script>

        /*
        비동기 - 웹페이지 이동없이 데이터만 주고받는 기술
        fetch()를 호출하면 Promise를 반환

        Promise
        -pending : 수행중
        -fullfiled : 성공
        -reject : 실패

        1.리턴 Promise라면 then(콜백함수)로 결과를 받을 수 있음

        */
        function ajax(){
            // 1st
            // var result = fetch("hi.txt");
            // result.then(function(response){
            //     console.log(response);
            // })

            //2nd
            /*
            fetch("hi.txt").then(function(response){
                
                if(response.status != 200){
                    alert("통신에 에러가 발생했습니다.");
                    return;
                }

                // var a = response.text();
                // console.log(a); //프로미스
                response.text().then(function(data){
                    console.log(data);
                });
            })
            */

            //3nd - 콜백에 리턴을 걸면 fetch가 다시 Promise를 반환
            //  fetch("hi.txt").then(function(res){
            //     return res.text(); //결과를 반환해주고 반환된 결과에. 찍고 계속 이어나가는 것.
            // }).then(function(data){
            //     return data;
            // }).then(function(data){
            //     console.log(data);
            // });

            //4nd - 비동기방식에서는 순서를 보장하지 않음

            console.log(1);

            fetch("hi.txt")
            .then(function(res){
                return res.text();
            })
            .then(function(data){
                console.log(2);
            })

            console.log(3);


        }

    </script>
    
</body>

*hi.txt

이거 비동기야~

 

#json 데이터 가져오기

*코드

    <button onclick="ajax()">json파일 ajax요청</button>
    <div class="result"></div>

    <script>
        function ajax(){

            fetch("hi.json")
            .then(function(res){
                return res.json(); //json형변환
            })
            .then(function(data){
                // console.log(data);//ok
                // console.log(data.id);//ok
                // console.log(data["id"]);//ok
                var result = document.querySelector(".result");
                result.innerHTML = data["id"];
            })

        }
    </script>

*hi.json

{
    "id" : "kkk123" ,
    "topic" : "ㅎㅎ..",
    "age" : 20
}

-json 파일 내부에서는 데이터가 이런식으로 작성됩니다.

 

 

 

# xml 파일을 json형식으로 받아오기.

-참고사이트 : https://bongra.tistory.com/293

*코드

    <button onclick="ajax2()">xml데이터 ajax요청</button>

    <script>
        function ajax2(){

            fetch("hi.xml")
            .then(function(res){
                // console.log(res.json()); //안됨
                return res.text();
            })
            .then(function(data){
                console.log(data);
                var result = new DOMParser().parseFromString(data, "text/xml");
                // console.log(result);
                // console.log(result.querySelector("datas"));

                var arr= result.querySelectorAll("datas > data");
                for(var i=0; i<arr.length; i++){
                    console.log(arr[i].querySelector("name").innerHTML);
                    console.log(arr[i].querySelector("version").innerHTML);
                    console.log(arr[i].querySelector("price").innerHTML);
                }
                

            })

        }
    </script>

*hi.xml 파일

<?xml version="1.0" encoding="UTF-8"?> 
    <datas> 
        <data> 
            <name>Windows</name> 
            <version>9</version> 
            <price>99</price> 
        </data> 
        <data> 
            <name>Mac</name> 
            <version>15</version> 
            <price>99999</price> 
        </data> 
        <data> 
            <name>Linux</name> 
            <version>123.4567</version> 
            <price>0</price>
        </data> 
    </datas>

-xml 파일에서 데이터는 태그형식으로 기록됩니다.

 

#외부 오픈API 가져오기.

 활용 했던 사이트 : https://www.data.go.kr/iim/api/selectAPIAcountView.do

*위와 같은 문서 꼭 읽어보고 해야함.

-코드

<body>

    <ul class="pageNation">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        //key
        var key = "3MUzJng8h%2FXodnameiUKsDfuqTgqsbGYAkYx0eFEMkWNCIMmi8LFlZXpuxdGBq4IbbZp%2FWTWH5GaMtDt9vVLsQ%3D%3D";
        var page = 1;

        var pageNation = document.querySelector(".pageNation");
        pageNation.onclick = function(){

            if(event.target.tagName !="LI") return;
            ajax(event.target.innerHTML);//데이터 호출(사용자가 클릭한 페이지번호)

        }

        function ajax(page){
            fetch("http://apis.data.go.kr/1360000/TourStnInfoService/getTourStnVilageFcst?ServiceKey=" +key+ "&pageNo="+page+"&numOfRows=10&dataType=JSON&CURRENT_DATE=2023010600&HOUR=24&COURSE_ID=1")
        .then(function(res){
            // console.log(res);
            return res.json();
        })
        .then(function(data){
            // console.log(data.response.body.items.item);

            var arr = data.response.body.items.item;
            for(var i=0; i<arr.length; i++){
                console.log(arr[i]);
                //................
            }

        })
        }

        (function(){
            ajax(1);
        })();

    </script>
    
</body>

 

 

 

 

<기억할 내용>

#카카오 API 로그인기능.

*https://developers.kakao.com/product

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

-쿼리스트링   ?key=값  으로 파라미터 매개변수로 받는것 .

 

 

*POST 방식으로 

content-type 을 form 형식으로 보내라.

 

 

 

 

*로그아웃

 

#카카오 지도 API

 

 

 

 

#API 가져오는거는 카카오가 제일 쉽다.

*swiper 라는 좋은 사이트도 있음.

 

# 선생님이 추천해주신 API 싸이트

https://gnews.io

 

News API: A Simple API to search and collect News and Blog Articles

GNews API is a simple REST API with which you can search for current and historic news articles published by over 60,000 sources.

gnews.io

 

#팀프로젝트 규칙

-주제 정하고. 필요한 UI 화면을 구성.

-css로 정적인 화면 만들고

-JS 로 기능들 붙이기.

-한사람당 한 페이지를 목적으로 해보기. 잘 되면 한사람당 2페이지 씩.

-js 문법을 공부하는 것을 목표로 하기.

-기간은 수요일 5시까지.

 

저작자표시

'JavaScript' 카테고리의 다른 글

23-01-20) JS ES6 문법 Promise, async, await  (0) 2023.01.21
JS ES6 문법 한눈에 보기  (0) 2023.01.12
23-01-05 JS ) location객체, history객체, navigator객체, 콜백함수, 쿠키, 세션 - localstorage와 sessionStorage  (0) 2023.01.05
23-01-04 DOM- form객체, 정규표현식, 날짜객체 / BOM - window팝업, window인터벌, window타임아웃  (0) 2023.01.04
23-01-03 클래스 속성 제어 실습, 다중이벤트, 이벤트전파, 이벤트전파원리, 이벤트전파여러클래스, 이벤트중단, 이벤트객체와 dataset  (2) 2023.01.03
댓글