Ajax

비동기 vs 동기

---

동기처리(Synchronous) : 클라이언트가 서버에게 데이터 요청을 하면 그 요청에 맞는 응답이 올때까지 다른 작업을 하지 않고(멈춰있음) 기다린다. 그 후에 요청에 맞는 응답을 받게 되면 그제야 다음 요청을 처리한다.
즉, 브라우저는 스크립트가 서버로부터 데이터를 수집하고 이를 처리한 후 페이지 나머지 부분이 모두 로드될 때까지 대기하는 것이다.

비동기처리(Asynchronous) : 클라이언트가 서버에게 데이터 요청을 한 후, 서버가 요청에 맞는 응답을 언제 줄지 모르기 때문에 무작정 기다리지 않고 비동기처리를 한다.  즉, 요청만 보내놓고 응답이 오지 않아도 다음 새로운 요청으로 넘어가버린다. (다른 작업이 가능)

여기서 자바스크립트 언어는 순차적 연산을 거치는 동기처리에 가깝다. 이는 싱글스레드, 콜스택의 특성을 갖고 있기 때문인데 그래서 자바스크립트에선 비동기처리를 활용하는 것이 매우 중요하고, 자바스크립트에서 비동기처리를 하기 위해선 Callback(콜백)함수를 사용해야 한다.

---

Ajax

Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자로 다음과 같은 기술들을 사용하여, 웹페이지의 전체 페이지를 새로 고치지 않고, 페이지의 일부분만을 서버에서 가지고 와서 ‘웹페이지 화면을 동적으로 변경하는 방식’을 의미합니다.

• HTML DOM
• Javascript
• 브라우저 내장 객체 XMLHttpRequest 또는 Fetch 함수

---

Ajax 특징

• 비동기 통신

Ajax는 비동기적인 통신을 지원합니다. 즉, 웹 페이지와 서버 간의 데이터 교환을 페이지 전체를 다시 로드하지 않고도 수행할 수 있습니다.

• DOM 조작

서버에서 수신한 데이터를 Javascript를 사용하여 웹페이지의 DOM (Document Object Model)을 동적으로 조작해서 실시간으로 업데이트되는 웹페이지를 구현할 수 있습니다.

• 부분 업데이트

전체 페이지를 다시 로드하지 않고도 필요한 부분만 업데이트할 수 있습니다. 이는 사용자 경험을 개선하고 서버 부하를 줄여줍니다. 이를 통해 실시간으로 웹페이지를 업데이트할 수 있고 동적 웹 애플리케이션을 개발할 수 있습니다.

---

Ajax 장단점

장점

• 페이지 전환을 최소화하여 웹페이지 속도 향상
• 서버 측 처리를 기다리지 않고, 비동기적 처리
• 수신하는 데이터양을 줄일 수 있으며, 클라이언트에게 처리를 위임 가능
• 기존 웹과는 다르게 다양한 UI 가능

단점

• 페이지 이동이 없는 통신으로 인해 보안상의 문제
• 요청을 남발하면 역으로 서버의 부하 증가
• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
• 스크립트로 작성되어 디버깅의 불편함이 존재

---

자료 참고

[참고 1] [참고 2]