자바스크립트 비동기 통신 기본 (JavaScript Asynchronous communication)

자바 스크립트 비동기 통신 (Java Script Asynchronous communication)

1. 동기식, 비동기식 비교

동기식
웹 브라우저에서 서버에 요청을 보내고 응답을 받는다.
모든 정보를 받기 때문에 화면이 하얗게 되면서 응답이 끝날 때까지 다른 작업을 할 수 없다.
비동기식
웹 브라우저에서 서버에 요청을 보내고 응답에 상관하지 않는다.
그렇기 때문에 화면이 하얗게 되는 것도 없고, 서버로부터 응답이 끝나지 않더라도 다른 작업을 할 수 있다.

2. 데이터 형식 : 데이터를 주고 받을 때에는 특정 형식으로 맞춰주어야 한다.

CSV (Comma-Separated Value) : 쉼표를 기준으로 항목을 구분하여 저장한 데이터
XML (eXtensible Markup Language) : 다목적 마크업 언어로 태그 등을 이용하여 데이터의 구조를 작성
JSON(Java Script Object Notation) : '키:값'쌍으로 이루어진 데이터 오브젝트를 전달하기 위한 개방형 표준 포맷

	CSV	XML	JSON
장점	용량이 작다 (많은 양 데이터 전송 유리)	직관적으로 뛰어난 가독성	용량이 적고, 가독성이 좋은 편
단점	가독성이 떨어진다.	용량이 크다 데이터의 양이 많아지면 추출 속도가 떨어진다.	데이터의 양이 많아지면 추출 속도가 떨어진다.
활용	간단한 테이블 작성 읽는 속도가 중요한 부분	직접 데이터의 수정이 잦은 부분, 단순 게임 옵션	자바스크립트 객체 Ajax(비동기통신) 표준

3. 비동기식 통신 방법

	Ajax	Fetch
장점	jQuery를 통해 쉽게 구현 가능	jQuery가 필요 없고, 속도가 빠름 (내장 라이브러리)
단점	jQuery를 통해야 구현 가능	디테일한 설정이 부족(axios를 더 선호)

2. 통신

① Ajax : url, type, success, error 필요

<!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>Document</title>
    <script src="./js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <script>
        // 통신 방법
        let url = 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101'

        $.ajax({
            url : url, // 요청 서버 경로 (외부 주소, 내부 파일)
            type : 'get', // 요청 방식 (get/post)

            // 만약, 보내줄 데이터가 있다면? => 보통 Back-End 
            // data 키값에 넣어주기
            // data : {'name':'ye', ...}
            
            // 데이터를 받아오는데 성공 유무 확인
            success : (res)=>{
                console.log(res)
            },
            error : ()=>{
                console.log('통신 실패!')
            }
        })

    </script>
</body>
</html>

② fetch

<!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>Document</title>
    <script src="./js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <script>
        // 통신 방법
        let url = 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101'

        fetch(url)
        .then(res => res.json()) // 응답 결과를 json 형태로 파싱
        .then(data => {
            console.log(data)
        })
        .catch(err => console.log(err))

        // 만약 데이터를 보내줘야 할 때는?
        // fetch(url,{보낼방식, 데이터, ...}) => Back-End

    </script>
</body>
</html>

저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

자바스크립트 비동기 통신 Ajax를 이용해 영화진흥위원회 api 데이터 접근 (JavaScript Asynchronous communication Ajax) (0)	2023.01.21
자바스크립트 jQuery 기본 문법 (JavaScript jQuery) (0)	2023.01.20
자바스크립트 DOM (JavaScript Document Object Model) (0)	2023.01.15
자바스크립트 객체 (JavaScript Object) (0)	2023.01.15
자바스크립트 함수 (JavaScript Function) (0)	2023.01.14