AJAX

티라노·2023년 10월 15일

웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아서, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해주는 기술
- 초창기의 웹이 페이지의 일부분만 바꾸고 싶은 경우에도 항상 페이지가 새로 로드되는 방식이였기 때문에, UX 개선을 위해.
Asynchronous JavaScript And XML: 자바스크립트를 사용해서 비동기적으로(=사용자가 보고 있는 현재 화면에 영향을 미치지 않고 별도로 백그라운드에서 작업을 처리한다는 뜻) 리퀘스트를 보내고 리스폰스를 받는데 기반이 되는 기술들의 집합
- 구글맵에서 음식점 클릭하면 밑에 해당 음식점 정보 뜨는 것 같은 거.
- XML: Ajax라는 용어가 생겨날 당시 가장 인기가 많았던 데이터 타입. 요즘은 가벼운 용량과 JavaScript의 일부라는 장점으로 JSON을 많이 사용함. (JSON과 XML 모두 AJAX에서 정보를 담을 때 사용)

Ajax 통신하기
- 초창기: Ajax에서 서버와 통신하기 위해 보내는 HTTP 리퀘스트가 기술의 핵심이기 때문에, 이 기능을 제공하는 객체의 인스턴스가 필요했음. XMLHttpRequest 가 대표적으로 사용된 객체
- 요즘: fetch 함수를 사용해서 Ajax 통신을 할 수 있음. fetch 함수는 XMLHttpRequest 객체를 사용할 때에 비해 좀 더 짧고 간단한 코드로 Ajax 통신을 할 수 있게 해주는 함수.
- 좀 더 다양한 기능을 사용하려면 axios 패키지(라이브러리)를 사용!

Ajax 통신과 아닌 것 구분
- Ajax 통신이 아닌 것
  - <a href="https://learn.codeit.kr/api/main">메인 화면으로 가기</a>
  - Ajax 통신이 아닌 것은 이런 태그를 사용자가 클릭하도록 해서 웹에서의 전통적인 방식처럼 새 페이지를 로드하게 하는 방식
- Ajax 통신
```
// 
function getLocationInfo(latitude, longitude) {
  fetch('https://map.google.com/location/info?lat=latitude&lng=longitude')
    .then((response) => response.text())
    .then((result) => { /* 사용자 화면에 해당 위치 관련 정보 띄워주기 */ });
}
```
  - 이런 식으로 사용자가 느낄 수 없게, 리퀘스트를 보내고 리스폰스를 받아 현재 페이지 일부에 원하는 변화를 주는 방식

어쩌다 프론트 도전기