AJAX가 무엇일까?
JavaScript 관련 글입니다.
- JS Event Loop, 자바스크립트 동작 원리
- 호이스팅이란 , var, let, const 차이
- Three.js에 대해
- script, script async, script defer의 차이
- AJAX가 무엇일까?
- 함수선언식과 함수표현식
- null과 undefined의 차이 간단정리
- setTimeout과 setInterval 요약
- this의 여러가지 의미
- Spread Operator(...)?
- JS class Constructor
- ES6 Destructuring Syntax
- default 파라미터 알아보기
- import / export 를 사용한 모듈식 개발방법
- Optional Chaining (?.)
- 프로미스(Promise)에 대해서
- ES8 - async / await
- Symbol 자료형?
- forEach, for in, for of 알아보기
- JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
- 자바스크립트 가비지 컬렉션
- 화살표 함수와 일반함수의 차이
- JavaScript Array.reduce() 간단히 알아보기
오늘은 AJAX에 대해서 간단히 정리해보겠습니다.
AJAX?
AJAX는 “Asynchronous Javascript And XML” 의 약자로 서버와 비동기적으로 데이터를 주고 받는 자바스크립트 기술입니다.
AJAX는 웹페이지 전체를 새로고침하지 않아도 페이지의 일부만 갱신할 수 있습니다.
이전에는 웹페이지의 작은 일부가 변해도 새로운 페이지 전체를 다시 로드해야했습니다. 그래서 화면이 깜빡이는 현상이 있었고, 이것은 시간적으로나 자원적으로나 낭비입니다.
하지만 AJAX를 이용하면 페이지 전체가 아니라, 일부분만 갱신할 수 있습니다. 따라서 깜빡임 현상도 일어나지않고 새로고침없이 화면이 부드럽게 전환됩니다.
AJAX의 장단점
- 장점
- 웹페이지의 전체를 재로딩하지 않아도, 일부분만 갱신가능하다.
- 불필요한 데이터 요청을 최소화할 수 있고 많은 일이 클라이언트 웹 브라우저에서 처리가능
- 단점
- 보안에 주의해야한다.
- 연속해서 데이터를 요청을 남발하면 서버 부하가 생길 수 있다.
이외에도 장단점이 있겠지만 크게는 이렇습니다.
사용법
사용법은 여러 방법이 있는데 간단히 정리해보자면 다음과 같습니다. (전통적인 방법은 제외)
- fetch함수 사용
- jQuery의 ajax()함수 사용
- 리액트나 뷰와 같은 환경에서는 axios 라이브러리 설치하여 사용
End.