LANGUAGE/JAVASCRIPT

[Javascript] Ajax 개념, 동작원리

보겸삼촌 2021. 1. 27. 17:48

1. Ajax (Asynchronous JavaScript and XML)

Web에서 화면을 갱신하지 않고 Server로부터 데이터를 가져오는 방법

 

 

  1.1. 동작원리

 

    : Browser에서 Server로 보낼 데이터를 Ajax Engine을 통해 Server로 전송됨

     이 , Ajax Engine에서는 JavaScript를 통해 DOM을 사용하여 XMLHttpRequest(XHR) 객체로 데이터를 전달

     이 XHR을 이용해서 Server에서 비동기 방식으로 자료를 조회

 

 

      Server에서 데이터를 전달할 때 화면 전체의 HTML을 전달하지 않고 Text 또는 xml형태로 Browser에 전달

 

[출처] http://www.nextree.co.kr/p4771/

 

 

 

  1.2. Ajax 특징

 

    : Ajax를 사용하지 않은 web page에서는 Server로 데이터를 전송할 때마다 화면 전체Refresh하는 방법을 사용 

     따라서, 사용자가 화면 내에서 어떤 작업을 진행하고 있는 경우에도 초기화되고, 화면 전체 조회에 의해 Server

     부담을 주고 속도까지 느려짐

 

      그러나, Ajax를 사용해서 Server와 데이터를 주고받게 되면, Server에 핵심 데이터만 전송하기 때문에 화면 전체를

     초기화하지 않고, 부담이 덜하며 속도 문제도 해결할 수 있음

 

 

      화면마다 특유의 기능을 동작하기 위해 설치하는 Active X가 있음. 그러나, Ajax사용하면 화면 전체를 조회하지

     않기 때문에 이런 Active X를 설치하지 않고도 데이터 를 조회할 수 있음.