AJAX란? Async? Await? Axios?

Asynchronous Javascript and Xml

비동기 방식으로 전체페이지가 아닌 페이지 일부만 로드하는 기술

 

동기방식 : 직렬

비동기 방식 : 병렬

 

XMLHttpRequest Object 생성 -> Callback 함수 생성 -> Request

 

<script>
        $(document).ready(function(){
            $('#loadData').click(function(){
                $.ajax({
                    url: 'data.txt', 
                    type: 'GET',
                    success: function(data) {
                        $('#result').html(data);
                    },
                    error: function() {
                        $('#result').html('데이터 로딩 실패');
                    }
                });
            });
        });
    </script>

 

장점 : 

- 빠른 반응성

- 서버 부하감소

- 백그라운드 데이터 처리

 

단점 :

- 브라우저 히스토리 관리

- 검색엔진 최적

 

Async, Await

비동기 처리를 하기 위한 최근 문법 promise를 반환한다.

async function func(){
	await method();
}

promise가 해결 되기 전까지 이후에 코드를 실행하지않는다.

 

Axios 는 ?

아예 별개의 개념 ajax를 구현하기 위해서 사용하는 비동기 통신 라이브러리.

비동기 통신을 위해 axios나 fetch를 사용한다.