ETC

[10분 테코톡] 레고의 Ajax

버스는그만 2023. 7. 21. 21:26

Ajax란?

  • 자바스크립트를 사용해 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수힌하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
  • HTML, CSS, JS, DOM, XML, XMLHttpRequest를 이용한 새로운(2005년 기준) 접근법이자 싱글 스레드인 자바스크립트 엔진을 보완하기 위한 비동기 통신 방식

Ajax 적용 이전의 웹페이지

  1. Request를 요청한다.
  2. HTML, CSS, JS가 포함되는 응답을 받는다.
  3. 다시 요청을 한다.
  4. 다시 HTML, CSS, JS가 포함되는 응답을 다시 받는다.

즉 아래와 같다.

  • 이전 페이지와 비교하여 변경할 필요가 없는 부분까지 포함한 HTML을 매번 다시 받기 때문에 불필요한 데이터 통신이 발생
  • 변경할 필요가 없는 부분까지 처음부터 다시 렌더링하여, 화면 전환이 일어날 때 화면이 순간적으로 깜빡이는 현상이 발생
  • 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹됨

Ajax 적용

  • 브라우저에서 제공하는 Web API인 XMLHttpRequest(XHR) 객체를 기반으로 동작
  • XHR은 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공

XMLHttpRequest(XHR)란?

  • XHR 객체는 서버와 상호작용할 때 사용할 때 사용
  • XHR를 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있음
  • 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트 할 수 있음
  • XML 이외의 다른 종류의 데이터도 요청할 수 있음

Ajax 적용 이후의 웹페이지

  1. Request를 요청한다.
  2. HTML, CSS, JS가 포함되는 응답을 받는다.
  3. Ajax로 요청한다.
  4. DOM 일부만 조정한다.(JSON 형식으로 받음)

즉

  • 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 받기 때문에 불필요한 데이터 통신이 발생하지 않음
  • 변경할 필요가 없는 부분은 다시 렌더링하지 않아서 화면이 깜빡이지 않음
  • 클라이언트 서버 간 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 뒤 블로킹이 발생하지 않음

그런데 AJAX는 Asynchronous JavaScript and XML의 준말 XMLHttpRequest인데 왜 JSON을 주로 사용할까?

XML

<name>이름</name

<title>제목</title>

 

태그를 열고 닫으며 배열 등 표현하기 힘듬

 

JSON

{

  "name": "이름",

  "title": "제목"

}

 

가독성이 올라가며 다양한 형식을 표현할 수 있음

  XML JSON
데이터 표현 데이터를 계층적인 구조로 나타냄
태그를 사용하여 데이터를 감싸고 계층적으로 구조화		 JavaScript 객체 표기법을 기반으로 함
Key-value 쌍으로 데이터를 표현
파싱 속도 상대적으로 느림 상대적으로 빠름
데이터의 크기 상대적으로 큼 상대적으로 작음