[자바스크립트] 10. Ajax Server

1. Ajax 서버 구조

• Ajax (Asynchronous JavaScript And Xml) 서버
• JavaScript와 XML 형식을 이용한 비동기적 정보 교환 기법
• HTML 서버와 달리 데이터만을 전송하는 서버 (XML → JSON으로 변화)
• XMLHttpRequest를 보완한 Promise 객체, Fetch API의 Async / Await 사용

• Ajax 작동 원리
1. 클라이언트(브라우저)가 사이트에 접속하면 서버는 HTML Template 전달
2. 클라이언트는 HTML Template과 CSS를 통해 화면을 Rendering
3. 추가로 서버에서 데이터를 가공하는 방법이 담긴 script(JS)를 전송
4. 클라이언트는 script에 사용해야 할 데이터를 다시 요청
5. 서버는 데이터만을 클라이언트에게 전송 (REST API → Ajax : JSON)
6. 클라이언트는 전송받은 데이터를 바탕으로 Template 완성 ( CSR : Client-Side Rendering )

2. Ajax 사용 목적

• Ajax는 CSR을 통한 부분 리로드의 강점이 있는 만큼, 무작정 사용하면 오히려 단점이 존재
• 단순한 페이지 출력 1번으로 끝날 수 있는 작업의 경우
• 서버에서 HTTP를 다시 그려서 주면 끝나는 작업도 Ajax는 다중 통신이 필요
• HTTP / CSS 내 Layout이 너무 많은 경우는 주로 SSR 사용 ( Server-Side Rendering )
• 목적에 맞게 사용해야 함

• Ajax를 사용하는 이유
1. Partial Reloading : 페이지를 매번 새로고침하지 않고, 일부분만 다시 새로고침
• 서버에 걸리는 부하 및 자원 소모 감소
2. 클라이언트의 정보 저장 : HTML 내에서 클라이언트의 정보를 담아야 할 때
• form 태그의 action = 페이지의 새로고침이므로 클라이언트의 작성 정보가 모두 초기화
• 클라이언트의 정보를 건드리면 안되는 회원가입 페이지의 경우 Ajax가 필수적
3. 서버의 다양성
• HTTP 서버 (웹 서버) 외에도, Android, iOS, Linux 등 다양한 OS 내에 프론트 서버도 존재
• OS 및 통신하는 소켓이 다른 만큼 각 서버 내에서 동작하는 프로토콜의 구조도 다름
• 프로토콜의 구조에 국한되지 않는 Data API 서버의 주목
• 하나의 REST API 서버로 여러 종류의 프론트 서버를 동시에 커버할 수 있음