[JavaScript] Ajax

Ajax는 JavaScript의 라이브러리 중 하나로 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다.

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지않고 페이지의 일부만 데이터를 로드하는 기법입니다.

JavaScript를 사용한 비동기 통신, 클라이언트 서버간 XML 데이터를 주고받는 기술입니다.

(자바스크립트를 통해 서버에 데이터를 요청하는 방법)

 

 

Ajax를 사용하는 이유가 있을까?

단순하게 화면에서 무언가를 부르거나 데이터를 조회하고 싶은 경우에는 페이지 전체를 새로고침 하는 것은 비효율적일수도 있다. 새로고침을 하면 화면 내용을 갱신하기 위해 클라이언트와 서버가 request와 response를 주고받으며 페이지를 새로고침한다. 이런 경우, 자원낭비와 시간낭비를 하기때문에 화면을 새로고침 하지않는 Ajax 기법을 사용하기도 한다.

 

 

Ajax의 장점!

1. 필요한 데이터만 가지고 오기 때문에 페이지를 새로고침 하는 것 보다 속도가 빠르다.

2. 비동기적 처리로 서버의 처리가 완료될때까지 기다리지않고 처리가 가능하다.

3. 서버에서 데이터만 전송하면 되어서 전체적인 코드의 양이 줄어든다.

 

Ajax의 단점...

1. 히스토리 관리가 안된다

2. 페이지가 이동하지 않는 통신이라서 보안에 더욱 신경 써야한다.

 

 

방식에는 axios 와 fetch 두가지가 있지만, 제가 사용하는 axios를 예시로 들어보겠습니다!

• axios 방식 (웹 통신 기능을 제공하는 라이브러리)

async function test() {
        await axios({
            method: 'get',
            url: `https://api.testUrl`
        }).then(function (response) {
            console.log("성공", response)
        }).catch(function (error) {
            console.log("실패", error)
        })