엘리스에서 자바스크립트와 React를 배우면서 ajax를 많이 들었었으나 정확히 어떤 개념인지 확실하게 몰라서 정리한다.
ajax 도입 배경
자바스크립트가 도입되면서 웹은 정적인 것에서 동적인 것으로, 문서에서 애플리케이션으로 발전하기 시작했다.
사람들의 관심사는 웹 페이지를 부분적으로만 변경하고자 하는 것.
왜냐하면 브라우저와 웹 서버가 통신할 때 페이지 전체를 리로드하면 사용자 입장에서는 관심이 분산될 수 밖에 없고, 서버 입장에서도 불필요하게 반복적으로 응답해야 하므로 손실이 크기 때문이다.
이런 문제점을 해결하기 위해 ajax가 도입된다.1
Ajax: 비동기 자바스크립트 Asynchronous JavaScript and XML의 약자, Ajax는 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 화면 전체를 새로 고침하지 않고 변경된 일부 데이터만 로드하는 비동기 처리가 가능
ajax 특징 2
ajax는 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술로,
ajax 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됐다.
사용 목적
장점
- 새로고침없이 데이터 업데이트 가능
- 서버와의 비동기 통신
- FE와 BE의 로드밸런싱
- 해당 표준이 많이 쓰이고 있음
- 인터페이스와 애플리케이션의 구분
- SPA 구현 가능
(ajax를 활용하여 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만든다) - 리소스 관리와 유지보수에 용이
단점
- 히스토리 관리 불가
- 서버 통신 세부 사항이 노출되는 보안 이슈
- 연속으로 데이터를 요청하면 서버 부하 증가
- 동일-출처 정책으로 인해 다른 도메인과는 통신 불가능
- 기존 URL의 의도와 반대됨
- 모바일 기기 지원이 약하다
- 과도한 클라이언트 소스 코드 개발 비용
ajax가 가능/불가능한 시나리오
| 가능 | 불가능 |
|---|---|
| Form 기반 상호작용 | 간단한 Form |
| Deep tree 이동(navigation) | Basic 이동(navigation) |
| 검색 자동완성 | 검색 |
| 빠른 통신과 유저간의 응답 | - |
| 투표 또는 예/아니오와 같은 관계 없는 scene | - |
| 데이터를 필터하고 관계 있는 데이터를 통제하는 scene | - |
| - | 많은 양의 텍스트를 교체 |
| - | 렌더링 통제 |
ajax 작동 방식
- XMLHttpRequest 동기 객체 생성
- 콜백 함수 설정
- 서버와 연결하기 위한 오픈 method 이용
- 서버로 데이터 전송
- 콜백 함수에서 응답 통제
ajax를 구현하는 여러가지 기술
XMLHttpRequest 3
이름과는 달리 XML 뿐만 아니라 어떤 타입의 데이터든 가져올 수 있다.
과거에는 이것을 사용했으나 현재는 fetch API, axios를 쓰는 경우가 많다.
fetch API
- 기존 XMLHTTPRequest를 대체하는 HTTP 요청 API
- JavaScript의 내장 라이브러리이기 때문에 import 불필요
- ES6에 추가된 Promise를 return하도록 정의
<기본 구성>
fetch("https://example.com")
.then((response) => response.json())
.then((data) => console.log("Success:", data))
.catch((err) => console.log("Error:", err))Response { status: 200, ok:true, redirected: false, type: "cors", url:'https://example.com', ...}
axios 2
axios: 브라우저와 node JS에서 쓸 수 있는 HTTP 라이브러리 기반 Promise
axios는 jQuery처럼 Promise를 통한 ajax 기술의 요약의 일종이다.
- 브라우저에서 XMLHttpRequest 생성
- node JS에서 HTTP request 생성
- Promise API 지원
- 요청과 응답의 차단 지원
- 요청, 응답 데이터 변형
- JSON 형식으로 자동 전환
fetch vs axios
| fetch | axios |
|---|---|
| 자바스크립트 내장 별도의 import나 설치 불필요 | 설치 필요 |
| 인터넷 익스플로어 버전에서 지원하지 않는 경우 존재 | 브라우저 호환성이 fetch보다 나음 |
| 지원하지 않는 기능 존재 | JSON 자동 변환, 응답 시간 초과 설정 기능 지원 |
출처
[1]: 생활 코딩 WEB3-Ajax
[2]: Summary of differences between Axios and ajax
[3]: XMLHttpRequest
[4]: AJAX란 무엇인가 ?
