Ajax의 등장 배경 : teach9186.tistory.com/42

 

Ajax의 등장 배경

■Ajax(Asynchronous Javascript And XML) 등장 배경 - 웹 브라우저의 정보 요청에 서버는 해당 정보를 포함한 전체 페이지를 전달했다. - 브라우저와 서버는 매번 전체 페이지를 렌더링, 생성해야 했기에

teach9186.tistory.com

 

■개요

- 용어 : Ajax(Asynchronous Javascript And XML)

- 비동기적인 정보 교환 기법이다.

- XML이라고 명시되어 있지만, JSON이나 일반 텍스트 등 다른 데이터 오브젝트도 사용할 수 있다.

- 주로 JSON 형식이 많이 사용된다.

 

■원리

1. 브라우저가 사이트에 접속하면, 서버는 사이트의 기본 구조를 담은 '템플릿'을 전달한다.

2. 브라우저는 수신 받은 템플릿 HTML과 CSS를 해석해 화면의 기본 모양을 그린다.

3. 계속해서 서버는 데이터의 요청 방식과 가공 방식을 기술한 자바스크립트 파일을 전달한다.

4. 브라우저는 자바스크립트 파일을 해석하여 파일에 기술된 방식대로 서버에 추가 데이터를 요청한다.

5. 서버는 순수 데이터를 응답으로 되돌려 준다.

6. 브라우저는 수신한 데이터를 해석하여 데이터 가공 방식에 따라 템플릿의 적절한 위치에

  데이터의 삽입, 변경, 삭제를 수행한다.

 

■단점

- Ajax는 '동적 페이지 렌더링'을 하기 때문에 자바스크립트를 해석하지 못하는 검색엔진에서는 검색되지 않는다.

- 레이아웃이 복잡한 사이트는 웹 브라우저가 렌더링을 하는 데 힘겨워 할 수 있다.

- Ajax는 최소 2번의 데이터 요청(일반적으로 4회 이상, HTML, CSS, JS 로딩 후 Ajax call)을 해야 해서

  필연적으로 속도 저하가 발생한다.

   -> 이런 경우, '서버 사이드 렌더링'이라고 하여 의도적으로 옛방식 그대로 서버가 모든 페이지를 그려 전달함.

- 자바스크립트를 반드시 사용해야 한다. 자바스크립트를 끄면 Ajax 기반 사이트는 화면의 일부만 그려진다.

   -> 스크립팅 기능이 제한되는 특수 목적 기기나 자바스크립트 엔진을 돌릴 여건이 안되는

      초저성능 임베디드 기기에서는 문제가 발생할 수 있다.

 

출처 : namu.wiki/w/AJAX

 

AJAX - 나무위키

아래의 예제에서는 모두 "//namu.wiki/raw/틀:틀%20모음/" 의 내용을 가져와서 뿌려주는 자바스크립트 코드이다.

namu.wiki

 

반응형

'■ 웹 개발 > JavaScript' 카테고리의 다른 글

ESLint란?  (0) 2020.11.18
Babel이란?  (0) 2020.11.18
JavaScript란?  (0) 2020.11.10
웹 개발 디자인패턴이란?  (0) 2020.11.09
JavaScript Framework란?  (0) 2020.11.09

+ Recent posts