[JS] Ajax

서론

당분간은 비동기 통신에 대해 올릴 예정 입니당~

Ajax

Asynchronous Javascript And Xml의 약자로 자바스크립트와 xml의 비동기 통신을 의미

• 현재는 xml 형식 말고도 다른 데이터 형식도 통신
• JSON, HTML, 텍스트 등 다양한 형태로 통신

Ajax 전

• 한 부분 수정 시 전체 페이지 서버에 재요청 해야 함
  

Ajax 후

• 페이지의 일부 수정 시 수정하는 부분만 요청
• 새로고침 없이 데이터를 가져올 수 있어 더 나은 사용자 경험 제공
  

XMLHttpRequest

• 서버와 통신하기 위한 객체
• 해당 객체를 통해 새로고침 없이 URL로 데이터를 가져올 수 있음
• XMLHttpRequest의 등장으로 Ajax 사용 가능

XMLHttpRequest 통신 구현

요청 생성

• XMLHttpRequest 생성자로 요청 객체 생성

const request = new XMLHttpRequest()

요청 구성

• 요청 메서드와 요청을 보낼 URL 입력

request.open('GET', 'https://api.github.com/users/soohyn/repos')

• 해당 URL은 깃헙에서 제공하는 api 주소: repository 가져오기

요청 응답 청취

• 서버에서 보내는 응답에 이벤트 설정
• 응답 데이터 처리 로직 추가

request.addEventListener('load', (e) => {
  console.log(JSON.parse(e.target.response))
  // 데이터 처리 로직
})

요청 전송

• 앞서 구성한 요청 URL로 요청을 전송

request.send()